I am currently working on several improvements to the List Central interface, one of which includes the addition of CKEditor. CKEditor is a Javascript What You See Is What You Get (WYSIWYG) editor, which will make it easier for List Central users to include links, and text formatting in the list item descriptions.
I spent a great deal of time trying out different WYSIWYG editors for List Central. I found many neat ones, but CKEditor was the one that gave me the fewest headaches in integrating the editor into the highly dynamic interface of List Central. CKEditor is a full featured editor that offers a wealth of features that are not needed on List Central, which makes the editor a little heavier than I would like, but it’s a fair trade off for an editor that works properly.
One thing that I didn’t like about CKEditor is the hideous dialog popup for adding links. It is aesthetically ugly, and offers far too many options. While I certainly wouldn’t be taking away the ability to add links in editor, I couldn’t keep the functionality the way it is, I’m far to picky to let something that looks like this:
to get passed me. Call me shallow if you will, but I had to make my own CKEditor plugin for adding links that would use the KISS (Keep It Simple Stupid) design principle and have the List Central asthetic.
CKEditor is still a young piece of open source software, and lacks proper documentation. Be careful with this, as CKEditor is the next version of FCKEditor, which is very different. Following the FCKEditor documentation is likely to lead you astray. I used the following resources around the web to figure out how to make my plugin work:
- Tommed explains how to make a CKEditor plugin by building a better image uploader
- Ajithmanmu explains how to create a CKEditor plugin by building a simple add link plugin.
Happy plugin making!
2 Responses
Stay in touch with the conversation, subscribe to the RSS feed for comments on this post.
Hey Marilyn, it’s nice to see you’re using CKEditor there. You did a great job on customizing it to your needs.
My recommendation here is to try picking a lighter color for the editor, in this way the dialog design will play better.
You may also consider customizing the default link dialog to your needs, removing things you don’t need from it. Check out the api_dialog sample to have some ideas on how to deal with it. Otherwise, a custom dialog is also a nice solution for it.
I’m curious about the height of the URL field in your screenshot. I’ve never seen such thing, so it would be a nice thing to have ticket for it at our dev site (http://dev.fckeditor.net/) so we can investigate it.
We’ll be definitely working to make CKEditor better every day. Stay in touch!
Thanks so much for reading my post Fred. I appreciate the suggestions. A custom dialog is what I went with, so as to keep the aesthetic of other dialogs on List Central.
The height on the URL field is quite out there on my site. I have added a ticket into the CK Trac system. Hopefully it will help you track it down. Please feel free to contact me should you need more information about the issue.