Ace Editor实时预览

Question

我正在尝试创建一个ace编辑器的实时预览,以便在编辑器中输入内容.

我试过了:

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

编辑器可以工作,但是编辑器中输入内容的实时预览不是.我可以让它为textarea工作,但不是编辑.如何让编辑器的实时预览正常工作？

Answer 1

看起来从未调用showHTML,尝试在showHTML中添加editor.on("input", showHTML) 和使用editor.getValue()

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