Choosing an Editor

Why Use Anything but the Default Editor?

So you've decided to use WonderCMS and the GregCustom theme to build your site and you're asking yourself why should I need to install a special editor? What's wrong with the default?

The answer to that depends on your experience and what kind of site you are going to build. If it's just going to be an online version of a brochure printed on an A4 piece of paper folded once or twice, so you have in mind a four or six page web site that replicates that, then the "awesome" Summernote editor may well be perfect for you. It works much like a word processor with toolbar buttons for the various ways you might want to format your text. There's not much new to learn.

However, the expectation is that you have chosen the GregCustom theme because you are expecting that, over time, your site will grow much bigger than that and you've heeded the warnings about the difficulties you might have in updating and re-formatting a site that's been built with Summernote. In that case you will be wanting a text editor, ideally one that will insert all the HTML tags you're likely to need with a range of simple easy to remember keystrokes.

What's a Text Editor?

If you're new to web design then you may not be used to using a text editor. They differ from word processors as they lack the features to control the appearance of text on the printed page. Instead think of a text editor as having only the features you might have found on a typewriter. All you can do is insert letters (upper and lower case), numbers, punctuation marks, spaces, tabs and new lines. The one added ability is that of being able to insert and delete text before the content is committed to the document.

The only text editor many will have experienced is Windows Notepad and it has no facilities that help with the task in hand. A search for text editors will suggest many clearly designed for heavy duty programming in a vast variety of languages — total over kill for our limited needs. I would suggest that the ideal candidate should offer at least the additional features listed below.

Auto-Correction

The default editor has an automatic code correction feature. While that might sound like a good idea, in practice it can create a lot of work to put right its attempt at correction. You only need to miss out a vital punctuation character and the editor's attempt to correct the error will produce a further error which it "corrects" filling your page with further spurious code as it works its way through the rest of the page. In consequence features that make it easy to check your content before pasting it into the default editor are extremely valuable.

Useful Features in any Editor

Below I list the features I find most important for those looking for the best tool for them when creating content for the WinderCMS based site. Comments on these features appear in my reviews of the candidate editors listed below.

Syntax Highlighting

Most of the editors suggested will highlight the HTML tags and their attributes in a special colour scheme that makes them easy to spot. Something a simple as a missing punctuation symbol can mean that your content can become part of a tag and show in an unexpected colour. It makes spotting this kind of error very easy to spot and correct.

Tag and Bracket Matching

Forgetting to place a closing tag in your content can make what is supposed to be a heading stretch into the whole of the following paragraph. Being able to scroll through a page stop on an opening or closing tag to see where its partner is, is another very helpful tool when checking that you have got all the right tags in the right places.

HTML Tag Insertion/Completion

After any features that help show technical errors before your content gets pasted into the default editor, perhaps the most useful features are those that help generate complete tag structures with a single keystroke. Some editors have a facility that will recognise the initial < character and a following letter as the start of an HTML tag and will suggest any further letters to complete the tag and, once selected, will then generate the matching closing tag as well. How this is done will vary. The approach some editors have allows for tags that require particular attributes in each case. Others will require more typing each time. Which is preferable will depend on how many links, images and classes your tags are likely to need.

Automatic Indentation

Another approach that can make your tag structures easy to see at a glance is indenting your content after an opening tag. Use the typical CTRL-U keystroke in your browser to examine the source code of any page on this site and you'll see I use this approach extensively.

Find and Replace

You may find that you decide to reclassify headings on a page or replace one word with another, so it's always useful to have a facility that allows you to change such things as all the [h2] tags on a page to [h3]. The default editor lacks this facility as browsers are not normally set up to edit content, only to find certain things on a page.

Spell checking

Not all the editors listed below include spell checking. Given that the expectation is that you will paste any content you create in your editor into the default editor, which will include spell checking, this may not be a feature of as high a priority as you might initially think.

The Candidates

The Default Editor - has some useful features, but not the one I would most expect, simple keystrokes for common HTML tags.

Available as Plug-ins

Summernote - A WYSIWYG editor, but it enters inline styling code that can be difficult to edit six months down the line.

Monaco - A programmer's editor with some tag auto-completion features, but with a steeper learning curve than I liked.

External Editors - for various operating systems

For Windows

Editor² Pronounced "Editor Squared", this is a simple text editor that includes a facility for insert snippets of text with a simple keystroke. This makes it super easy to add the various HTML tags needed when creating content for your site when using WonderCMS.

Notepad2 offers far more facilities for editing code than Editor². It's worth exploring if you want features that the default editor doesn't offer.

For ChromeOS

Text is ChromeOS' default text editor. It's not perfect for use with WonderCMS, but does have some features that are not documented and should prove adequate for most.

Android

Under preparation

Linux