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 an "auto-complete" facility. This generates correctly completed code for any HTML tag you might start typing, easing the job of entering correct HTML code.

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.

I have used a number of HTML and CSS editors but have had no need of a full programmer's editor, and this is what Monaco is. With no internal help facility, 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.

Saving Changes

The first thing I discovered 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 from 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. Hit Return and the selected tag is inserted. You can then either type in an "id" or "class" definition or type the ">" character to complete the opening tag.

Complete the content of the tag and then type "<\" 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

Under Windows, there's a slight strangeness, about the behaviour of the editor should you change window width. The editor window retains the editor'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.

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.