Greg Chapman
The Summernote Editor

Summernote

If you don't like the idea of typing code you can install Summernote. The creators of WonderCMS describe it as an "awesome" editor and I can understand why. It's as good as it's likely to get for those that are new to web design and don't want to get involved in writing HTML or CSS code.These days there are three different versions available.

I haven't investigated thoroughly but when you install one of them it appears also to install Bootstrap. It seems to me that that will only be useful to those interested in developing themes that rely on that package being available. Some themes seem to be designed to accommodate "Summernote Air" rather than either of the other two. I'm tempted to say, unless you have good reason, install "Summernote Lite".

Summernote is one of the two official editor plug-ins available. With it you create your content much as you would when writing a letter in a word processor and you don't need to concern yourself with the code it generates. In short, it's perfectly acceptable for sites that don't extend beyond a few pages.

The editor is typical of the type of WYSIWYG editors that you find in various browser-based web and blog building software packages. Once installed, rather than code, the edit area shows a close approximation to the resulting output of the code that is generated in the background by the editor. Above the edit area, a toolbar shows a set of buttons reminiscent of those seen in early versions of Windows Wordpad. This may comfort a novice web designer, but all is not quite what you might expect if your experience is limited to using word processors.

Here's why – it's all tied up with the stuff on the page that discusses Content and Style. Although, sometimes Summernote's toolbar buttons just add HTML tags to the text entered or selected, at other times it adds further code, known as "Attributes" that add local styling information. Bare HTML tags will be styled according to the rules in the stylesheet of the currently selected theme. However, depending on the button and options selected some, perhaps most, will add styling instructions to those tags.

For example, when you create a new page, you'll find the default text on the page is enclosed in "h2" tags, which you can think of as the code for a sub-heading - on the basis that the page's title will be in "h1" tags. Check for it using the "Code View" button. Return to WYSIWYG view and select all the text then click the active "B" button to de-select it. You will find the code now includes a "span" tag which includes the code 'style="font-weight: normal;"'. If you then select an individual word and click on the "B" button you will now find that word enclosed in "b" tags.

None of this will matter if the site is not expected to expand beyond three of four pages and the user never finds a reason to use the "Code view" feature. However, if the site does grow, or later another theme is selected, then all the local styling that Summernote has added may need to be removed, and that is likely to be a tricky and time consuming task. That's because the code that Summernote generates has no line breaks or indentation to make it easy for a human to read and decipher. Almost certainly, you'll need to copy the code to a text editor designed for coders and spend some time formatting it so it is easy to read.

While a coder like me might moan about the the way Summernote handles things, this is unlikely to worry someone creating a small site. In most cases the WYSIWYG editing that Summernote provides works well. The only area where it seems easy to run into difficulties is if you backspace into the code of a list or table.

On the plus side those creating sites that make heavy use of resources such as PDF files and images will find Summernote a joy. Including them is just a matter of "drag and drop". That's so much easier than the process needed with either the default or Monaco editors.