MODx & CKEditor

CKEditorAfter some communications back and forth last weekend with @swscripts and @einsteinsboi about the benefits of replacing the MODx default TinyMCE editor with CKEditor, I decided to give it a test drive.

While there is no download in the MODx extras section for an Evolution compatible version, there were some interesting posts in the forums and thanks to @einsteinsboi’s post: Setting up CKEditor on MODx Evolution, installation was a snap. You will find the latest download here: ckeditor31-test.zip.

Modifications

Once I had the plugin installed I did notice that I wanted to make a couple of small modifications. Inside of the download you will find ckeditor/custom_config.php. This file allows you to reorder the toolbar components of CKEditor. For example, there is a ‘Fonts’ dropdown in the toolbar that I like to remove. I personally look to keep my clients content in line with my CSS and allowing them access to font control is not desirable.

It is also possible to have the editor follow your own, custom CSS. You simply enter the following line in the same ckeditor/custom_config.php file:

CKEDITOR.config.contentsCss = '../../assets/css/yourcssfile.css';

Here is a complete list of the CKEditor 3 customization options.

The Review

My first install was on a college project that is currently in development. I asked @khara who is redeveloping and placing the content on this project to evaluate the editor as she placed large blocks of content throughout the site. She has related to me that CKEditor is by and large preferable to TinyMCE while producing very clean HTML. CKEditor also has the “Show Blocks” feature which provides an easy and intuitive method for updating content while visualizing code structure.

When given a quick glance, CKeditor has a slick looking layout, produces exceptional code and seems a little more intuitive for end user content placement when compared to TinyMCE. I would definitely recommend giving it a try on your MODx projects.

10 Comments. Posted by on Thursday, February 25, 2010 at 8:00 am.

Filed under CMS, Development.

  • http://twitter.com/saxjam Alistair Robinson

    Hi Greg

    I'm interested: what motivated you to look for a replacement RTE? I'd be interested in finding out more, because content formatting is one of the things I still haven't cracked in MODx. Whatever I do, editors often have trouble, and the content begins to turn ugly. I don't blame them for a second: RTE's are difficult to work with, and still retain odd quirks even when you restrict options to a minimum.

  • http://www.gregorysmart.com Gregory Smart

    Well, it kind of started with just a conversation about MODx and TinyMCE. I had pretty much related that on our side we turn off the RTE and just use the text editor. It is a necessary tool for the client, but doesn't function smoothly enough for our use (too slow, too clunky, questionable code). We have a newish employee, @khara, who prefers to use an RTE but has gotten to where she is turning it off too. I figured there has to be a happy medium out there. I'm not saying CKEditor is perfect (it has some quirks too), but after a week of using it it seems to be preferable.
    I can say that she has stopped turning it off for placing content. It will also be nice to have someone in the office who has a common experience for client support. When I have gotten the support calls for TinyMCE I can honestly say I have had some trouble because I don't use it.

  • jasonimani

    Very cool…I'm going to give it a try. Thanks for the tip!

  • carolincollins

    That link above is deprecated. New CKEditor 3.2 released on 25th Feb 2010 here http://ckeditor.com/download. Will test out now if all works fine as I am having trouble with TinyMCE on one of my MODx sites and hope this might sort it out. Thanks for all the tips and links above! Always find your articles very helpful.

  • carolincollins

    That's working now and I have incorporated my css file in the custom_config file as per your instructions. The styles are coming up fine in the editor window itself, but not in the Styles drop-down menu. What else do I need to do for that? Any help appreciated.

  • http://www.gregorysmart.com Gregory Smart

    I'm sorry, but I don't have an answer for you on that one. I initially removed the styles drop-down menu and have only been using the format drop-down menu.

  • Peter

    Thanks for the tip Gregory. I installed it earlier on this week and really like it. One thing that would be a barrier for me is the fact that you can't link to pages by id number as TinyMCE does. Maybe I'm wrong?

  • http://www.gregorysmart.com Gregory Smart

    No, I think you're right. It is a limitation.

  • http://www.cheap-nikeshox.com/nike-shox-R5-women.html shox oz men

    Well , the view of the passage is totally correct ,your details is really reasonable and spring-bags.com you guy give us valuable informative post, I totally agree the standpoint of upstairs. I often surfing on this forum when I m free and I find there are so much good information we can learn in this forum!

  • http://www.discount-louis-vuitton.com louis vuitton for sale

    Well , the view of the passage is totally correct ,your details is really reasonable and you guy give us valuable informative post, I totally agree the standpoint of upstairs. I often surfing on this forum when I ugg boots m free and I find there are so much good information we can learn in this forum!