Rails 3.1 Asset Pipeline with jsTree and CKEditor

I have lately encountered an issue with Ruby on Rails 3.1 whereby the cleverness of the asset pipeline actually inhibits using certain javascript-based components on my site, namely jsTree and CKEditor. Annoying, I know.

The issue encountered is that some of the features load but not all, namely the styling doesn’t load. This is noticeable in the case of CKEditor mostly because there is a gaping hole for the editor in the page, so it’s clearly generating the DOM elements, but not doing much more than that!

Researching the issue online has shown a veritable bevy (that’s right, I said that) of forum posts filled with irate developers and system admins who’ve just switched their web applications into production mode only to find half-working content management systems and other joyful surprises courtesy of Rails’ Asset Pipeline.

There’s even a ruby gem for rails 3.1 compatible CKEditor, which seems a little overkill to me but undeniably would solve the issue. I couldn’t help feeling that the issue was such a simple one that there must be a simple solution…

Understanding the problem

Rails 3.1 uses the asset pipeline to minify and concatenate javascript and CSS files so that you reduce HTTP requests for additional stylesheets and javascript files and don’t waste your user’s valuable time waiting to download un-optimised files, so it’s really quite useful in that regard.

What it isn’t though is psychic; it’s no Mystic Meg, and as such if you don’t specify all the files and images that you want in the asset pipeline, you’re going to find they don’t get loaded onto the page correctly. This creates a problem though because CKEditor and jsTree both do their CSS loads via the core javascript files you include in the document <head> section, and it won’t know the web-accessible path for the relevant files which are probably buried somewhere in your vendor directory…

A Stupidly Simple Solution

As I mentioned above, there are a number of solutions out there – from the ruby gems to the asset precompiling, but all of them require a bit of fiddling where I thought there needn’t be as much fiddling.

In the case of CKEditor it turns out there’s a rather simple way theme locations are defined, and we can see how it works by looking in the (admittedly dauntingly minified) ckeditor.js file. Load the file up into your favourite text editor and search for the line which reads:

This is telling CKEditor to assume we’re in the directory where it’s installed unless¬†CKEDITOR_BASEPATH is defined. So what we need to do is define it.

Unfortunately you can’t put any javascript before the preloading in a manifest file (i.e. nothing can go above the //= ckeditor/ckeditor line in your application.js file), but we do need to make sure we defined CKEDITOR_BASEPATH before¬†we load ckeditor.js sot hat it’s available for that file to look at.

What we’re going to therefore do is add a line just above the javascript_include_tag in our layout:

where “admin/admin” above is whatever your manifest file is called, without the .js. So now it should look like:

That’s it for CKEditor!

As for jsTree, there is actually a theme directory variable that you can override with your own if you wish, so open up one the relevant javascript file where you’re pre-loading the jsTree javascript files, and add on a line underneath the pre-load:

This will override the default themes directory and, as before with CKEditor, the assets pipeline kicks in for a request for CSS files from URLs starting with /assets.

Pretty simple really, right? Enjoy!