Question

我有一个使用ckeditor的CMS。我刚刚将ckeditor的版本升级到最新版本，现在当你在编辑器中左右对齐图像时，它会放入内联样式而不是'align'属性。

虽然内联样式不是问题，但我需要保留'align'属性，这样我就可以通过编程方式通过CSS对图像应用填充，而无需在编辑器中为每个图像添加样式（因为CMS的用户会在技术上没有能力做到这一点）。

我成功地创建了一个函数来查找具有style属性的图像并指定了一个align属性。然后使用'setData'更新编辑器，当我'getData'时，更新似乎仍然存在。但是，在保存过程中的某个时刻，它似乎将其删除。关于这是什么的任何想法，或者如何同时添加对齐和样式对齐。

Answer 1

经过讽刺之后，我发现了答案：

CKEditor align images instead of float

为什么它没有出现在我不知道的搜索中。虽然我删除了与宽度和高度相关的线条，但删除了'float'css属性的替换，因为这导致WYSIWYG无法拾取样式。除此之外一切都很好！

更新：我发现有些情况下这与CKeditor 4不太一致，并发现这个小版本的代码修复了它。

element.forEach             = function(){};
element.writeChildrenHtml   = function(){};

请参阅：http://vibhajadwani.wordpress.com/2011/07/18/how-to-remove-image-style-property-from-ckeditor/

所以完整的代码块如下：

CKEDITOR.on('instanceReady', function( ev )
{        
    // Ends self closing tags the HTML4 way, like <br>.
    // See: https://stackoverflow.com/questions/4466185/ckeditor-align-images-instead-of-float
    // Mod added for CKE 4
    // See: http://vibhajadwani.wordpress.com/2011/07/18/how-to-remove-image-style-property-from-ckeditor/
    ev.editor.dataProcessor.htmlFilter.addRules(
    {
        elements:
        {
            $: function( element )
            {
                // Output dimensions of images as width and height
                if( element.name == 'img' )
                {
                    var style = element.attributes.style;

                    if( style )
                    {
                        // Get the width from the style.
                        var match = /(?:^|\s)width\s*:\s*(\d+)px/i.exec( style ),
                        width = match && match[ 1 ];

                        // Get the height from the style.
                        match = /(?:^|\s)height\s*:\s*(\d+)px/i.exec( style );
                        var height = match && match[ 1 ];

                        // Get the float from the style.
                        match = /(?:^|\s)float\s*:\s*(\w+)/i.exec( style );

                        var align = match && match[ 1 ];

                        if( align )
                        {
                            element.attributes.align = align;
                        }
                    }

                    element.forEach             = function(){};
                    element.writeChildrenHtml   = function(){};
                }

                return element;
            }
        }
    });
});

Answer 2

作为快速修复（对于那些不想深入了解CKEditor文件的人），即使没有align或class，您也可以使用CSS为图像设置样式。使用*属性添加到图像中。

示例：

img[style*=left] { 
    float: left; 
    margin: 0px 20px 10px 0px; 
}

img[style*=right] { 
    float: right;
    margin: 0px 0px 10px 20px; 
}

您可以使用[style*=]属性检查内联style=""属性中的单词＆＃39; left＆＃39;或者＆＃39;对＆＃39;它由CKEditor应用于图像，然后以任何你想要的方式设置它们。客户仍然会使用对齐下拉列表来选择他们是否希望图像向左或向右浮动，因此他们根本不会注意到任何更改。

我们遇到了与@Eth相同的问题，但我们的整个ckEditor已经缩小并且几乎无法编辑。希望这能提供另一种解决方案！

Answer 3

确保过滤器为＆＃34;完全HTML＆＃34;，取消选中限制允许的HTML标记，检查转换媒体标记到标记，并在过滤处理顺序中将转换媒体标记转换为标记位于顶部。瞧它完成了

CKeditor删除图像对齐属性

3 个答案: