php - 如何让 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:在渲染时在客户端用适当的 CSS 替换 hspace 和 vspace 属性。这在 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');
});