Greg Chapman
The Monaco Editor

Monaco

Monaco is one of the two editors available as an official WonderCMS plug-in. If I expressed concern about how Summernote injects in-line styling code into a page's content, there's no likelihood of that with Monaco. Like the default editor, Monaco is a text editor, but this one has a number of features that you expect to see in an advanced programmer's editor.

Summernote must be deactivated before Monaco can be activated. Once Monaco is active, then, as soon as you log in, all editable areas on the page are shown in source code form. Click within any area and a cursor appears and you can start adding code.

Editor Features

Steep Learning Curve

I have used a number of HTML and CSS editors and some would count as a full programmer's editor. This is what Monaco is but, installed within WonderCMS it operates in a "full screen" mode with no tool bar or menu system. This means there is no internal help facility to access and no way to customise it if, for example, you prefer to work with a light background to the editor window.. It took me a little time to work out how to make use of its ability to auto-complete HTML code. Perhaps it was the fact that it prompted a number of terms for languages which serve no purpose within WonderCMS.

Syntax Highlighting

As you will have realised when looking at the screenshot above, this editor includes syntax highlighting. Tags, attribute names and their arguments, all are colour coded.

Saving Changes

The first thing I discovered on playing with Monaco was that, unlike the default editor, you need to execute a CTRL-S before you leave the page to save your edits. This will save the changes in all the editable areas on the page. There's no need to CTRL-S when moving f rom one area to another.

Auto-Completion

Discovering how inserting HTML tags worked took a little more time. Start by typing the opening character of a tag, a "<". That will produce a list of possible terms that can be scrolled when there's more than a few. It's worth typing at least the first character of the tag as that reduces the list of terms to a manageable number.

You can then begin to scroll through the list using the CURSOR-DOWN key to select the tag you need. Rather than the selected item being highlighted there's a near invisible slightly different colour block to the right of the chosen item that indicates it's the selected tag. However, if you hit CTRL-SPACE you find a help panel opens to the right describing the function of the selected item. That makes it far easier to see what the selected item is. Hit Return and the selected tag is inserted. You can then type the closing ">" character or the first character of a valid attribute. Again a list of valid attributes appear which can be selected in the same way. If. for example you get as far as typing:

you will find an option that will deliver:

with the cursor neatly sitting between the quote marks. Once you've closed the opening tag and completed the content of the tag, type the:

to start the closing tag. That will bring up a similar list to that for the opening tag, but with just one option, the matching closing tag. Of course it's possible you will want to enter a second opening tag before closing the first. You'll find the editor remembers the appropriate closing tag.

Scrolling Code Bug

There is a strangeness, about the behaviour of the editor should you change window width. The editor window retains it's initial width unless you refresh the page. Long lines of code do not wrap but the editor window will scroll.

Unfortunately, this is not true when running Monaco under Android or ChromeOS. Rather than scrolling the cursor will run off the screen leaving you unable to see where it is, making the editor unusable.

No Spell Check

Another idiosyncrasy is that it may appear that the editor offers a spell check, but you soon realise that it's only prompting you to complete words that are reserved for use in the various languages the core of the editor supports or variations of words that you have entered recently.

Coding Help

While there may be some bugs in the editor, one feature that may be helpful for novice webmasters is that you will find that if you hover the pointer over almost any part of the code a pop-up will appear that explains its use. The pop-ups include links, but, unfortunately, they don't work in the version embedded in WonderCMS.

Summary

As you'll gather I was uncomfortable with Monaco as installed via the plug-in. It ought to offer a lot, but appears buggy and ill finished. It's why I'd back using an editor you'd prefer and pasting the code it produces into the default editor.