如何侦听 Ace Editor 更改事件并做出反应
Posted
技术标签:
【中文标题】如何侦听 Ace Editor 更改事件并做出反应【英文标题】:How to listen for and react to Ace Editor change events 【发布时间】:2016-06-14 09:51:08 【问题描述】:谁能举例说明 ACE 编辑器 (https://ace.c9.io/#nav=api&api=editor) 中的 on change 事件是如何工作的,当存在 on change 事件并将新文本发送到 div 时使用简单的 getValue()
?将不胜感激,因为除了文档之外没有关于如何使用 Ace Editor 的教程。
谢谢
【问题讨论】:
【参考方案1】:见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>
和@987654330 中输出编辑器的内容@ as 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
【讨论】:
小建议:在绑定“change”事件时,可以直接传递更新函数,无需将其包装在额外的函数中:editor.getSession().on('change', update);
。以上是关于如何侦听 Ace Editor 更改事件并做出反应的主要内容,如果未能解决你的问题,请参考以下文章