Search code examples
ace-editorauto-indentpre

Ace editor not auto indenting


I have a string (from a buffer) that I have to put into an ace editor (like a pre tag) but when I add the string ace is not showing any indentation whereas a normal <pre></pre> and the console both show all indentation.

In the console I see the indentation!

console.log(d.code.toString());

enter image description here

But when I add it to ace:

$('#view').html(
    '<pre id="editor">'
+       (d.code.toString().replace(/\>/g,'&gt;').replace(/\</g,'&lt;'))
+   '</pre>'
    );
var editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor.session.setMode("ace/mode/javascript");

enter image description here


Solution

  • Try using editor.session.setValue(d.code.toString()) instead of using html.

    or simply pass option to ace.edit

    var editor = ace.edit(null, {
        theme: "ace/theme/monokai",
        mode: "ace/mode/javascript",
        value: d.code.toString(),
    });
    

    then append editor.container to the dom

    editor.container.id = "editor"
    $('#view').append(editor.container)