CKEditor
In our opinion the best, most flexible HTML editor on the market today is CKEditor
It has dozens of features that you can review from the link. All of the non-premium features are available in the website building platform. We would love to extend the capability of this platform to include the premium features as well, and maybe one day we will.
Like many Open source projects CKeditor has benefited from multiple years of development and constant improvement.
In a nutshell
CKEditor is like having Microsoft Word on your web page.
You can pretty much create any content you want. There are a few exceptions like <details>, those little dropdown arrows that reveal content below. You often see pages use these in FAQ lists.
However, it's relatively straitforward to configure and extend CKeditor and we will certainly do that. Indeed, we already did that to replace Font selection and how to create a page title and subtitle in the header.
Page Structure
In order to ensure pages are semantically correct three inline editing sections are provided for each page, namely:
- header
- main
- footer
Note that the navigation and any logo are handled automatically by the deployment process, so you don't edit that directly.
The editor is activated by just clicking on the content you want to change. The text immediately becomes editable and you can start typing.
A comprehensive menubar also appears at the top of the section when you click on the content. Depending on what section you're changing this will include all of the things you would expect.
At the bottom of the main section an automatically updated word count shows how many words are currently in your text.
Finally, and most importantly, content is automatically saved to the database every 2 seconds, so there's no risk of losing hours of work.
Fonts
The standard editor only offers so called web safe fonts like Times, Courrier etc.
In order to fully express the personality of a website you really need to be using at least two different web fonts. One font that draws attention to the headings and another font for "reading" text.
Google offer almost 2000 fonts for free all of which are available in the editor. The list is automatically updated every day - there were 1899 fonts last time I looked.
Google do a good job letting you review their fonts with categories like "calm" and "handwriting" for example.
The editor trials the fonts you select by re-formatting the current page. It can take a few seconds to download the selected font from Google dependng on how many distinct characters are included in your text, so it pays to do some research on the Google Font site first.
Images
The standard editor allows you to drag and drop images into the content. We can't do that though because it would require paying for a premium service and losing the ability to optimize images.
The most compelling feature of the website building platform is performance and that comes mostly from delivering pages that contain the smallest amount of data needed for the visitor to engage with the content.
For this reason we use Cloudinary's Digital Asset Management solution to store and deliver images. Basically, we need to optimise the hell out of every image included in your page so that first time visitors can view your content within 2 seconds. We can only do this if the total initial page weight is less than 100K.
Responsive images is a very tricky subject and one that isn't fully mastered even now. However, there have been recent improvements that allow images to be automatically selected by the browser based on its dimensions within the page.
To make this work optimally we ideally need to know the dimensions of the image in terms of weight increments. Cloudinary can tell us all dimensions of an image in say, 5K increments up to an arbitrary limit. We use that to rewrite the image declaration in the page html so that the visitor's browser downloads the optimal image for their device.
Manage Pages
Of course, you can add new pages, change navigation labels, and delete pages.
You can also designate a page as:
- regular
- blog
- portfolio
"blog" pages are collections of the individual pages they contain.
"portfolio" pages are likewise collections of images.
A note of caution. Because the editor changes content inline within the website itself, any new pages have to be deployed in a new instance of the editor website.
This is the only place in the editor where we have a "Save Changes" button, which deploys the entire site rebuilding each page's navigation links so that these can be selected in a subsequent edit.
How long this takes depends on how many pages you have. Typically it takes about 1 second to deploy 2 pages, so a website containing 100 pages will take almost a minute to deploy.