Tonight, I am going to continue following along behind the great work by Mr Doob. After I forked his code-editor, Mr Doob experimented with the ACE Code Editor instead of the current CodeMirror editor. I do not have an opinion (yet) on which is better. Both seem to be in wide use with a number of prominent users.
In a new "ace" branch, I remove all of the CodeMirror code. I could have left it, but I want to be sure that I eliminate stray dependencies. Next, I grab the ace source:
➜ repos git clone https://github.com/ajaxorg/ace-builds.git Cloning into 'ace-builds'...I could use the CDN version, but I need to evaluate this locally since it would ultimately be run as part of an HTML appcache.
Back in the code-editor local repository, I copy the ace files that I think I will need:
index.html, I pull in this new
editor.jsfile, into which I have moved all of the code-editor specific code, I replace the CodeMirror setup with a simliar ACE setup:
// editor var interval; var editor = document.createElement( 'div' ); editor.id = "editor"; editor.style.position = 'absolute'; editor.style.left = '0px'; editor.style.top = '0px'; editor.style.width = window.innerWidth + 'px'; editor.style.height = window.innerHeight + 'px'; document.body.appendChild( editor ); var ace = ace.edit("editor"); ace.setTheme("ace/theme/chrome"); ace.getSession().setMode("ace/mode/html");With that, I get the ACE code editor:
I tweak the settings a bit to get a large enough font size and to get Emacs keybindings (very important):
var ace = ace.edit("editor"); ace.setTheme("ace/theme/chrome"); ace.getSession().setMode("ace/mode/html"); ace.setFontSize('16px'); var emacs = require("ace/keyboard/emacs").handler; ace.setKeyboardHandler(emacs);It took me a long while to figure out how to enable the Emacs keybindings. Maybe it is just me, but that was not obvious. In particular, in addition to requiring the emacs keybindings, I am forced to reference the source in the HTML: