2

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

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

我已经成功地制作了一个函数来查找具有样式属性的图像并分配一个对齐属性。然后使用“setData”更新编辑器，当我“getData”时，更新似乎仍然存在。但是，在保存过程中的某个时刻，它似乎将其删除。关于它在哪里的任何想法，或者如何同时添加对齐和样式对齐。

4

3 回答 3

3

经过更多的谷歌搜索具有讽刺意味的是，我在这里找到了答案：

CKEditor 对齐图像而不是浮动

为什么它没有出现在搜索中我不知道。这确实起到了作用，尽管我删除了与宽度和高度相关的线条并删除了“float”css 属性的替换，因为这导致所见即所得无法拾取样式。除此之外一切都很好！

更新：我发现在某些情况下这与 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;
            }
        }
    });
});
于 2013-08-21T11:01:43.840 回答
2

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

例子：

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

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

您可以使用该[style*=]属性检查style=""CKEditor 应用于图像的单词“left”或“right”的内联属性，然后以任何您想要的方式设置它们。客户仍将使用对齐下拉菜单来选择他们希望图像向左还是向右浮动，因此他们根本不会注意到任何变化。

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

于 2014-05-06T19:01:56.397 回答
0

确保过滤器为“完整 HTML”，未选中限制允许的 HTML 标签，选中将媒体标签转换为标记，并在过滤器处理顺序中将媒体标签转换为标记位于顶部。瞧，它完成了

于 2014-10-14T07:23:25.517 回答