This is a quick guide to setting up FCKEditor so that CMS users can work with your site styles. It came about from some recent work where I had to plug a CMS into an existing site. The site had a fairly simple but strict set of CSS allowed rules to keep branding consistent. I knocked up a quick and dirty CMS using PHP to read and write XML data for the page content. All that was needed was the the user to be able to edit the page title, meta data and main body content. For this, last one, I needed a suitable editor.
I chose FCKEditor as it is my current web-based WYSIWYG editor of choice. I have used TinyMCE in the past, because it is simple and previous versions of FCKEditor seemed a little cumbersome and difficult to work with, and often seemed to need browser restarts for every configuration change - not ideal when you are building a site. However, the recent version of FCKEditor seemed a lot better in that respect, and, more importantly, it has server-side integration 'out of the box', which is only available as a paid-for addition to TinyMCE. I've written server-side file browsers before (in ASP.NET) for TinyMCE, but I didn't really want to write a PHP one as well. FCKEditor supports browsing for file and images on the server so you can add links to downloadable files and insert images onto the page, both of which were requirements for the minimal CMS I was creating.
So, onto the guide. The objectives are:
- an in-page WYSIWYG editor
- that allows the editor to pick from the styles available on the site
- whose appearance is as close as possible to the final product
1. Install FCKEditor
I tend to put a site's supporting assets in a directory called resources, so let's unpack it into
/resources/fckeditor/
2. Create your editing page
In a real CMS, this would be password protected, and part of a larger system allowing page selection, creating and editing etc. Here, we're just interested in the editing, so let's make a simple editor page, /edit.php:
1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2: <html xmlns="http://www.w3.org/1999/xhtml">
3: <head>
4: <title>Simple FCKEditor CSS Integration</title>
5: <script type="text/javascript" src="/resources/fckeditor/fckeditor.js"></script>
6: <script type="text/javascript">
7: function startEditor() {
8: var oFCKeditor = new FCKeditor('content') ;
9: oFCKeditor.BasePath = '/resources/fckeditor/';
10: oFCKeditor.Config["CustomConfigurationsPath"] = "/resources/config/fck-config-page.js?"+(new Date()*1);
11: oFCKeditor.Height = 500;
12: oFCKeditor.ReplaceTextarea();
13: }
14: </script>
15: </head>
16: <body onload="startEditor()">
17: <div>
18: <label for="content">Content</label>
19: <textarea name="content" id="content"></textarea>
20: </div>
21: </body>
22: </html>
23: </head>
24: <body onload="startEditor()">
25: <div>
26: <label for="content">Content</label>
27: <textarea name="content" id="content"></textarea>
28: </div>
29: </body>
30: </html>
This is pretty straightforward - it creates an instance of the editor and applies it to the #content textarea when the page loads. The line of interest here is line 10, where I set a custom configuration path. Rather than edit the FCK files directly, I'm going to copy out the relevant ones and change just those...
3. Create your config files
Copy the following files to your own location (/resources/config/ here), and rename them if you like.
/resources/fckeditor/fckconfig.js /resources/fckeditor/fckstyles.xml
I rename them to indicate that they are configs appropriate to page content. This is not necessary, but I am anticipating using different configurations, and certainly different styles, for different types of content.
So I now have:
/resources/config/fck-config-page.js /resources/config/fck-styles-page.xml
4. Custom configuration
fck-config-page.js will contain a lot of configuration information that you can edit as required. I typically change the toolbar to suit my requirements, and enable the appropriate server-side link and image browsers. However, the relevant config change I want to make is to set an editor css and a custom styles path:
FCKConfig.EditorAreaCSS = '/css/style.css'; FCKConfig.StylesXmlPath = '/resources/config/fck-styles-page.xml?'+(new Date()*1);
The EditorAreaCSS config tells the editor to use my stylesheet in the editing area, which is the first part of making the editor truly WYSIWYG. The StylesXmlPath allows me to define styles that will appear in the styles dropdown, allowing the editor to select styles that were available to me when first building the HTML for the site.
5. Editor CSS
Let's assume I have a site stylesheet like this:
body {background: #efefef;font-family:arial,helvetica,sans-serif;font-size:13px;}
h1 {font-family:tahoma;font-size:18px;border-bottom:solid 1px #ccc}
.warning {color:#900}
I'm going to use these rules for my editor, so it replicates the way the text will look when rendered on the site. In practice your main site stylesheet will be much larger, and you would have a separate editor stylesheet which is a subset of it. Or, depending on how you organise your styles, you could have a specific stylesheet for each editable region and have both the main site and the editor use those.
At this point, my editor area should now have a light grey background, and the correct fonts - arial for the body text and tahoma for the heading, which I can select from the block format dropdown. Now I just need to integrate the .warning style rule.
6. Custom styles
The fck-styles-page.xml will initially contain the default styles (red text, some highlighting etc). I can replace or add to these with my own styles as follows:
<Style name="Warning" element="span"> <Attribute name="class" value="warning" /> </Style>
This simply tells the editor to wrap a span.warning round selected text. It is important to note that I am not using the inline styles that the default settings work with - I want to use my site stylesheet, so it is updated later, the edited site content will not have outdated inline styles.
At this point, we now have a WYSIWYG editor that is close to the site in appearance, and uses the site stylesheet rules properly.
In an real-world project, you would have more rules to work with, and would obviously need some way of saving the edited content and displaying it on page to get anywhere near a CMS, but hopefully this will help you get the editor part of it done.