CODEWITHSUNDEEP
javascriptjqueryhtml
Olalekan
Olalekan

Reputation: 475

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);

Upvotes: 4

Views: 1474

Answers (1)

Andrei
Andrei

Reputation: 3106

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.

Upvotes: 7

Related Questions