Blog

Eric Tompkins
Sep 12, 2014

New Code Editor - Ace

A few weeks ago we changed the code editor that we use in Branch CMS to the wonderful Ace editor.  This decision did not come lightly and we spent quite a bit of time evaluating different editors. The candidates came down to CodeMirror and Ace. We ultimately picked Ace because we were impressed by the default behaviors, it's customizability, performance and who is maintaining it (the guys behind the Cloud9 IDE). 

Here is how the editor looked when we first implemented it. It's a nice, clean editor and if you look closely you can see that code folding is supported by the little arrows next to the line numbers.

Ace editor - basic implimentation

Improving the Editor

Since we first integrated the Ace editor we have been working on improving our basic implementation. There were four major things that we wanted to accomplish in this update.

1) One of the wonderful things about Ace is that it's very customizable. We wanted to give developers the ability to customize the editor to suit their needs. 

2) Ace editor has a ton of keyboard shortcuts that you will often find in other well-built desktop code editors. We wanted to make it easy to find out what those keyboard shortcuts are. 

3) Due to it's customizability, its possible to integrate some cool third-party code like Emmet. (Hint - we did this!)

4) Another thing that we wanted was the ability to take the editor full screen. 

The Toolbar

To accomplish some of the above goals we added a toolbar to the editor.

Editor toolbar

Right now the toolbar has three buttons. They are in order:

  1. Fullscreen
  2. Settings
  3. Help

Fullscreen

Fullscreen button Clicking the fullscreen button will take the editor fullscreen. Clicking the button again will return the editor to it's original size.

Settings

Settings button Clicking the settings button will open a panel to the right of the editor showing the settings that you can change. You can also click Cmd-, (Mac) or Ctrl-, (PC) to show the settings panel (note that cursor focus has to be within the editor).

Settings panel

When you save your settings you can choose to update the settings just for yourself or for all users. You can do that by changing the "Who do the settings apply to?" field. 

Here are the things that you can change.

  • Theme
  • Font size
  • Key binding
  • Line wrapping
  • Show invisibles
  • Show indent guides

As you change settings you can see the result of the change immediately. 

Theme

There are a large number of themes that you can choose from. About half are light themes and the other are dark themes.  The default theme is TextMate.

Font Size

Choose a font size to increase or decrease the font size. The default font size is 12.

Key Binding

For those geeks out there you can change the key bindings for the editor. The choices are "Ace (default)", "Vim" or "Emacs".  

Note that even when the key binding is changed the Ace keyboard shortcuts are still available when you are in writing mode. 

Line Wrapping

You can turn on or off line wrapping. The default is to have it off. 

Show Invisibles

Showing invisibles will show you space and other white-space characters. The default is 'No'. 

Show Indent Guides

It's often helpful to see how your code is indented. A slight vertical line will show the indent levels of your code. The default value is 'Yes'.

Help

Help button Clicking the help button will show the help panel. You can also click F1 to show the settings panel (note that cursor focus has to be within the editor).

Help panel

There is a lot of stuff that you can do with the editor. The settings panel is an attempt to help you learn the editor. 

The information shown includes:

  • Links to Vim and Emacs key bindings.
  • Links to information about Emmet.
  • Keyboard shortcuts for both Mac and PC.

Note that the keyboard shortcuts only work when your cursor is within the editor. 

Emmet Support

Emmet is a plugin that greatly improves your HTML and CSS workflow. Essentially you can type some short-code, hit Tab and then have a bunch of HTML or CSS code automatically generated.  I encourage you to visit their website and learn about the short-codes. 

Conclusion

We have more plans for the code editor. Some of this includes:

  • Using the editor for Templates and Snippets.
  • Better integration of Branch Code into the editor.
  • Syntax highlighting for Branch Code.

We welcome your feedback and suggestions on how we can make code editing within Branch CMS even better.

Comments

Leave the first comment

Sign up for our newsletter to receive invaluable information about BranchCMS, web design & development.