Tuesday, October 9, 2012

Getting Started with ACE in the Code Editor

‹prev | My Chain | next›

I think that I have worked through the most pressing of the issues in my fork of Mr Doob's code editor. At the least, I have enough to continue writing and making screenshots for Gaming JavaScript.

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:
➜  code-editor git:(gamingjs) ✗ cd js
➜  js git:(ace) ✗ mkdir ace
➜  js git:(ace) ✗ cd !$
➜  js git:(ace) ✗ cd ace
➜  ace git:(ace) ✗ cp ~/repos/ace-builds/src/ace.js .
➜  ace git:(ace) ✗ cp ~/repos/ace-builds/src/keybinding-emacs.js .
➜  ace git:(ace) ✗ cp ~/repos/ace-builds/src/mode-{css.js,html.js,javascript.js} .
➜  ace git:(ace) ✗ cp ~/repos/ace-builds/src/theme-chrome.js .
In the application's index.html, I pull in this new ace.js file:
<!DOCTYPE html>
<html>
 <head>
  <title>code editor</title>
    <meta charset="utf-8">
  <link rel="stylesheet" href="editor.css">
    <script src="js/ace/ace.js" type="text/javascript" charset="utf-8"></script>
  <script src="js/rawinflate.js"></script>
  <script src="js/rawdeflate.js"></script>
  <script src="js/appcache.js"></script>
 </head>
 <body>
 </body>
  <script src="js/editor.js">
  </script>
</html>
And, in the editor.js file, 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:
...
    <script src="js/ace/ace.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/ace/keybinding-emacs.js"></script>
...
I am not going to dwell on that too much. At least it is working. I call it a night here. I will pick back up integrating into the code-editor tomorrow.


Day #534

3 comments:

  1. wow, this was amazing.

    but I want #editor to be in the html body.
    example:

    <body><div id="editor"></div></body>

    I've tried but failed.
    how can I make it work?

    ReplyDelete
  2. What is the mode for c and c++?

    ReplyDelete
    Replies
    1. ace.getSession().setMode("ace/mode/c_cpp");

      Delete