The Code Editor

The First-Time Users documentation briefly covered the embedded Code Editor in Barebones CMS. This documentation covers everything you will likely ever need to know about the Code Editor itself including quirks, bugs, etc.

The Code Editor is a reusable component of the Barebones CMS and is used by several widgets and shortcodes.

Please note that this isn't about The Code Widget. The Code Widget uses the Code Editor to allow programmers and web designers edit code from within the browser.


The Code Editor is a syntax highlighting, browser-based, editor written in Javascript. Depending on the web browser and version being used, either ACE/ Cloud9 Editor or EditArea will be displayed. Of all the various syntax highlighting, browser-based editors, these editors offers the most consistent experience in line with popular, client-side text editors and have the greatest potential for future development.

The embedded syntax highlighting editor for programmers and web designers.  EditArea pictured here.
The embedded syntax highlighting editor for programmers and web designers. EditArea pictured here.

The embedded code editor is generally only used by programmers and web designers within Barebones CMS. Currently, the 'File Explorer' site option, the Code widget, the Layout widget, and the official Syntax Highlighter shortcode use the Code Editor extensively.

Everything to make this editor operational inside Barebones CMS is wrapped up inside 'support/editfile.js'. The 'editfile.js' wrapper (aka, the 'Code Editor') loads all the necessary components of ACE or EditArea, located at 'support/ajaxorg_ace' and 'support/edit_area' respectively, and offers functions that make it easy to instantiate an editor instance. Due to the AJAX-ey nature of Barebones CMS, the Code Editor uses the conditional loader. If you wish to use the Code Editor in a widget, shortcode, or even on a public website, read the Built-in Reusable Components documentation. The pre-built 'editfile.js' wrapper makes it much easier to integrate this component into any environment.


Both ACE and EditArea offer a number of useful features that both programmers and web designers tend to desire:

The Code Editor offers a number of features over the basic editor components:

And much more. This extensive feature set creates a very powerful combination that makes it easy to integrate the Code Editor into just about any environment calling for a nerdy in-browser editor.

Known Quirks/Bugs

As with most browser-based products, there are quirks and bugs usually due to the browser itself more than the product. ACE/EditArea and therefore the Code Widget are not without their own set of quirks and bugs.


EditArea has the most issues with tabs:

Didn't really see any issues with tabbing in ACE, but it also hasn't had the workout that I gave EditArea.


The hotkeys/shortcuts are not 100% standard and also non-configurable. Also, Barebones CMS has its own hotkeys/shortcuts which may conflict with some of ACE/EditArea's built-in options.


The "Fullscreen" feature is relatively untested. Use at your own risk. Most "full screen" features rarely work properly in a web browser environment and typically break the page.

Browser Resizing

The various editors used in Barebones CMS don't generally factor in a browser window that is being resized. If you resize the browser window width-wise, get ready to reload the page. EditArea is finicky about this. ACE seems a bit better.

© CubicleSoft