I’ve been working a lot with CKEditor the last couple of days, trying to upgrade our website from an old and probably fairly outdated FCKEditor. The funny part about FCKEditor is that at first everything feels like a breeze. I think the time it took me to replace the old FCKEditor with something that looked like it was working was about 2-5 minutes, and to get it actually working was only a couple of minutes more. However, the joyride down to wonderland (while wearing a grin saying “OMG; this is so easy, and the result looks so nice!”) kinda ends there. If any of you have worked (extensively) with CKEditor you will probably know that it’s made to be highly customizable, with lots of settings and stuff for you to play with. However, the problem arises once you try to do something you weren’t supposed to. For instance; on one of the things we didn’t want on our page was to set the default cellspacing and padding on tables to "" (empty string; ie. remove the attributes). This sounds like something that should be fairly easy to do (and probably would be too if I didn’t use the minified code). At first I looked for settings that would enable me to set this, however I was unable to find any, so what I ended up doing was to change '1' in plugins/table/dialog/table.js associated with the cellspacing and the cellpadding fields to ''. That however, was the easy part. The next thing that was requested was to by default mark tables with table-layout: fixed. Now to do so turned out to be harder than I thought it would be. And just to make sure I’ve said it, this doesn’t necessarily mean it’s the only way to achieve this result in CKEditor, nor is it necessarily the right way to do it, but it was the first and quickest way that I managed to find (without having to write my own table-plugin for CKEditor). What, however, worked for me was locating if(!this._.selectedElement){var p=l.append(h('tbody')) in the existing table.js plugin, and then adding l.setStyle('table-layout','fixed');. Also, if you would (by default) like to have a custom class on all tables created with the table-plugin, here is the place to add it. Simpy do l.addClass('class-name-here'); in the same if-statement.
Filemanager
One of the not so fun things about the “new” CKEditor (with regards to the “old” FCKEditor) is that it was split in two. Now you have CKEditor and CKFinder. However, the story doesn’t quite end there, cause CKFinder is a commersial tool that costs money, and if you’re just working on some pet project you don’t want to kough up a couple of hundreds of dollars just to be able to add files to your user-content. While, however, this is one of the things I consider bad about the new CKEditor, it must be said that the opening of the CKFinder is an extension-point in CKEditor, meaning that you just give it an URL of something that works like CKFinder, and CKEditor will be happy as a newborn child. The answer, ofcause (like all other things in life) is to make it yourself. Or rather, get someone else to make it for you, that doesn’t want to (or at least doesn’t require) to get paid, but that’s the beauty of open-source, right? Everybody contributes their part, and in the end there is awesomeness. However, getting back from my quick digression, I found something called simply “filemanager” (meaning it’s impossible to google for). It’s apparently made by a company named c5 (and pull-requests from whoever wanted), and it can be found somewhere around here, it’s github-repository is found here.
The original filemanager looks like this:
If you ask me, I think it’s rather pretty made, and like the design, but I was asked to simplify it a bit (remove “unneeded” elements). A couple of the things that wasn’t wanted was the “Current folder” up in the left corner, the home button, the new folder button, and also, the upload button. This is not to say that I should disable file-upload. I should simply make it so that whenever a file is selected by clicking the “browse”-button, instead of having to click upload afterwords, the form should automatically be submitted. In jQuery (which the plugin uses) this is as simple as $('#newfile').change(function() { $('#upload').click(); }). Also, I had to provide my own translation, cause a norwegian translation was not present, but as I only needed some of the features, only some of the features was translated. At last, the “dimensions”-column should be removed.
The resulting filemanager looks like this:
One of the things to notice is that the browse-button is moved to the upper left corner and is localized. This localization is not the browser that renames the browse-button, it’s a customarily made button (that doesn’t require any flash-upload or the likes, however that’s a feature I would like to implement at a later point given the chance). The html to achieve this looks like this:
Once again, I’ve uglified the file a bit, however it was simply the fastest way of achieving the desired result. The file-upload “hack” I’ve provided should work in all modern browsers (safe for Opera which I have never bothered tested with as our whole site generally don’t work in Opera at all it’s not a requirement). A general improvement over the initial version I started with (if you ask me) is the fact that once I upload a file (click the browse-button and select a file), the file is also automatically selected and thrown back into CKEditor. Some users might not want this, however, for our usage we concluded that whenever a user clicks the browse-button, they’ve been sent here from CKEditor to select a file, and they’ve concluded that the file needs to be uploaded first. There should be no point in uploading a file simply to upload it.
One of the other things I fixed was the date-column (shown as “Endret” in norwegian). With the original code it would show dates sent from the server as text (I would get the string “25.06.20012″ from the server). Now this doesn’t seem to bad until you start sorting by date. Just think about it for a second; since year isn’t first (like in YYYY-MM-DD) the sorting will fail. This might not be the case for american dates, cause I have a suspicion that the fancy table-sorter included in Filemanager could handle those, however, for anything else it would fail horribly. Also, Filemanager contained no way of changing how the dates are shown (cause they were just strings sent from the server).
What I did was simply to send the dates as UNIX timestamps from the server, than read those in as date-objects in javascript. And since it’s just numbers the sorting works magnificently too. The code for handling timestamps sent from the server looks like this:
This of cause outputs the date in Norwegian format, however, adding formatting that could be modified in config was not something that I had to do, as our instance of Filemanager will simply be used in Norwegian. If one wanted to globalize, the simplest thing would probably be to include something like datejs and setting the format in lang-files.
There were a few other minor modifications I did (like remove a column, make clicks on files automatically select the file instead of go to an info-screen etc.), and all of them can be found in my filemanager.js-file. Also, most of the changes I did can be toggled on and of in the settings-file by setting new settings I made. I’m not posting my entire config-file (cause it had to be heavily modified to enable our scenario with regards to what folders should be treated at root depending on a lot of things), but most of my changes should be found here. Feel free to use it however you like.
