代码之家 › 专栏 › 技术社区 › Xarcell

Ace编辑器实时预览

ace-editor jquery

Xarcell · 技术社区 · 10 年前

我在尝试创建一个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>

编辑器可以工作,但编辑器中键入的内容的实时预览不起作用。我可以让它在文本区工作,但不能让编辑器工作。我该怎么做才能让实时预览为编辑器工作?

2 回复 | 直到 10 年前

a user 10 年前

看起来从未调用showHTML,请尝试添加 editor.on("input", showHTML) 和使用 editor.getValue() 在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>

karayakar 7 年前

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

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

推荐文章

Daniel Nunez · ace编辑器-传递模式以形成输入

8 年前

KZcoding Tharun · Ace编辑器:为什么要调用两次键盘事件处理程序?

8 年前

aBanhidy · Ace代码段编译使用方括号

9 年前

Eyk Rehbein · 是否可以在不更改光标位置的情况下更新Ace编辑器内的值?

9 年前

1.21 gigawatts · 如何按照所描述的行为进行搜索

10 年前

Xarcell · Ace编辑器实时预览

10 年前

DracoStriker · 无法粘贴到JavaFX WebView上的ACE编辑器

11 年前

user41805 · 如何向模式xml添加新的突出显示规则。js在ace?

11 年前

Radian Jheng · Ace编辑器处理模式?

12 年前

pdu · Turbolinks外部javascript(此处:ACE编辑器)

12 年前