Add-Ons

Ace Code Editor

Ace

Ace for MODX is based on the Ace code editor (Ajax.org Cloud9 Editor developed by Cloud9 and Mozilla) and has been adapted for embedding into the MODX Manager by danyaPostfactum. GitHub - MODX Extras - Forum Thread

I decided to use Ace for several reasons. It supplies line numbers and document type-aware syntax highlighting, which means it highlights for HTML code in a resource, template or chunk, and highlights for PHP code in snippets and plugins. It allows drag-and-drop from the Trees to insert URL and element tags automatically. It has auto-completion of HTML tags and quote marks. It has Search-and-Replace (command-option-f on a Mac).

Using Ace for Editing Resources

I'm comfortable with HTML code, so I'm using it as my resource editor as well. In order to do this, two System Settings need to be changed. In the Rich Text Editor area, the use_editor setting must be set to No, and the which_editor setting set to Ace.

Setting for Using Ace With Resources

There are a few things I don't like about Ace.

Mainly, it has auto-completion of HTML tags and quote marks. This can get in the way if you are adding tags or quote marks to existing content, as it will place the closing tag immediately after you enter the opening tag, so you have to delete or cut the closing tag and put it at the end of the existing text.

Another, not as annoying but still odd, is that its word-wrap is a little off at times. For example, a period or a comma will end up shifted down from the end of a sentence or phrase, which looks kind of odd. And sometimes when a line is to be wrapped at the end of a word you are typing, the cursor will appear indented on the next line. Typing on will cause the line to jump to the left margin, which again feels a little odd.

When deleting anything from the field, it doesn't trigger the Save button. Fortunately you can always save with ctrl-S (command-s on a Mac), so this isn't as awkward as it could be.

Susan Ottwell
December 2015