如何让 CKeditor 从 Hspace 和 Vspace 切换到正确的 CSS

发布于 2024-09-12 04:30:19 字数 176 浏览 2 评论 0原文

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

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

我是一个 JavaScript 新手..

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

↙厌世 2024-09-19 04:30:19

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');
});

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');
});

回复收藏 0 原文