Using WYISIWYG editors for content management February 14, 2013

WYSIWYG editor is easy way to give clients to edit content on dynamic sites. But then another problem appears – how to explain clients that they need to fit styles of content they create in editor to the current style of the site. How to explain that Sans Comic isn’t very nice choose if site uses Arial font mostly. Or that using more than 5 different colors to highlight “important lines” of content isn’t good at all.

So the solution is to remove all bad choices/functions from WYSIWYG editor itself. So clients do not see it at all and have no choice except using predefined styles.

I will walk through some of the popular settings. I will use CKEditor () as WYSIWYG editor. But those rules can be easily apply to other editors as well.

  1. Remove HTML form elements because usually clients should edit only content and not forms.
  2. Leave Paste from Word and Paste as plain text. Those features are nice to avoid unnecessary HTML tags that MS Word application create when you copy/paste content from. It looks really bad inside sources. So teach your clients how to use those features. HTML code on the site will be much cleaner.
  3. Remove smiles :) Because it usually doesn’t fit any serious design.
  4. Remove ability to create div containers. It’s not necessary for clients to have neither.
  5. Ability to insert IFRAME tags is also tricky. Your clients can just insert too much in IFRAME. And site will look awful.
  6. Remove ability to select fonts because each site should have predefined fonts for all elements like headers, paragraphs etc. So no need to allow clients to select different fonts. It will just break the design. The same about font size.
  7. Set custom styles. You can read about it here –
  8. Set custom format.
  9. Keep only predefined colors in Font and Background colour pallets and turn of more colors option:


    CKEDITOR.editorConfig = function(config)
    {
    config.colorButton_colors = '1563a1,f68121,bd2833,000000';
    config.colorButton_enableMore = false;
    }

 
Leave a Reply