javascript - CKeditor 删除图像对齐属性

Question

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

虽然内联样式不是问题，但我需要保留“align”属性，以便我可以通过 CSS 以编程方式将填充应用到图像，而无需在编辑器中向每个图像添加样式(就像 CMS 用户会做的那样)技术上不具备执行此操作的能力)。

我已经成功地创建了一个函数来查找具有样式属性的图像并分配对齐属性。然后使用“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;
            }
        }
    });
});