Why you shouldn’t use a standard WYSIWYG editor for your custom CMS

Let me start off by saying when I think of WYSIWYG editors, I’m thinking of Word-like toolbars that you find in many popular CMSes of today. It looks something similar to:

WYSIWYG is most definitely not a limited toolbar in which you can add very specific (supported) styles on your page.

I also must admit, when building custom CMSes I’m not a huge fan of slapping in a WYSIWYG editor into a CMS and deeming a page as ‘manageable’.

And this is why:

1. Your client will almost definitely copy and paste their website copy onto your WYSIWYG editor.

   This means that all formatting and styling will also come across as well. Although you can do some funky things to the HTML markup (i.e. only allow certain tags, strip all attributes etc.) the results are unpredictable and your front end will suffer.

2. Their copy might (and most probably will) ruin or break the overall look of the entire page

   Let’s say a client has a table in their well formatted Word document, and they paste it into the editor. Whilst it looks identical on the editor itself, they save and publish and BAM. The entire page is broken, the sidebar is appearing on the bottom of the article, the footer is now somehow merged into the content itself.

   Now why is that? The reason is that Word brings across all the table formatting, and this may affect the overall page dimensions, hence throwing everything out of whack.

   But I deleted the table and my page still looks whacky! Good point. The reason is that sometimes when you delete certain sections of your copy, the overall styles are still preserved in the source code. Unfortunately, sometimes the only way you can remove the custom styling is by deleting the entire page itself (or the source code)

3. WYSIWYG editors and structured content don’t go hand in hand

   If you want your page layout to stay consistent, look pretty and not get messed up by clients but at the same time want to structure your content logically – elements going in their correct locations across the page and so on you simply cannot use a WYSIWYG editor. There is just too much room for error.

Q: I’m a developer. What can I do instead?
A: Structure your content.

You need to implement ways to allow the client to properly manage their content, without needing them to worry about how it looks or how it’s formatted. This means modularising and structuring your content, restricting clients from being able to mess up the page. Content should be portable.

Use Markdown. I love Markdown purely because it allows users to format their document through a limited set of controls, without having to open up the editor to the entire world of HTML. Markdown Pen is a good implementation of a live editor (http://sofish.github.io/pen/)

Think in blocks and sections. Bootstrap originally glorified the idea of structuring entire pages into series of rows and columns, and I think that’s a great idea. With a block-minded approach, you can develop modules for specific pieces of functionality that exist on your site. Featured products, galleries, carousels – they can be all be modularised.

Squarespace is a great example of how content can be broken down to modules and blocks.

A user can login and create a text block, or a gallery block and so on and just start writing their content. They can even also move their content blocks around in order to create two/three column layouts – so if a client wanted to divide a page into two columns, with an image on the right and text on the left they can do so (and make it work responsively)!

And finally if you must put in a WYSIWYG editor, make sure you strip out all custom formatting upon Save so the styling pulled across cannot be injected in with the content!

Further reading: http://www.markboulton.co.uk/journal/wysiwtfftwomg