我有一个核心使用 ckeditor 的 CMS。我刚刚将 ckeditor 的版本升级到最新版本，现在当您在编辑器中左右对齐图像时，它会放入内联样式而不是“对齐”属性。
虽然内联样式不是问题，但我需要保留 'align' 属性，以便我可以通过 CSS 以编程方式对图像应用填充，而无需在编辑器中为每个图像添加样式（因为 CMS 的用户会在技术上没有能力做到这一点）。
我已经成功地制作了一个函数来查找具有样式属性的图像并分配一个对齐属性。然后使用“setData”更新编辑器，当我“getData”时，更新似乎仍然存在。但是，在保存过程中的某个时候，它似乎将其删除。关于这是在哪里，或者如何同时添加对齐和样式对齐的任何想法。
【问题讨论】：
标签： javascript ckeditor
讽刺地在谷歌上搜索了很多之后，我在这里找到了答案：
CKEditor align images instead of float
为什么它没有出现在我不知道的搜索中。这确实起到了作用，尽管我删除了与宽度和高度相关的行并删除了“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;
}
}
});
});
【讨论】：
作为一种快速修复（对于那些不想深入研究 CKEditor 文件的人），您实际上可以使用 CSS 为图像设置样式，即使没有使用* 属性。
示例：
img[style*=left] {
float: left;
margin: 0px 20px 10px 0px;
}
img[style*=right] {
float: right;
margin: 0px 0px 10px 20px;
}
您可以使用[style*=] 属性来检查内联style="" 属性中的单词'left' 或'right'，它被CKEditor 应用于图像，然后以任何你想要的方式设置它们。客户仍将使用对齐下拉菜单来选择他们希望图像向左还是向右浮动，因此他们根本不会注意到任何变化。
我们遇到了与 @Eth 相同的问题，但是我们的整个 ckEditor 已被缩小并且几乎无法编辑。希望这提供了另一种解决方案！
【讨论】：
确保过滤器为“完整 HTML”，未选中限制允许的 HTML 标签，选中将媒体标签转换为标记，并在过滤器处理顺序中将媒体标签转换为标记位于顶部。瞧，它完成了
【讨论】：