Search code examples
javascripthtmlace-editor

ace editor not displaying <html>

I want to display html code in ace editor from load but the <!DOCTYPE>, <html>, <head> and <body> are not displayed. The line are blank in the editor.

<pre id="editor">
<!DOCTYPE HTML>
<html>
<head>
    <title>my website</title>
</head>
<body>
<!--Add your heading tag below-->

</body>
</html>

I have also tried replacing the special characters but this code is displayed exactly as typed. The characters do not get converted to < etc

<pre id="editor">
&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;my website&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;!--Add your heading tag below--&gt;

&lt;/body&gt;
&lt;/html&gt;
</pre>

The javascript

el = document.getElementById("editor");
text = el.innerHTML;
editor = ace.edit(el);
editor.session.setValue(text);
editor.setTheme("ace/theme/custom");
editor.session.setMode("ace/mode/html");
editor.getSession().setUseWrapMode(true);
editor.setOptions({
    enableBasicAutocompletion: false,
    enableSnippets: false,
    enableLiveAutocompletion: false
});
editor.gotoLine(2);
Solution

  • use escaped version and do not call setValue(text); after ace.edit or use text = el.textContent; instead of innerHTML.