javascript - 如何监听 Ace Editor 更改事件并使用react

Question

on change 事件如何在 ACE 编辑器 (https://ace.c9.io/#nav=api&api=editor) 中工作的示例是什么，当有 < em>on change 事件并将新文本发送到 div?

Answer 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()-函数会在<div> 中输出编辑器的内容。与 id = output作为 HTML (innerHTML)

CSS

#editor {
  /** Setting height is also important, otherwise the editor won’t show up **/
  height: 300px;
}

#output {
  height: 100px;
}

https://ace.c9.io/ ，监听事件

部分

另见这个问题: Ace editor with an onchange event is not working