Configure ace editor

February 10th, 2014 § 0 comments § permalink

While I was working on my latest side project, I though of using ace editor for syntax highlighting and code styling. But, configuring editor was bit confusing for me. There was a bunch of CDN links of ace editor available on the site, But didn’t have much information about which one I should use. I tried some of them but didn’t worked for me. At last after some googling, I got the below solution.

I started with defining a div for the editor.

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

Now I need to add the ace editor script, the script worked for me is the one given below.

<script src= '//d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js'></script>

At last need to configure the editor, as you needed

var editor = ace.edit("editor");
editor.getSession().setMode("ace/mode/json");
editor.setTheme("ace/theme/twilight");
editor.getSession().setTabSize(4);
editor.getSession().setUseWrapMode(true);

You can configure the editor as you need, I set the mode as json for my application. You set it as ruby, php, etc.. as you need.

Thanks