Ace 1.2.0-rc1

Ace 1.2.0-rc1

Ace is a code editor extra that allows you to edit your HTML, CSS and JS files directly in MODX.

Ace is the result of Mozillas Labs Skywriter project and Cloud 9 IDE, it comes with 25 different themes to choose from it supports Ace, Vim and Emacs keybindings, it has an advanced find and replace feature.

I personally love the line code error hints, they have proven to be very useful when crafting css, js and html.

Ace Settings

You can change the extras theme via System > System Settings, then filter by Ace. In the Ace settings screen double click the value in Editor Theme and enter your preferred theme, you can also enable Word Wrap by double clicking the value as well.

Change Ace's Theme

Another tip is if you want to enable your code area to expand to the remaining available size of your screen you need to edit the js file located in:

Media/assets/components/ace/js/modx.codearea.js

Then add this line: "grow : true," without quotes, special thanks to MODX user Kevin Razmus for the tip via Twitter.

Expand Ace Code Area by adding: grow:true

Here is a list of useful shortcuts supported by Ace.

Check out the online demo over at the projects homepage if you want to see all the options and features of the extra. (Some feautres might not work in MODX)

The Ace project is open source and can be modified for commercial or personal purposes, you can fork it on github, it was ported into MODX by Danil Kostin and we highly recommed you use it as your default code editor in MODX.

03 Jun
2012

Author Benjamin Marte Category Reviews Comments (6)

Comments (6)

  1. Susan Ottwell:
    Aug 09, 2012 at 11:35 PM

    What, in your opinion, is the advantage of Ace over CodeMirror?

  2. Benjamin Marte:
    Aug 10, 2012 at 08:03 AM

    I think it's more of a personal preference I just got tired of the Copy & Paste bug in CodeMirror and once I found Ace I fell in love it feels faster auto closes HTML tags and I really like the fact it looks just like my SublimeText2 code view other than that they both do the same. Now if someone managed to integrate Zen-Coding into either of these that would be my default code editor without a doubt.

    Thanks for reading.

  3. Donald Atkinson:
    Aug 10, 2012 at 08:07 PM

    Thanks for this! I was using CodeMirror, but it didn't work for my Resources. Plus, the copy & paste bug was getting increasingly more annoying. About the only thing I'm not sure about is "tabs" vs. "spaces". I prefer tabs, personally, but got used to not being able to type them. Will take a little adjustment getting used to an editor that actually behaves the way that I want it to.

  4. Jose Browne:
    Aug 23, 2012 at 03:54 PM

    Excellent article m8!!!! Especially the "grow:true" tip!

  5. Henrik Andersen:
    Sep 13, 2012 at 01:57 AM

    really good article, ace seems to be good to use as editor. have tried to get it in full screen, at the small hack but .. I can not see how I switch to full screen. Firfox bug, do not capture any errors. Hope you can help

  6. Danil:
    Dec 01, 2012 at 11:14 AM

    Full screen mode is available in new version of Ace. Use Ctrl+F11. I will add Tabs/Spaces option in the next version. I will also try to implement zen-coding. By the way, Ace supports multiple cursors / column selection - sometimes it is very useful.


Leave a Comment

This thread has been closed from taking new comments.

Scroll to top