[英]How to listen for and react to Ace Editor change events
Can anyone please give an example, of how the on change event works in ACE Editor ( https://ace.c9.io/#nav=api&api=editor ), with a simple getValue()
when the there is an on change event and send the new text to a div?任何人都可以举一个例子,说明 on change 事件如何在 ACE Editor ( https://ace.c9.io/#nav=api&api=editor ) 中工作,当有 on change 事件时使用简单的getValue()
并将新文本发送到 div? Would be much appreciated as there is no tutorials on how to use Ace Editor other than the documentation.将不胜感激,因为除了文档之外没有关于如何使用 Ace Editor 的教程。 Thanks谢谢
see https://jsfiddle.net/ralf_htp/hbxhgdr1/ and http://jsfiddle.net/revathskumar/rY37e/见https://jsfiddle.net/ralf_htp/hbxhgdr1/和http://jsfiddle.net/revathskumar/rY37e/
html 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 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;
}
the function update()
implements the onChange
event that is associated with the editor.函数update()
实现与编辑器关联的onChange
事件。 If the go-link is clicked and then a character is written in the editor the update()-function outputs the content of the editor in the <div>
with id = output
as html (innerHTML)如果点击go-link然后在编辑器中写入一个字符, update() 函数会在<div>
id = output
编辑器的内容, id = output
as html (innerHTML)
css css
#editor {
/** Setting height is also important, otherwise editor wont showup**/
height: 300px;
}
#output {
height: 100px;
}
https://ace.c9.io/ section Listenting to Events https://ace.c9.io/监听事件部分
See also this thread ace editor onchange not working另请参阅此线程ace editor onchange not working
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.