We have already created our environment to write and render html, css, js code and also made it secured. Now we’ll add an in-browser code editing tool that supports syntax highlighting, indentation, themes, zen coding and tons of more cool features to help us code even better.
In-Browser Code Editors
There are 2 popular and awesome in-browser code editing tools available:
What's the one thing every developer wants? More screens! Enhance your coding experience with an external monitor to increase screen real estate.
CSSDeck uses CodeMirror. No special reason for that, I just ended up using it.
Integrating CodeMirror
Integrating CodeMirror is super easy. All we need to do is replace our textarea with a CodeMirror Instance by a simple call to the CM API:
// - you can get the textarea_node using jQuery or DOM querySelector() // - cm_options should be a Javascript Object var editor = CodeMirror.fromTextArea(textarea_node, cm_options);
First, you’ll need to download CodeMirror and load the stylesheets (in <head>) and scripts (at the end of <body>):
/lib/codemirror.css/lib/codemirror.js– Core JS/mode/xml/xml.js– Script for XML/HTML Mode/mode/htmlmixed/htmlmixed.js– Script for XML/HTML Mode/mode/css/css.js– Script for CSS Mode/mode/javascript/javascript.js– Script for JavaScript Mode
Phew! Lots of includes. We’ll need to replace some of our old code with new parts:
// EDITORS
// CM OPTIONS
var cm_opt = {
mode: 'text/html',
gutter: true,
lineNumbers: true,
onChange: function (instance, changes) {
render();
}
};
// HTML EDITOR
var html_box = document.querySelector('#html textarea');
var html_editor = CodeMirror.fromTextArea(html_box, cm_opt);
// CSS EDITOR
cm_opt.mode = 'css';
var css_box = document.querySelector('#css textarea');
var css_editor = CodeMirror.fromTextArea(css_box, cm_opt);
// JAVASCRIPT EDITOR
cm_opt.mode = 'javascript';
var js_box = document.querySelector('#js textarea');
var js_editor = CodeMirror.fromTextArea(js_box, cm_opt);
// SETTING CODE EDITORS INITIAL CONTENT
html_editor.setValue('Hello World');
css_editor.setValue('body { color: red; }');
Quite a bit of code, but definitely worth it. All we do is, get the textarea nodes using querySelector() and pass them along with a set of basic options to fromTextArea(). This converts all the textarea elements to super awesome CodeMirror Editors. For a full list of options, settings and features, check out the single page CM Manual. It has got everything you’ll ever need.
We can get rid of the keyup event from textarea now, because the onChange option of CodeMirror accepts a callback that’ll get called everytime there is a user input detected. Also, to fetch the content of the editors, we cannot use textarea_node.value anymore. Instead, we just use getValue() on the CM object.
Themes
CodeMirror also supports a lot of themes. All you need to do is include the CSS file and pass the name in theme option.
Zen Coding
Want to use the amazing Zen Coding in your HTML and CSS code editors ? Not a problem at all! Get the Zen.Coding-Codemirror plugin from here. I think Zen Coding has a new name now – Emmet. So choose your package appropriately and simply load the plugin’s script file in your HTML code. The Readme file in the package will have information on how to add support to your editors which should be something simple like this:
// For HTML
html_editor.setOption('onKeyEvent', function() { return zen_editor.handleKeyEvent.apply(zen_editor, arguments); });
// For CSS
css_editor.setOption('onKeyEvent', function() { return zen_editor.handleKeyEvent.apply(zen_editor, arguments); });
css.setOption('syntax', 'css');
Indentation on Pressing Tab Key
By default you might not be able to indent by pressing the tab key. You’ll need this piece of snippet to enable it:
// Basically adding to the CM Options
cm_opt['extraKeys'] = {
Tab: function(instance) {
if (inst.somethingSelected())
CodeMirror.commands.indentMore(inst);
else
CodeMirror.commands.insertTab(inst);
}
}
Final Words
As far as the client-side part is concerned, we’re completed. In the beginning, we designed and developed the environment where anyone can write html, css, js code that gets rendered and displayed in an iframe in realtime. Next, we made our environment secured by setting our iframe on a different origin and using the HTML5 postMessage API. Finally, we integrated an amazing Code Editor to build a perfect coding environment.
In the next part, we’ll take a look at how to present our creations in a gallery like the homepage of CSSDeck, because that’s how your friends, users, customers, etc. will browser through your mind blowing works!
As of code mirror 3.0
you should add
html_editor.on(“change”,render);
the onChange method does not seem to have a listener
Code is not correct. Final Result is not working. Please, fix it.
Your final product isn’t working!!