Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to evaluate code in ace editor

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

Example: Code Academy

Here is what i have been trying:

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);
like image 470
Olalekan Avatar asked Mar 19 '23 19:03

Olalekan


1 Answers

Try this:

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 presumed view is your iframe.

I am using the contents() jQuery function to get into the iframe and replace the html with what is in the editor.

like image 70
Andrei Avatar answered Mar 27 '23 11:03

Andrei