Extending FCKeditor Radiant extension

FCKeditor is one of the most powerful rich text editors out there. However, FCKeditor extension for Radiant lacks a very important feature; that is enabling the site admin to change the editor's interface language. That feature was a requirement in a project I was working on, so I decided to dive into the extension's code to see what's going on in there, trying to figure out a way to hack that feature in.

Initially, what I had already known is that FCKeditor Radiant extension allows changing the default language, text direction, and other configuration through editing /vendor/extensions/fckeditor/app/views/fckeditor/config.js.erb. The following line was of my concern:

FCKConfig.DefaultLanguage = 'en' ;

This is fine for default configuration, but how could I change these configurations at runtime? Taking a look at the resulting html of the editor, I noticed that the editor is loaded in an iframe element with id 'part_0_content___Frame'. What jumped first to mind is that I can figure out a way to reload the iframe, passing an extra language parameter to the page it loads. Then, receiving this parameter by javascript, I could change the configuration that I want before the iframe reloads.

So, the solution was to extend the extension. I needed to add a button to the page-editing page to fire the switch-language functionality. Editing the extension file /vendor/extensions/fckeditor/fckeditor_extension.rb, I added this line to the extension's activate method:

admin.page.edit.add :part_controls, "language_btn"

This line adds the partial /vendor/extensions/fckeditor/app/views/admin/page/_language_btn.html.erb to the part-controls region og the page-editing page. Then adding that partial, adding to it a button whose onclick implementation reloads the iframe with extra parameter. It could roughly look like this:

frame = $('part_0_content___Frame');
frame.src = frame.src + "&language=ar"

The remaining job is to intercept that extra parameter; editing config.js.erb:

//getting params from the url
params = window.location.href.split('?')[1].split('&');

//checking each param
for (var i=0; i<params.length; i++){
 pair = params[i].split('=');
 name = pair[0];
 value = pair[1];
 if (name == 'language'){
  FCKConfig.DefaultLanguage = value ;
 }
}

So when the button we added gets clicked, the iframe will reload. This forces reloading of its internal script tags, among which is our code snippet added to config.js.erb. This snippet checks for the language parameter and acts accordingly. When the editor is reloaded, it reloads with the new default language.