Ace Editor Live Preview

Question

I'm playing around with trying to create a live preview of ace editor of what's being typed into the editor.

I tried:

<pre id="editor"></pre>
<div id="return"></div>

<script src="vendor/ace/ace.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
    var editor = ace.edit("editor");
    editor.setTheme("ace/theme/twilight");
    editor.getSession().setMode("ace/mode/javascript");
</script>

<script src="vendor/jquery/jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
    function showHTML () {
        $('#return').html($('#editor').val());
    }
</script>

The editor works, but the live preview of what's being typed in the editor isn't. I can get it working for a textarea, but not the editor. What can I do to get the live preview working for the editor?

Answer 1

looks like showHTML is never called, try adding editor.on("input", showHTML) and use editor.getValue() in showHTML

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://ajaxorg.github.io/ace-builds/src/ace.js"></script> <style> html, body { height: 100% } #editor, #return { height: 50% } </style> <pre id="editor">xxx</pre> <div id="return"></div> <script> var editor = ace.edit("editor"); editor.setTheme("ace/theme/twilight"); editor.session.setMode("ace/mode/html"); function showHTML() { $('#return').html(editor.getValue()); } // or use data: url to handle things like doctype function showHTMLInIFrame() { $('#return').html("<iframe src=" + "data:text/html," + encodeURIComponent(editor.getValue()) + "></iframe>"); } editor.on("input", showHTMLInIFrame) </script> 

Answer 2

https://ace.c9.io/#nav=howto

 editor.session.on('change', function (delta) {
                        // delta.start, delta.end, delta.lines, delta.action
                    });