如何防止CKEDITOR添加图片尺寸作为样式？
而不是这个：
<img src="image.jpg" style="height:100px; width:100px;">
我想要这个
<img src="image.jpg" height="100px" width="100px">
【问题讨论】：
我不相信你可以在不改变CKEDITOR的图像插件文件的情况下做到这一点..
如果您搜索他们的错误跟踪站点，您会发现他们尝试“避免 XHTML 不推荐使用的属性”以支持样式。 (Avoid deprecated image attributes)
如果您想自己做（通过更改源文件），请查看此文件：plugins_image_dialogs_image.js 您将在那里看到他们专门删除了该属性并添加了等效样式。
【讨论】：
嘿，我想通了！所以我在这里创建了一个帐户，只是为了给大家发布这个。我没有将它用于 Outlook 时事通讯，但它仍然适用，因为它为 img 标签添加了高度和宽度属性。
如果我们碰巧想再次这样做，我就是这样做的。
首先我找到了一些完全格式化和注释的源文件：
http://dev.fckeditor.net/browser/CKEditor/tags/3.2/_source/plugins/image/dialogs/image.js
于是我检索了plugins/image/dialogs/image.js的来源：
svn co http://svn.fckeditor.net/CKEditor/tags/3.2/_source/plugins/image/dialogs
如果您在每行都有行号，因为您没有下载它只是复制了它，您可以通过运行以下命令（从 Linux 终端）删除它们：
cut -c 5- image.js > image2.js
或者只需点击上面第一个链接页面底部附近的原始格式链接。
现在我们有了一个可以编辑的干净源文件。
我的原始包装版本是 19k。解压后的源代码为 45k。但它应该只在有人正在编辑某些东西并且不应该成为问题时才加载。如果是，那么只需重新包装即可。
我拥有的版本可能与您拥有的不同，因此我将向您展示我正在修改哪些行以及我对它们做了什么。
替换第 636-641 行：
if ( value )
element.setStyle( 'width', CKEDITOR.tools.cssLength( value ) );
else if ( !value && this.isChanged( ) )
element.removeStyle( 'width' );
!internalCommit && element.removeAttribute( 'width' );
与：
if ( value ) {
element.setStyle( 'width', CKEDITOR.tools.cssLength( value ) );
element.setAttribute( 'width', value );
} else if ( !value && this.isChanged( ) ) {
element.removeStyle( 'width' );
element.removeAttribute( 'width' );
}
//!internalCommit && element.removeAttribute( 'width' );
替换第 653 行（上述修改后的第 657 行）：
element.setStyle( 'width', value + 'px');
与：
element.setStyle( 'width', value + 'px');
element.setAttribute( 'width', value );
替换第 686-692 行（上述编辑后为 691-697）：
if ( value )
element.setStyle( 'height', CKEDITOR.tools.cssLength( value ) );
else if ( !value && this.isChanged( ) )
element.removeStyle( 'height' );
if ( !internalCommit && type == IMAGE )
element.removeAttribute( 'height' );
与：
if ( value ) {
element.setStyle( 'height', CKEDITOR.tools.cssLength( value ) );
element.setAttribute( 'height', value );
} else if ( !value && this.isChanged( ) ) {
element.removeStyle( 'height' );
element.removeAttribute( 'height' );
}
//if ( !internalCommit && type == IMAGE )
// element.removeAttribute( 'height' );
替换第 704 行（上述编辑后的第 712 行）：
element.setStyle( 'height', value + 'px' );
与：
element.setStyle( 'height', value + 'px' );
element.setAttribute( 'height', value );
唯一的问题是当你拖动控制点来调整它的大小时它不起作用。我无法弄清楚那部分。拖动控制点调整大小后，只需打开图像属性并单击确定，它将再次添加宽度和高度属性。
【讨论】：
当您保存表单时，请执行此操作
var CKEDITOR = window.parent.CKEDITOR;
for ( var i in CKEDITOR.instances ){
var currentInstance = i;
break;
}
var oEditor = CKEDITOR.instances[currentInstance];
oEditor.dataProcessor.htmlFilter.addRules({
elements :{
img : function( element ){
if(!element.attributes.width){
if(element.attributes.style){
var styling = element.attributes.style
var findwidth = new RegExp("\[width: \]\s*(((?!\[width: \]|\[px\]).)+)\s*\[px\]")
var sWidth = findwidth.exec(styling)
sWidth = sWidth[1]
if(sWidth) element.attributes.width = sWidth;
}
// var reg=/width: \s*([0-9]+)\s*px/i;
// var res=styling.match(reg);
}
if(!element.attributes.height){
if(element.attributes.style){
var styling = element.attributes.style
var findheight = new RegExp("\[height: \]\s*(((?!\[height: \]|\[px\]).)+)\s*\[px\]")
var sHeight = findheight.exec(styling)
sHeight = sHeight[1]
if(sHeight) element.attributes.width = sHeight;
}
}
}
}
【讨论】：
类似于 Cedric Dugas 的解决方案，这里有一个 CKEditor 票的补丁，它帮助我解决了这个问题：
http://dev.ckeditor.com/attachment/ticket/5024/5024_6.patch
我使用了它，但稍微修剪了代码，以便过滤器只处理图像。此解决方案在插入图像时有效，并且在使用编辑器中的句柄调整大小时也有效。
希望对你有帮助
【讨论】：
您可以通过将此代码插入 CKEditor 的 config.js 中来解决此问题
CKEDITOR.on('instanceReady', function (ev) {
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];
if (width) {
element.attributes.style = element.attributes.style.replace(/(?:^|\s)width\s*:\s*(\d+)px;?/i, '');
element.attributes.width = width;
}
if (height) {
element.attributes.style = element.attributes.style.replace(/(?:^|\s)height\s*:\s*(\d+)px;?/i, '');
element.attributes.height = height;
}
}
}
if (!element.attributes.style)
delete element.attributes.style;
return element;
}
}
});
});
【讨论】：
对于 ckeditor 4.1 版，您可以使用以下内容：
CKEDITOR.replace(textareaId,{
allowedContent: true,
});
小心这个，因为它似乎删除了所有 html 验证。
【讨论】：
通过使用 CKEditor 4.4.0 中引入的Disallowed Content，还有另一种方法（更简单）：
CKEDITOR.replace( 'editor1', {
disallowedContent : 'img{width,height}'
} );
或在 config.js 中：
config.disallowedContent = 'img{width,height}';
此规则将禁止 img 元素的内联样式（宽度和高度），CKEditor 将使用属性代替。
如果由于某种原因，您会注意到图像对话框窗口中的宽度/高度输入元素现在消失了，请同时设置以下内容：
config.extraAllowedContent = 'img[width,height]';
【讨论】：
config.allowedContent = { $1: { // Use the ability to specify elements as an object. elements: CKEDITOR.dtd, attributes: true, styles: true, classes: true } }; config.disallowedContent = 'img{width,height}';link