A Shining Web-based Code Editor, ACE, 1.0 Released

We used it in our “Java Rule Source Code” edit page. The editor is very attractive and easy to integrate with our current page. Previously I had tried to use CodeMirror but I didn’t satisfy with its Java editor capabilities. There are many application areas for it. We plan to use it in our SQL Editor (SQL) and Report Writer (XML). Thanks to the team, really great job.

It supports many languages. There are many themes for syntax coloring. It has many useful features which are detailed here:  

http://ace.ajax.org

Here is a brief tutorial how I used it in our JSP page:

1- Download and extract latest stable version from here:  

https://github.com/ajaxorg/ace

2- There is only one directory to embed to your project. I used(you may prefer one of other optional folders) “src-noconflict” directory and named it as “ACE” and loaded it to root path in our web project to use from “/ACE” URL path.

3- Add following meta to the top of head section of your existing page:

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

4- Add editor component to wherever you want to embed in your page:

<div STYLE="width: 850px; height: 400px;" id="JavaEditor"><%=dbRule.getValue("SourceCode")%></div>
  
<script src="/ACE/ace.js" type="text/javascript" charset="UTF-8"></script>
<script>
    var editor = ace.edit("JavaEditor");
    //editor.setTheme("ace/theme/twilight");
    editor.setTheme("ace/theme/textmate");
    editor.getSession().setMode("ace/mode/java");
    editor.renderer.setShowPrintMargin(false);
</script>

5- To post it to server to save editor’s content, I added a hidden field and used following script(It creates a textarea with empty name in the background):

<form method="post" ... onSubmit="var editor = ace.edit('JavaEditor');document.frmInput.SourceCode.value=editor.getValue();">