Give your clients style-ability with FCK Editor
Written May 24, 2009. 7 comments.
Something that used to annoy me immensely was deploying a beautiful web standards compliant harmony of XHTML and CSS, only to have a client deface it by adding all sorts of nastiness to the content in the CMS. Pink fonts with yellow backgrounds? Seriously, what are they thinking?
It’s not the clients fault though. They don’t have a clue about design and will idly edit the content of a web page the same as they would a Word document. That is of course only if you allow it to happen.
How much nastiness they introduce depends on what editor you make available to them in the CMS and how much functionality you allow on it. I’ve seen a increase in the number of CMS’s that use TinyMCE in it’s default states. While I can’t speak for TinyMCE’s flexibility, I can vouch for an alternative I’ve been using for years which does something I’ve never seen TinyMCE do – FCK Editor. I have a term of endearment for FCK Editor but I’ll let you guess what that might be.
FCK can be easily modified to remove all the nasty functions that you don’t want the client to have, like font colours, background colours, alignment tools etc. while at the same time giving them the ability to apply some pre-set styles that you’ve already established. In this tutorial I will show you how to cut down FCK to what I consider to be the most suitable deployment for it, so it’s in such a state that no matter what the client does they won’t invalidate the pages or uglify them.
At the time of this post FCK is at version 2.6.4. so if you’re reading this in the future the following instructions might be out dated. I won’t explain how to install FCK as the documentation they provide is more than ample.
Removing the unwanted tools
You can kill off unwanted tools from the FCK toolbar by simply editing fckconfig.js in the root of the fckeditor directory. When we are done we will be left with this set of tools:
Preview, Cut, Copy, Paste as plain text, Undo, Redo, Find, Replace, Select all, Remove formatting, Bold, Italic, Strike through, Subscript, Superscript, Bullet list, Horizontal rule, Insert link, Remove link, Insert image (Image manager), Insert special character, Style selector, Maximise the editor window, Show blocks.
I’ve deliberately left out the ability to change fonts, font colours, font background colors, tables, justify left right etc, underline (see this article for why I leave out the underline tool) and more. Tables are fine for tabular data but in my experience clients tend to use them for layout, and they have all these blocks of content in 2 column tables just so they can align some images. I’ll leave that one up to your own judgement.
Getting started
Open fckconfig.js and go down to the line with FCKConfig.ToolbarSets["Default"] as this is the particular editor state we will be changing. Looking at the code you can see it’s fairly easy. Tools are surrounded in single quotes, separated by ‘-’ and separating them into their own lines is done with ‘/’.
To use the same set of tools I’ve described above, your default config should look like this:
FCKConfig.ToolbarSets["Default"] = [
['Preview','-'],
['Cut','Copy','PasteText','-'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
['Bold','Italic','StrikeThrough','Subscript','Superscript','UnorderedList','Rule'],
['Link','Unlink'],
['Image','SpecialChar'],
['Style'],
['FitWindow','ShowBlocks'] // No comma for the last row. ] ;Save the file and test to make sure your new toolbar works (clear your cache and reload if you don’t seen any changes). If it’s all good, move into the next stage.
Giving the client some style-ability
The most common complaint you will hear from a client with a stripped down editor is “how can I change the font colours!?” or “how can I align the image now!”. This is where FCK shines. You can setup some styles for the client to use and they won’t have to touch the source (which we’ve removed from fckconfig.js anyway).
This is a 2 step process. First, open fckstyles.xml from the root of the fckeditor directory. You can safely delete everything between <Styles> </Styles> to add your own, as the default ones aren’t any good and certainty won’t match your web design anyway. Here’s a sample one I prepared earlier:
<Styles>
<Style name="Emphasis" element="p">
<Attribute name="class" value="emphasis" />
</Style>
<Style name="Float image right" element="img">
<Attribute name="class" value="float_image_right" />
</Style>
<Style name="Heading 2" element="h2" />
</Styles>You can see the XML is easily formatted. Not that the name is the actual name of the style that the client will see when interacting with the editor.
But these styles are useless without some CSS for FCK to pick up from. Go to fckeditor/editor/css/ and open fck_editorarea.css. Everything you see in here will be used to display the content in FCK’s editor.
Now create the classes to match the styles you setup in the fckstyles.xml file:
.emphasis {
padding:10px;
margin: 10px 30px 10px 30px;
background:#f1f1f1;
color:#ff9900;
border:solid 1px #ccc;
}
.float_image_right {
float:right;
margin:0 0 10px 10px;
}
h2 {
font-size:2em;
color:#0099CC;
}Tip: The idea with fck_editorarea.css is to make sure the styles that display the main content on your web site are mirrored here, so that way what the client sees in the editor is exactly what they will see on the site. There are a couple of ways to do this. You can just use fck_editorarea.css as already mentioned, or the better way would be to avoid duplication by having these particular styles in a separate single CSS file and having your main web site and FCK both grab it. You can easily change the path of FCK’s editor area style sheet by editing line 29 of fckconfig.js.
When you’re done you should see your new styles available in the selection box when you load up FCK. The styles you created in the fckstyles.xml file will only work on the correct element. As an example, I will only be able to use the Float image right style if I’ve selected an image in the editor first first.
The video below shows my FCK setup and probably demonstrates it much better than I’ve explained here.
As you can see the coolest part is that the selection box inherits the actual styles so you see a preview before deciding which one to apply.
You can immediately see how handy this is going to be for you and your clients. By setting up a bunch of pre-set styles that match the design your client will have the control they want without ruining the look and feel of the site, and without breaking web standards.
And speaking as someone who blogs a lot, having the custom styles makes it so much easier because I don’t have to manually add classes to the source of every article.
FCK editor (external link)
Start of pageWho is That Web Guy?
Michael is a veteran web designer / developer / usability evangelist, practitioner of W3C guidelines, and currently head of the web dev unit at Stormbox, a branding and creative communications agency located in Perth, Western Australia.
Maybe I’ll try your solution!
Will give it a shot tonight.
just completed an entire Newsletter application with FCKeditor.
Works well but need to finish the styling – will use API for automatic styling based on user choice of template and so on…
Really its so inspiring…
http://www.googleseoservices.com.au/webdesign.html