Ace 编辑器实时预览

Question

我正在尝试为编辑器中输入的内容创建实时预览。

我试过了：

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

编辑器可以使用，但无法实时预览在编辑器中输入的内容。我可以让它为文本区域工作，但不能为编辑器工作。我该怎么做才能让编辑器使用实时预览？

Answer 1

似乎从未调用过 showHTML，请尝试添加 editor.on("input", showHTML) 并在 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>

Answer 2

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

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

Ace 编辑器实时预览

Ace Editor Live Preview

jquery

ace-editor