I am an ERP Project Manager for 7 years within a big company which has many subsidiary companies. As ERP team, we are not only implementing ERP software but also writing our own ERP with the target that we sell this product in the future. Our platform is Java and our applications are web-based. Ibrahim has posted 11 posts at DZone. View Full User Profile

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

09.25.2012
| 2148 views |
  • submit to reddit
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();">
0
Published at DZone with permission of its author, Ibrahim Levent.

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)