Wygwam by Pixel & Tonic is a WYSIWYG editor powered by CKEditor 3.4 and CKFinder 2.0.1 and is available as a module for Expression Engine.
It makes it very easy to set up a custom WYSIWYG editor with the just options you want to make available to the website content administrators. It’s dead simple. Until you want to change the styles available in the drop-down.
It would be great if you had an easy way of editing the available styles directly from the Module configuration, but unfortunately we can’t, so I had to hunt down the file which I eventually found here (I’m using Expression Engine 2):
/themes/third_party/wygwam/lib/ckeditor/plugins/styles/styles/default.js
This javascript file, hidden deep within the folder structure, contains the script we need to edit to get the styles we want to be easily available to the administrator whilst editing their content.
Here’s a shortened version of what you’ll find (I’ve adjusted the formatting to make it easier to read):
CKEDITOR.stylesSet.add('default',[
{name:'Purple Title',element:'h3',styles:{color:'Purple'}},
{name:'Red Title',element:'h3',styles:{color:'Red'}}
]);
As an example, I’d like to add a style that will highlight a paragraph with a a light green background colour, my javascript would now look like this:
CKEDITOR.stylesSet.add('default',[
{name:'Purple Title',element:'h3',styles:{color:'Purple'}},
{name:'Red Title',element:'h3',styles:{color:'Red'}},
{name:'Boxout Text',element:'p',styles:{'background-color':'#EAF5F4'}}}
]);
At the moment, we’re only adding a single style element to our intended target element. What is we want a whole bunch of style rules? Well, in that case we can do this (again I’ve formatted this to be easily readable, the whole script should be kept to a single line):
CKEDITOR.stylesSet.add('default',[
{name:'Purple Title',element:'h3',styles:{color:'Purple'}},
{name:'Red Title',element:'h3',styles:{color:'Red'}},
{name:'Boxout Text',element:'p',styles:{
'background-color':'#EAF5F4',
'border-left':'2px solid #08B1A2',
'color':'#08B1A2',
'font-style':'italic',
'margin':'0 auto 1em',
'padding':'1em'}}
]);
So there we go, we’ve given the website content administrator the ability to style their content, without giving them enough rope to hang themselves with (by which I mean make the site look awful with different fonts, colouring and styles).