如何让CKeditor从Hspace和Vspace切换到合适的CSS

Question

我正在与CKeditor合作，无论出于何种原因，他们在他们的UI中包含了Hspace和Vspace。方便的想法，允许用户像这样操纵他们的图像，但这些已被弃用。

是否有人将CKeditor的Hspace和Vspace转换为CSS，并知道如何解释其转换？

我是javascript新手..

Answer 1

hspace和vspace是以像素为单位的边距。转换应该是直接，直接和简单的。

您希望在哪里进行更正？我对CKEditor的来源一无所知，所以这引出了我提出三个选择。

选项1：在提交时使用适当的CSS 替换hspace和vspace属性。这可能会影响以后的可编辑性。

选项2：在渲染时用适当的CSS 替换hspace和vspace属性。如果你以正确的方式（HTML解析器）这样做，这可能会很慢。

选项3：在渲染时将hspace和vspace属性替换为客户端上的正确CSS 。这在jQuery，Prototype，Mootools或你正在使用的任何库中都应该是微不足道的。

---

jQuery救援！这样的事情可行。

$('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

您使用的是什么版本的CKEditor？ 加载http://ckeditor.com/demo并查看该图像的生成源：  style =“ margin-left：10px; margin-right：10px; float：left; width：120px; height：168px;”所以你不必做任何事情。