Ace editor on change event

-1

Может ли кто-нибудь указать пример того, как событие on change работает в редакторе ACE (https://ace.c9.io/#nav=api&api=editor) с простым getValue(), когда есть событие on change и отправляет новый текст в DIV? Было бы очень полезно, поскольку нет учебников о том, как использовать Ace Editor, кроме документации. БлагодаряAce editor on change event

источник

2016-03-01 Andrew O' Neill

см 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; 
}

функция обновления() реализует событие OnChange, который связан с редактором. если идти ссылка нажата, а затем символ записывается в редакторе обновления() - функция выводит содержимое редактора в <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/ раздел Listenting на события

См. Также эту тему ace editor onchange not working

источник

2016-03-01 20:19:01

Ace editor on change event

ответ

Смежные вопросы