Question

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

我试过了：

<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
<div id="success"></div>
<div id="info"></div>
<div id="map-canvas"></div>
 <h4 id="place_id"></h4>

编辑器有效，但是在编辑器中输入的内容的实时预览并非如此。我可以让它为textarea工作，但不是编辑。我该怎么做才能让编辑器的实时预览正常工作？

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 Editor实时预览

2 个答案: