变更事件的Ace编辑

时间:2016-03-01 19:44:46

标签: javascript ace-editor

任何人都可以举一个例子,关于on change事件如何在ACE编辑器(https://ace.c9.io/#nav=api&api=editor)中工作,当有一个on change事件并将新文本发送到div时,使用简单的getValue() ?非常感谢,因为没有关于如何使用Ace Editor以及文档的教程。 感谢

1 个答案:

答案 0 :(得分:7)

请参阅https://jsfiddle.net/ralf_htp/hbxhgdr1/http://jsfiddle.net/revathskumar/rY37e/

<强> HTML

<div class="container">
<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">Editor</h3>
    </div>
    <div class="panel-body">
<a href="#" onclick="update()">go</a>        
<div id="editor" onChange="update()" >function foo(items) {
    var x = "All this is syntax highlighted";
    return x;
}</div>
        </div>
    </div>
    <div id="output">Output is here (click 'go' and write HTML and js in the editor) </div>
    <div class="text-center">---End of editor---</div>
</div>

<强>的javascript

    var editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor.getSession().setMode("ace/mode/javascript");
editor.getSession().on('change', function() {
update()
});

function update() //writes in <div> with id=output
{
var val = editor.getSession().getValue();
var divecho = document.getElementById("output");
divecho.innerHTML=val;
}

函数update()实现与编辑器关联的onChange事件。如果单击 go-link ,然后在编辑器中写入字符, update() - function 将在<div>中输出编辑器的内容id = output为html(innerHTML)

<强> CSS

#editor {
/** Setting height is also important, otherwise editor wont showup**/
height: 300px;
}
#output {
  height: 100px;
}

https://ace.c9.io/ 部分持续发生事件

另见此帖子ace editor onchange not working