Over a million developers have joined DZone.

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

DZone's Guide to

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

· ·
Free Resource
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:  


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

1- Download and extract latest stable version from here:  


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>
    var editor = ace.edit("JavaEditor");
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();">

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}