Greg Chapman
The Default Wcms Editor

Some Limited Features

Once you have installed WonderCMS and logged in the program shows any editable area with a dotted line around it. Also added to every page are a "Settings" and a red "Logout" button. You are then ready to begin building your web site and will probably either start by adding pages via the Menu option on the Settings modal or editing one of the two pages created on installation.

If you click within an editable area. The text will change to the code that produces the content and you can start typing. And that's the point, out of the box, it will be HTML code that you'll be typing – into an editor that, at first glance, has very little more sophistication than Windows Notepad!

Introducing HTML

However, HTML code should not be unnecessarily intimidating. Below you see how the main editable area of the Home page looks, once you click in it and it contains 90% of the types of structures you are likely to use if you're aiming to build a site that contains only text and images.

You see main heading tags around the top line. They are the opening "h1" tag and it's matching closing tag "/h1". The following three lines show sets of paragraph tags ("p" and "/p"). The first of these includes some bold text, surrounded by "b" tags. The second includes an anchor tag. These are used when creating links to some other page. They include a reference to another HTML file, hence the " href="xxx" " (known as the tag's "attribute"), where the xxx is the address of that other page. This particular link is given the class "button".

The information to tell how any particular tag, attribute or class is to be displayed is held in another file known as the stylesheet. In the stylesheet built into the "GregCustom" theme there is no such class defined, so under this theme it is displayed in the same way as any other link. (The stylesheet for the default "Sky" theme does have rules for that class. It produced the large white ovals around that text.)

Many users of WonderCMS will have no need to concern themselves with what's in a stylesheet. It is just something that makes their chosen WonderCMS theme work. In most cases all one needs to know are half a dozen HTML tags, enough to know how to define headings, paragraphs, numeric and bulleted lists and insert images or videos. WonderCMS itself looks after all the other technical stuff in the background.

Editor Features

Spell Check

There's one clear benefit over Windows Notepad and that is that as you're working inside your browser, you should have spell checking available.

Auto Indent

Another feature I have noted that puts it ahead of Windows Notepad is that it will auto-indent. As a human writing code you'll want to divide it into blocks so besides adding tags it's a good idea to make the various blocks of code, such as paragraphs, easily visually distinguishable and the simplest way to do that is to separate them with carriage return keystrokes. If you hit TAB or a couple of spaces after a CR keystroke in order to indent that line, any future new lines will be indented by the same amount.

Whether that is all you need very much depends on the intricacies of the code you will need to type. If you're a Windows user and it's just headings, paragraphs links and images, then you might be happy to type a few tag structures followed by CTRL-X and rely on the WIN-V keystroke to open the Windows clipboard where you can pick the structure you want from the list of items recently sent to the clipboard.

Auto Correction!

One thing you won't discover until you save your edits, which you do simply by clicking outside the editable area is that the editor will attempt to correct any errors in your code. This can cause confusion for the new coder. An error as simple as a missing punctuation symbol can have a quite dramatic effect. The editor will make what might appear to be a quite irrational wild guess at what was intended, inserting the code necessary to achieve that result.

Recovery from such auto-correction can be a problem for a novice coder. It's one reason why I would always recommend using an external editor and pasting in the code from that into the WonderCMS editor. Doing it that way means you still have the uncorrected code available to correct and learn from. That's so much easier than trying to correct code written by the machine.

Other Options

While the default editor may not seem to be anything to get excited about, its main advantage, as suggested above, is that you can use your preferred text editor and paste its output into WonderCMS. However, if you want to avoid coding then the Summernote editor can be added to WonderCMS via an official Plug-in. This is a WYSIWYG editor that largely hides any underlying code and works very much like a word processor.

If you're a programmer or, like me, you've been hand coding web sites since the days of Windows for Workgroups v3.11, then you may prefer the other editor available as a plug-in or you will have acquired something to which you've grown accustomed and will prefer to use that. If you're new to text editors you'll find some Suggestions to try out.