Ace Editor Bootstrap

by Viktor Evdokimov

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.1.01/ace.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.min.css">
<div class="container">
    <div class="panel panel-default">
        <div class="panel-heading">
             <h3 class="panel-title">Editor</h3>
        </div>
        <div class="panel-body">
<div id="editor">function foo(items) { }</div>
        </div>
    </div>
    <div class="text-center">---End of editor---</div>
</div>

CSS

#editor {
    /** Setting height is also important, otherwise editor wont showup**/
    height: 40px;
}

JavaScript

var editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor.getSession().setMode("ace/mode/javascript");
editor.setFontSize(30)
editor.getSession().on('change', function(e) {
  console.log(e)
  if (e.data.text.charCodeAt(0) === 10 && e.data.action == "insertText") {
  	console.log('cancel')
      //e.preventDefault()
      //e.stopPropagation()
    	
      //var c = editor.selection.getCursor();
    
      editor.find(String.fromCharCode(10))
      editor.replaceAll('');
      
      editor.selection.clearSelection()      
  }
})