Adjusting the preview text in easyUpload

Over the years people have reported that sometimes the users don't understand what's the Lorem Ipsum text that appears in the preview of the image and flash dialogs, claiming that it's not English and it's not what they have written.

The solution is to point them to the source of those dialogs and then remove the offending text (of course they will lose then the ability to understand how the various align values will affect their layout, but it's their choice).

With the improved capabilities of CKEditor this can be done much easier. For example I've added just an id to the uiElement that it's used to create the preview:

        {
            type : 'html',
            id : 'htmlPreview',
            html : '<div>' + CKEDITOR.tools.htmlEncode( editor.lang.image.preview ) +'<br>'+
...

The first motivation to add this id was to provide a way to remove the preview for those that didn't want that in a dialog with simple options. But with just that addition it's possible to write a little code using the 'dialogDefinition' event. First we check that it's loading our dialog and then we can change both the label over the preview as well as the context of the preview:

    var preview = infoTab.get('htmlPreview');
    preview.html = '<div>My image preview<br>' +
        '<div id="ImagePreviewLoader" style="display:none"><div class="loading">&nbsp;</div></div>'+
        '<div id="ImagePreviewBox">'+
        '<a href="javascript:void(0)" target="_blank" onclick="return false;" id="previewLink">'+
        '<img id="previewImage" alt="" /></a>This is some example text around the image' +
        '</div>'+'</div>';

We could change the html to whatever we would like, but in order to mantain compability and keep the preview working we should preserve the "placeholder" elements (div, a, img) and change only the texts (in this case "My image preview" and "This is some example text around the image")

This is the complete function:

// When opening a dialog, its "definition" is created for it, for
// each editor instance. The "dialogDefinition" event is then
// fired. We should use this event to make customizations to the
// definition of existing dialogs.
CKEDITOR.on( 'dialogDefinition', function( ev )
    {
        // Take the dialog name and its definition from the event
        // data.
        var dialogName = ev.data.name;
        var dialogDefinition = ev.data.definition;

        // Check if the definition is from the dialog we're
        // interested on (the "easyImage" dialog).
        if ( dialogName == 'easyImage' )
        {
            // Get a reference to the "Info" tab.
            var infoTab = dialogDefinition.getContents( 'info' );

            var preview = infoTab.get('htmlPreview');
            preview.html = '<div>Image preview<br>' +
                '<div id="ImagePreviewLoader" style="display:none"><div class="loading">&nbsp;</div></div>'+
                                    '<div id="ImagePreviewBox">'+
                                    '<a href="javascript:void(0)" target="_blank" onclick="return false;" id="previewLink">'+
                                    '<img id="previewImage" alt="" /></a>This is some example text around the image' +
                                    '</div>'+'</div>';
        }
    });

Another option to customize the lorem ipsum text would be to mark is as a configuration option or language item (like the title above it: editor.lang.image.preview), but this is a worse move in my point of view. I haven't studied if I'm wrong and it can't be done other ways, but it seems that then it will specify the whole "Lorem ipsum... " text at the plugin.js level or in each language file. Either of those options means that all that text will be loaded whenever the editor is loaded even if you are not going to use the image dialog, and the reality is that very few people don't understand that this is just some placeholder and the important thing is only the image, not the text.

Going even further with the customization, the first option (despite its simplicity) is more powerful because it could be used to inject other elements in the html so you could turn it into a real preview by changing the contents of the box with parts of the current content of the editor each time the dialog is loaded. I won't recomend that as it might mean some extra work to make it work as desired, but it's certainly doable.

So I would say that just adding the id is enough and it can allow the developer to chose betweeen removing the preview (this requires some other fixes in that dialog) or change its contents.