How to evaluate code in the ace editor

I am trying to get html code from ace editor and show preview in iframe.

Example: Code Academy

Here is what I tried:

var textarea = $('textarea[name="html"]');
var view=$('#view');
textarea.hide();
var editor = ace.edit("editor");
editor.setTheme("ace/theme/eclipse");
editor.getSession().setMode("ace/mode/html");
editor.getSession().on('change', function () {
    var preview = view.eval(editor.getSession().getValue());
});
setTimeout(preview, 300);
+4
source share
1 answer

Try the following:

var textarea = $('textarea[name="html"]');
var view=$('#view');
textarea.hide();
var editor = ace.edit("editor");
editor.setTheme("ace/theme/eclipse");
editor.getSession().setMode("ace/mode/html");
editor.getSession().on('change', function () {
    view.contents().find('body').html(editor.getSession().getValue());
});

I assumed that view- yours iframe.

I use the contents()jQuery function to get into iframeand replace html with what is in the editor.

+6
source

Source: https://habr.com/ru/post/1538080/


All Articles