Upgrading FCKeditor 2.x to CKEditor 3.x including plugins

Upgrading FCKEditor 2.x with custom plugins to CKEditor 3.x is a challenging task because so much has changed but it is possible. I’d like to share here few experiences from the upgrade and show how to map the most important API use cases from the old to the new version and ease the migration by first introducing a facade for (F)CKEditor APIs.

How to customize CKEditor with your own plugins, skins, configurations

This post summarizes what I’ve learned about customizing the open-source WYSIWYG rich-text editor CKEditor 3.5.2 with one’s own plugins, skins, and configurations. There is already a lot of good resources so wherever possible I will link to them and just summarize and/or supplement them. However I’ve found no overall guide for customizing CKEditor and thus intend to fill this vacancy.

CKEditor: Hide some toolbar buttons on a per page basis

In my project we had CKEditor with a common toolbar used on many pages and we needed to be able to hide some of the buttons on some pages (e.g. email editor didn’t support some functionality/content). It took me a long time to figure a way to do it for CKEditor has no methods for simply removing/hiding buttons from a toolbar. My solution uses the fact that the configuration file can see variables defined in the including page and that it can contain functions – namely there is a function which takes the default toolbar definition and removes from it all the buttons mentioned in a variable, which is expected to be defined in the page.

CKEditor: Collapsing only 2nd+ toolbar rows – howto

Normally CKEditor (v3.5.2) hides/shows all the toolbar buttons when you press the collapse/expand button but I needed to always show the first row with “basic tools” and only collapse the second and following rows with advanced functionality tool buttons. CKEditor doesn’t have proper support for that but there is a simple workaround.

Update: Example solution (CKEditor 3.6.1) published, see the changes done or download the full source and open _samples/replacebyclass.html.

CKEditor: Scroll dialogs with the page, i.e. not fixed to the middle

Dialogs in the popular rich-text wysiwyg JavaScript editor CKEditor 3.5.2 are fixed-positioned and thus when you scroll the editor’s page they always stay in the middle as you can see in its demo. That is a problem if the dialog is longer then the height of the page because you will be never able to scroll to its end (where the Ok/Cancle buttons are located).

It could be perhaps solved by adding a scrollbar to the dialog but I solved it by overriding the dialog’s position: fixed with position: absolute. Here is how to do it.