IE's 31 stylesheets bug vs. CKEditor custom skin

CKPackager: Not the right tool

When researching the issue, CKPackager can look like a promising tool. It's available from the CKEditor SVN tree in both .exe and .jar formats. While it does take care of minifying the core code of CKEditor, this only does the core and will not minify skins, dialogs, themes, and so on, and so won't help us.

For more information on this tool (which we will not use here) visit http://alfonsoml.blogspot.com/2009/12/recompressing-ckeditorjs-to-fit-your.html

CKReleaser: The tool we need

CKEditor also provides CKReleaser, which does do what we need. However, it is intended for use with the SVN version of CKEditor, so a few more steps to custom skin minification in CKEditor are required.

CKReleaser is included within the CKEditor SVN tree, so you don't have to install anything beyond what is detailed below.

Note: in the example below, I'm using a working directory named _ckeditor/, which I have created next to the existing ckeditor/ directory which contains our custom, unminified Smallbox skin. I'm assuming that the current working directory is the directory which contains the existing ckeditor/ directory unless otherwise stated.

1. Check out the CKEditor SVN trunk:

   % svn checkout \
    http://svn.fckeditor.net/CKEditor/trunk/ _ckeditor

   This will fetch the CKEditor SVN trunk and place it into the _ckeditor directory.

2. Copy the needed custom skin files into the source tree:

   % cp -a ckeditor/_source/skins/smallbox/ \
    _ckeditor/_source/skins/
% cp -a ckeditor/smallbox.js _ckeditor/


3. Edit _ckeditor/ckeditor.pack to tell the releaser to include the custom 'smallbox' skin when building a release package. In our case, I found the line which bundles the included 'kama' skin:

                       '_source/skins/kama/skin.js',

   . . .and inserted the following line after it:

                       '_source/skins/smallbox/skin.js',

4. For cleanliness, I also modified the _ckeditor/_dev/releaser/release.sh script slightly to mark the generated release as containing Smallbox-specific changes or code. I changed the following line:

   java -jar ckreleaser/ckreleaser.jar \
    ckreleaser.release \
    ../.. release "3.4.1 (SVN)" \
    ckeditor_3.4.1_svn --run-before-release=$LANGTOOL

   . . .to:

   java -jar ckreleaser/ckreleaser.jar \
    ckreleaser.release \
    ../.. release "3.4.1 (SVN/Smallbox)" \
    ckeditor_3.4.1_svn_smallbox \
    --run-before-release=$LANGTOOL

5. It's time to run the releaser:

   % ./_dev/releaser/release.sh


   If all goes well, the thing will churn for a while and spit out a bunch of information on what it's up to. Once it's finished, there will be a new directory named _ckeditor/_dev/releaser/release, which will contain archives containing your new custom CKEditor release, along with an uncompressed directory tree containing the minified release tree:

   % ls -l ./_dev/releaser/release/
total 3580
-rw-r--r--  1 torben torben 1541785 2010-08-11 10:53 ckeditor_3.4.1_svn_smallbox.tar.gz
-rw-r--r--  1 torben torben 2116152 2010-08-11 10:53 ckeditor_3.4.1_svn_smallbox.zip
drwxr-xr-x 10 torben torben    4096 2010-08-11 10:53 release

6. Move the original ckeditor/ directory away for safekeeping and unpack the new release tarball in its place. Make sure the directory name and permissions are OK, and load up a CKEditor instance. You should now have a properly minified custom skin, complete with reduced load times and reduced number of stylesheet loads.

Conclusion

While this does help in the endless battle of IE vs. everything else, there is still work to be done. Work is planned to introduce stylesheet optimization to a future version of the core of Smallbox to further help avoid this problem, and it's hoped that IE 9 will finally do away with the ridiculous 31-stylesheet limitation which has plagued IE for its entire life. Meanwhile, this is just another tool in the workshops of those of us tasked with trying to make IE play nicely with the rest of the world. And as I mentioned earlier, there are other reasons to want to do this anyway: smaller client download sizes, reduced number of HTTP requests required for complex page, and so on.

Hopefully this howto can help someone else looking to minify or publish custom CKEditor skins or plugins, for whatever reason.