A few days ago, I successfully created a live code editor using the ace 1.2.9 library for my website guides. Now, I'm attempting to create a basic example, but when I try to enter text in the designated text area for the guides, the studio code compiler throws errors and fails to load. The issue seems to arise when I add the following line within the text area:
document.getElementById("test").innerHTML = "Hello JavaScript";Code:
<body onload="ready()">
<div id="container">
<div id="editor"></div>
<iframe id="iframe" frameborder="0"> </iframe>
</div>
<script>
function update() {
var idoc = document.getElementById("iframe").contentWindow.document;
idoc.open();
idoc.write(editor.getValue());
idoc.close();
}
function setupEditor() {
window.editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor.getSession().setMode("ace/mode/html");
editor.setValue(
`
<!-- You can test freely
with our live code editor. -->
<html>
<body>
<h2>Free code wiki</h2>
<p id="test"></p>
<script>
document.getElementById("test").innerHTML = "Hello JavaScript";
</script>
</body>
</html>
`,
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);
}
function ready() {
setupEditor();
update();
}
</script>
</body>
</html>
Error:
Unterminated template literal