Greg Chapman
Summernote

Summernote

I can understand why the creators of wonderCMS describe Summernote as "awesome". 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. It's perfectly acceptable for sites that don't extend beyond a few pages.

Summernote 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. 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 might have moans 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 allows 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.