How to get CKeditor to switch from Hspace and Vspace to proper CSS

Question

I'm working with CKeditor, and for whatever reason, they included Hspace and Vspace in their UI. Convenient idea to allow users to manipulate their images like so, but those are way deprecated.

Has anyone converted CKeditor's Hspace and Vspace to CSS, and know how to explain its conversion?

I am a javascript novice..

Answer 1

hspace and vspace are margins in pixels. The conversion should be direct, immediate and simple.

Where do you want the correction to take place? I don't know anything about CKEditor's source, so that leads me to propose three options.

Option 1: Replace the hspace and vspace attributes with proper CSS at submit time. This might impact editability later.

Option 2: Replace the hspace and vspace attributes with proper CSS at render time. This might be slow if you do it the right way (HTML parser).

Option 3: Replace the hspace and vspace attributes with proper CSS on the client side at render time. This should be trivial in jQuery, Prototype, Mootools, or whatever library you're using.

---

jQuery to the rescue! Something like this could work.

$('img[hspace]').each(function(el){
    var pixels = parseInt($(el).attr('hspace'));
    if(isNaN(pixels) || pixels < 1)
        pixels = 0;
    else
        pixels = pixels / 2
    $(el).css('marginLeft', pixels + 'px')
         .css('marginRight', pixels + 'px')
         .removeAttr('hspace');
});

$('img[vspace]').each(function(el){
    var pixels = parseInt($(el).attr('vspace'));
    if(isNaN(pixels) || pixels < 1)
        pixels = 0;
    else
        pixels = pixels / 2
    $(el).css('marginTop', pixels + 'px')
         .css('marginBottom', pixels + 'px')
         .removeAttr('vspace');
});

Answer 2

What version of CKEditor are you using? Load http://ckeditor.com/demo and look at the generated source for that image: style="margin-left: 10px; margin-right: 10px; float: left; width: 120px; height: 168px;" so you don't have to do anything.