Visual HTML editor

Reading Time: 2 minutes

A recent commit that allowed for HTML syntax to be used in the home message as well as in the footer sites, created the bases of this new feature. I wanted to change the way text on the above-mentioned pages was handled, as there were no options to really format text.

The text values for these pages are stored in the database, and I experimented with adding simple HTML formatting to the text without any success. Luckily, the matter of changing how this formatted texts were displayed on the site were surprisingly easy to fit my needs and soon the displayed text allowed for HTML formatting to be used.

I still wasn’t all too happy with this as inexperienced users might not be comfortable writing their own HTML for their pages, so I looked for a UI based system that would fit my needs.

I soon found my solution; CKEditor a  highly configurable WYSIWYG HTML editor with hundreds of features, from creating rich text content with captioned images, videos, tables, media embeds, emoji or mentions to pasting from Word and Google Docs.

This system worked perfectly with the previous editor implemented by Khashayar Zavosh with LittleLink Admin. I could very easily adapt the saving process that writes the data to the database without changing too much, making this solution perfect for this application.

The previous text editor

The new HTML editor is a very capable tool and a perfect addition for the LittleLink Custom feature set.

Currently, links added with this system all have extended spacing added by the CSS theme, as this is necessary for some links on the website to display correctly. The CSS theme clearly has not been planned out with this kind of feature in mind, and I will probably change this in the future.

Additionally, every text element editable is center aligned, and I might change this as well in some upcoming patch.

Share