Class selector in easyUpload

Following with this serie of posts about the new easyUpload plugin for CKEditor, today I'm gonna talk about the class selector for images.

What's the class selector

The selector is used due to two reasons:

1. Avoid showing the user all the options about Border, HSpace, VSpace. This avoids clutter in the dialog, avoids the use of presentational attributes (changing the underlaying code to use sytles instead of attributes is not enough, they are placed there on each image and so they can't be used in a somewhat unified way) and puts the presentation in the stylesheet instead of the html document.
2. Asking users to use a text box and learn the available class names that they can use it's not an option. They won't. It's not their job to learn the names that the designer has selected so they are gonna use any kind of cheatsheet, so it's better to offer that cheatsheet inline so they pick the one that they want and see how it does affect the image.

You can try to tell them to just upload the picture, don't change anything in the dialog about the presentation and use the Styles combo in the main menu, but this is too complex: If they shouldn't use something in the dialog, then they shouldn't see that option at all, and it seems logical to then put the options of the Styles combo related to the image in that dialog.

There's something about this option that you might argue that it shouldn't be done this way and it's the fact that only class names are used from the Styles data. It won't use the css style="", or any other attribute that you can specify in the definition of that Style, but I've already said that from my point of view this is better to avoid leaving scattered attributes and styles all around the HTML instead of putting the presentation in the stylesheet.

This is an example of a valid definition that would be shown in the class combo of the easyUpload dialog as "Nice picture" and if selected the image would end up with a class="highlighted"

    {
        name : 'Nice picture',
        element : 'img',
        attributes : { 'class' : 'highlighted'}
    },

CKEditor vs CKEditor

The UI of the dialog is quite similar to the previous one for FCKeditor (some small layout differences aside), but the underlying code for this feature is quite different.

In order to make this feature work, previously I just re-scanned the data in the FCK.Styles.GetStyles() array looking for element=img and the use of any class. But the new implementation of the styles combo makes this approach impossible. It's using private data locked inside the object so it can't be used outside of it, and thus the plugin now needs to copy the loading data code (fortunatelly the "resource manager" in CKEditor means that the file is loaded only once and then it's shared for every later request). Trivia: This investigation of the source code led to a bug found while trying to understand the behavior; The styles combo is "dead" until you first click on it, its initialization is delayed until it's shown so if you don't click on it, the data that it's shown is always the same because it has no data to match the current style of the selection.

The bad part about having to request the load of the stylescombo data is that if in the future the format of the data is augmented to allow XML files like it was possible in FCKeditor, or even if a plugin is added that does allow to parse the stylesheet and create the proper entries automatically, then that code won't work for this plugin due to the fact that it's hardcoded to load just the js definitions file, the easyUpload plugin would need to copy again the part about how to load the styles data.

The idea about creating a plugin that does scan the stylesheet and automatically populates the Styles data instead of having to define in an external file the available Styles is a clear advantage. I've been using one such plugin for several years in FCKeditor and I've never had to care about adjusting the (at that time) XML file with the definition of the style for each site. Just defining properly the css selectors in the stylesheet is enough to make the plugin parse the data and fill the combo. Unfortunately the code was developed for a company so it can't be shared, but I can assure you that it's quite simple; Due to the new structure (with private data) of CKEditor I'm not so confident about the ease of coding it to use this kind of feature in the new version. But if you look at the posts of beginners (and maybe not-so begginers) about the use of the Styles combo a question repeated over and over again is why the styles combo isn't filled with the data from their stylesheet.