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
wow, this was amazing.
ReplyDeletebut 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?
What is the mode for c and c++?
ReplyDeleteace.getSession().setMode("ace/mode/c_cpp");
Delete