Thành viên:Phuocthanhnguyen2010/nháp
This is HTML program to make "Html Editor" using Monaco Editor:
<!DOCTYPE html>
<html>
<head>
<title>HTML Editor</title>
<style>
body {
display: flex;
flex-direction: column;
align-items: center;
background-color: #282a36;
color: #f8f8f2;
font-family: Monaco, monospace;
padding: 10px;
}
.editor {
width: 90%;
height: 400px;
margin-bottom: 10px;
border: 1px solid grey;
background-color: #1e1e1e; /* Dark background for input */
color: #f8f8f2; /* Light text for input */
}
iframe {
width: 90%;
height: 400px;
margin-top: 10px;
background-color: #f8f8f2; /* Light background for output */
color: #1e1e1e; /* Dark text for output */
}
.button-container {
display: flex;
justify-content: space-around;
width: 90%;
}
button {
padding: 10px 20px;
margin: 10px;
background-color: #50fa7b;
border: none;
color: #282a36;
font-size: 1em;
cursor: pointer;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #f1fa8c;
}
</style>
<script src="https://unpkg.com/monaco-editor/min/vs/loader.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.5/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js"></script>
</head>
<body>
<div id="htmlContainer" class="editor"></div>
<div id="cssContainer" class="editor"></div>
<div id="jsContainer" class="editor"></div>
<div class="button-container">
<button onclick="runCode()">Run</button>
<button onclick="embedCode()">Embed Code</button>
<button onclick="debugCode()">Debug Code</button>
<button onclick="setDarkMode()">Dark Mode</button>
<button onclick="setLightMode()">Light Mode</button>
</div>
<iframe id="output"></iframe>
<script>
require.config({ paths: { 'vs': 'https://unpkg.com/monaco-editor/min/vs' }});
require(['vs/editor/editor.main'], function() {
var htmlEditor = monaco.editor.create(document.getElementById('htmlContainer'), {
value: [
'<!DOCTYPE html>',
'<html>',
'<head>',
'\t<title>Hello World</title>',
'</head>',
'<body>',
'\t<h1>Hello World!</h1>',
'</body>',
'</html>'
].join('\n'),
language: 'html',
theme: 'vs-dark' /* Dark theme for input */
});
var cssEditor = monaco.editor.create(document.getElementById('cssContainer'), {
value: 'body {background-color: lightblue;}',
language: 'css',
theme: 'vs-dark' /* Dark theme for input */
});
var jsEditor = monaco.editor.create(document.getElementById('jsContainer'), {
value: 'console.log("Hello World!");',
language: 'javascript',
theme: 'vs-dark' /* Dark theme for input */
});
window.runCode = function() {
var htmlCode = htmlEditor.getValue();
var cssCode = "<style>" + cssEditor.getValue() + "</style>";
var jsCode = "<scri" + "pt>" + jsEditor.getValue() + "</scri" + "pt>";
var previewWindow = document.getElementById('output').contentWindow.document;
previewWindow.open();
previewWindow.write(htmlCode + cssCode + jsCode);
previewWindow.close();
}
window.embedCode = function() {
var htmlCode = htmlEditor.getValue();
var cssCode = "<style>" + cssEditor.getValue() + "</style>";
var jsCode = "<scri" + "pt>" + jsEditor.getValue() + "</scri" + "pt>";
var encodedCode = encodeURIComponent(htmlCode + cssCode + jsCode);
var iframeCode = '<iframe src="data:text/html;charset=utf-8,' + encodedCode + '"></iframe>';
navigator.clipboard.writeText(iframeCode);
alert('Embed code copied to clipboard!');
}
window.debugCode = function() {
var jsCode = jsEditor.getValue();
var debugCode = 'debugger;\n' + jsCode;
jsEditor.setValue(debugCode);
}
window.setDarkMode = function() {
document.body.style.backgroundColor = '#282a36';
document.body.style.color = '#f8f8f2';
}
window.setLightMode = function() {
document.body.style.backgroundColor = '#fff5f5';
document.body.style.color = '#282a36';
}
});
</script>
</body>
</html>
Copy this html ✓↑↑↑