111 lines
1.8 KiB
HTML
111 lines
1.8 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>IDE</title>
|
|
<script src='https://cdnjs.cloudflare.com/ajax/libs/ace/1.33.1/ace.js'></script>
|
|
</head>
|
|
|
|
<body>
|
|
<div id='container'>
|
|
|
|
<div id="editor">
|
|
</div>
|
|
|
|
<iframe id='iframe' frameBorder="0">
|
|
</iframe>
|
|
</div>
|
|
</body>
|
|
|
|
<style>
|
|
|
|
html,body { margin:0; padding:0; height:100%; width:100%; overflow: hidden;}
|
|
|
|
#editor {
|
|
height: 100%;
|
|
width:50%;
|
|
display:inline-block;
|
|
}
|
|
|
|
#container {
|
|
height:100%;
|
|
width:auto;
|
|
white-space : nowrap;
|
|
overflow : hidden;
|
|
position:relative;
|
|
}
|
|
|
|
#iframe {
|
|
height:100%;
|
|
display:inline-block;
|
|
width:50%;
|
|
}
|
|
|
|
/* disable tag matching */
|
|
.ace_editor .ace_marker-layer .ace_bracket { display: none }
|
|
|
|
</style>
|
|
|
|
<script>
|
|
var hasLoadedOriginal = false;
|
|
|
|
function update()
|
|
{
|
|
var idoc = document.getElementById('iframe').contentWindow.document;
|
|
var writeVal = '';
|
|
|
|
if (!hasLoadedOriginal) {
|
|
writeVal = localStorage['currentWork'];
|
|
hasLoadedOriginal = true;
|
|
} else {
|
|
writeVal = editor.getValue();
|
|
}
|
|
|
|
idoc.open();
|
|
idoc.write(writeVal);
|
|
idoc.close();
|
|
|
|
localStorage['currentWork'] = editor.getValue();
|
|
}
|
|
|
|
function setupEditor()
|
|
{
|
|
window.editor = ace.edit("editor");
|
|
editor.setTheme("ace/theme/monokai");
|
|
editor.getSession().setMode("ace/mode/html");
|
|
if (!localStorage['currentWork']) {
|
|
localStorage['currentWork'] = `<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
</head>
|
|
|
|
<body>
|
|
</body>
|
|
|
|
</html>`
|
|
}
|
|
editor.setValue(localStorage['currentWork'], 1); //1 = moves cursor to end
|
|
|
|
editor.getSession().on('change', function() {
|
|
update();
|
|
});
|
|
|
|
editor.focus();
|
|
|
|
|
|
editor.setOptions({
|
|
fontSize: "16pt",
|
|
showLineNumbers: false,
|
|
showGutter: false,
|
|
vScrollBarAlwaysVisible:true,
|
|
enableBasicAutocompletion: false, enableLiveAutocompletion: false
|
|
});
|
|
|
|
editor.setShowPrintMargin(false);
|
|
editor.setBehavioursEnabled(false);
|
|
}
|
|
|
|
setupEditor();
|
|
update();
|
|
</script>
|
|
|
|
</html> |