Make HTMLEditor (CKeditor) CSS match your website.

This article is writen for users of WebAssist HTML Editor, but it can be applied to any ckeditor application.

When I wrote this, I was still using what I believed was the latest version of CKEditor in DataBridge (3.6.4). I since learned that that last update included version 4.0. I have confirmed that this works with CKEditor 3.6.6.1 which was actually released after 4.0. CKEditor is on version 4.02, and will be pushing out version 4.1 soon. I have looked at the source files and I believe this patch will work with CKEditor version4, at least as of the last build I looked at. The line numbers have changed, but this part of the code looks to be the same. However, I have not figured out how to get the source files and correct ckeditor.pack file together to incorporate this patch into CKEditor4 and test it.

The CSS matching is far more important to me. I am going to stay with CKEditor 3.6.6.1 until I can sort out version 4. I am attaching a zip file of the CKEditor file that I use for anyone who is interested. The patch has already been compiled into it. I make no promises. Backup what you have, but it works for me. This zip file also contains KCFinder as a file manager. The lines to implement it are commented out in the CKEditor config.js file. If you want to get away from KFM, just uncomment the lines. Implementing Security Assist to work with KCFinder is easy, but that would have to be another post...

 ckeditor_ver3.6.6.1_patchedBodyPreappend-BodyAppend.zip

(Note, I have made some modifications to this for issues I found with this patch. See my comments HERE and HERE for more details. The download file has NOT been updated at this time.

I don't know how many of you struggle with this, but I have always struggled to get the css in the editor to match the website. Recently, I found this post.

The plugin proposal by ElMoonLite, allows you to wrap the editor contents inside other HTML elements which will not be saved but will impact the css of the editor contents.

In other words, instead of having a body class and trying to make everything match the site contents, you simply wrap the editor area with the same HTML elements that would wrap it on the actual output page. Then just attach the same css file that the site uses, and you're home free (except for any css specified on the output page itself).

WARNING: THIS INVOLVES CHANGING CKEDITOR CORE FILES. DON'T FOLLOW ALONG UNLESS YOU HAVE THE STOMACH FOR IT.

WARNING 2: You MUST have "Encode HTML Entities" unchecked in the Editor Settings under the Formatting tab or the editor messes up the second comment tag used to remove the prepended and appended information before saving.

WARNING 3: I've only tried this in a couple of configurations and only using XHTML 1.1 and HTML 4.1 Transitional. Test before deploying.

To do this, you have to go into the .../ckeditor/_source/plugins/wysiwygarea directory and edit plugin.js according to the instructions located HERE.

You can test it by editing ckeditor_php5.php (or ckeditor_php4.php if you are using 4) and changing:

$out .= "<script type=\"text/javascript\" src=\"" . $ckeditorPath . 'ckeditor.js' . $args . "\"></script>\n";

to this:

$out .= "<script type=\"text/javascript\" src=\"" . $ckeditorPath . 'ckeditor_source.js' . $args . "\"></script>\n";

If you are not using HTMLEditor, just change your reference from  ckeditor.js to ckeditor_source.js. If you make the change above, this is just for testing, so you will want to change it back once you see that it works.

Be sure to change your css references so that you are only referencing the css of the web site and that the body class is N/A.

Now, edit the config.js file in the ckeditor root directory by adding these lines:

config.bodyPrepend = '<div id="pageWrapper"><div id="contentWrapper"><div id="content">';
config.bodyAppend = '</div></div></div>';

Change the HTML elements to match your site. Be SURE to only include the elements that are parents of the location the editor's contents will be placed. In other words, don't include the header/banner, horizontal menu, or column elements. The best way to think about it is if you wrote a CSS rule that specifically addressed your content area, what would the rule look like. Those are the elements you need to include.

Once you see that it is working (or if you skipped testing), you need to compile the _source directory into a new ckeditor.js and a new ckeditor_basic.js.

To do that, get the files from HERE (You need both the jar and exe file for widows, and you must be running Java on the computer). Windows users may also find this TIP helpful.

To make this change permanent to HTMLEditor, copy the config.js and config_basic.js files from your site to the configuration folder. Remember you'll have to redo this if you update HTMLEditor unless you protect your source files.

On windows, that would be something like:

C:\Users\[User Name]\AppData\Roaming\Adobe\Dreamweaver CS6\en_US\Configuration\Shared\WebAssist\RichTextEditor\Source\ckeditor

Hopefully the next update for CKEditor will contain this feature.

That's it. Thanks to all the people who posted the content I referenced here.

If you find any other issues that break this like I found the use of HTML Entity Encoding breaks this, please let me know. My tests say it works. It should be fairly bullet proof in terms of what an end user can do to break it, but there may yet be issues with how it works with different editor configurations.