HTML Editor Sederhana (New Window Preview)

Ini merupakan fitur dasar untuk membuat html editor

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML Edit</title>
<style>
/* Styles for editor area */
#editor {
width: 100%;
height: 500px;
font-size: 16px;
border: 1px solid #ccc;
}

/* Styles for preview area */
#preview {
width: 100%;
height: 500px;
font-size: 16px;
border: 1px solid #ccc;
padding: 10px;
box-sizing: border-box;
overflow: auto;
}
</style>
</head>

<body>
<h1>HTML Edit</h1>
<p>Edit your HTML code below:</p>
<textarea id="editor"></textarea>
<button onclick="preview()">Preview</button>

<script>
function preview() {
var editor = document.getElementById("editor");
var previewHTML = editor.value;

// Open a new window and write the preview HTML to it
var previewWindow = window.open("", "previewWindow", "width=800,height=600");
previewWindow.document.write(previewHTML);
previewWindow.document.close();
}
</script>
</body>
</html>

Tambah Fitur Dark Mode:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML Edit</title>

<style type="text/css">
body {
background-color: #eee;
color: #222;
}

/* Dark mode styles */
body.dark {
background-color: #222;
color: #eee;
}

#editor {
width: 100%;
height: 500px;
font-size: 16px;
border: 1px solid #ccc;
background-color: #fff;
color: #222;
}

/* Dark mode styles */
body.dark #editor {
background-color: #222;
color: #eee;
}

#preview {
width: 100%;
height: 500px;
font-size: 16px;
border: 1px solid #ccc;
padding: 10px;
box-sizing: border-box;
overflow: auto;
background-color: #fff;
color: #222;
}

/* Dark mode styles */
body.dark #preview {
background-color: #222;
color: #eee;
}
</style>
</head>

<body>
<h1>HTML Edit</h1>
<p>Edit your HTML code below:</p>
<textarea id="editor"></textarea>
<button onclick="preview()">Preview</button>
<button onclick="toggleDarkMode()">Toggle Dark Mode</button>

<script>
function preview() {
var editor = document.getElementById("editor");
var previewHTML = editor.value;

// Open a new window and write the preview HTML to it
var previewWindow = window.open("", "previewWindow", "width=800,height=600");
previewWindow.document.write(previewHTML);
previewWindow.document.close();
}

function toggleDarkMode() {
var body = document.querySelector("body");
body.classList.toggle("dark");
}
</script>
</body>
</html>

[Bug] Gedebug

Pencarian

Minggu, 30 Juni 2024

HTML Editor Sederhana (New Window Preview)

Tambah Fitur Dark Mode:

Label