Print page
Blazing Images Web Site Design, Inc.
Main Menu
  • Home
  • About Us
  • Our Services
    • Web Design
    • Dynamic Development
    • Hosting
    • Promotion
  • Contact Us
Search

Our Blogs
  • WebAssist
  • Joomla!
  • Technical Support
  • jQuery & jQuery UI

Make HTMLEditor (CKeditor) CSS match your website.

PDF Print Email
© 2013-03-19 by Steven

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.

 


Comments
Web Design Comp
-
2013-09-25 at 02:32
Thank you very much for you can share your post,the article content written very well,extremely is worth my study.
Steven
-
2013-09-25 at 10:44
I'm glad it was helpful. I have used this successfully for certain circumstances, but I have found it can be a problem with some CKEditor templates and some page templates where the insert point can get out of the prefix and suffix code and thus not get saved.

If you can use an editor css file to get what you want, that is safer, but this is helpful for certain circumstances.

It would really be nice if a feature like this were built into CKEditor, so feel free to suggest it on their site.
web site design
-
2013-10-04 at 00:45
Thanks a lot for this beauty Enjoying article with me. I am appreciating it very much! Looking Forward to Another Great article. Good luck to the Author! All the best.
IT Services Mel
-
2013-10-18 at 14:37
You're so gifted in writing. God is truly using you in tremendous methods. You're doing a excellent job! This was an awesome blog!

proweb
-
2014-01-01 at 08:08
Where to check the CSS and make HTML validation for website?
Steven
-
2014-01-01 at 13:43
I do not understand what you are asking. It may be outside the scope of the article.
voyage vietnam
-
2014-01-09 at 01:55
Thanks a lot for sharing with all of us.
Leave a Comment
Captcha
Enter text shown in left:
Copyright © 1996-2023 Blazing Images Web Site Design, Inc. All rights reserved.