どのように変更についてイベントはACEエディタで動作します(https://ace.c9.io/#nav=api&api=editor)、単純getValue()
な場合は、変更についてイベントに新しいテキストを送信し、分割?
ベストアンサー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
ゴーリンククリックしてエディタに文字を入力すると、update() 関数<div>
エディタの内容をid = output
HTML(innerHTML)として出力します。
CS
#editor {
/** Setting height is also important, otherwise the editor won’t show up **/
height: 300px;
}
#output {
height: 100px;
}
https://ace.c9.io/、 セクションイベントのリスニング
この質問も参照してください:onchange イベントのある Ace エディターが動作しない