如何防止 CKEDITOR 将图像尺寸添加为样式？
而不是这个：
<img src="image.jpg" style="height:100px; width:100px;">
我要这个
<img src="image.jpg" height="100px" width="100px">
问问题
25610 次
7 回答
33
通过使用CKEditor 4.4.0 中引入的不允许的内容，还有另一种方法（更简单） ：
CKEDITOR.replace( 'editor1', {
disallowedContent : 'img{width,height}'
} );
或在 config.js 中：
config.disallowedContent = 'img{width,height}';
此规则将禁止 img 元素的内联样式（宽度和高度），CKEditor 将使用属性代替。
如果由于某种原因，您会注意到图像对话框窗口中的宽度/高度输入元素现在消失了，请同时设置以下内容：
config.extraAllowedContent = 'img[width,height]';
于 2014-06-26T07:45:51.507 回答
33
您可以通过在 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;
}
}
});
});
于 2011-05-19T09:59:18.507 回答
4
嘿，我想通了！所以我在这里创建了一个帐户，只是为了给大家发布这个。我没有将它用于 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 );
唯一的问题是当您拖动控制点来调整它的大小时它不起作用。我无法弄清楚那部分。拖动控制点调整大小后，只需打开图像属性并单击确定，它将再次添加宽度和高度属性。
于 2010-04-09T06:58:29.287 回答
3
我不相信您可以在不更改 CKEDITOR 的图像插件文件的情况下做到这一点。
如果您搜索他们的错误跟踪站点，您会看到他们尝试“避免 XHTML 不推荐使用的属性”以支持样式。（避免不推荐使用的图像属性）
如果你想自己做（通过改变源文件），可以看看这个文件：plugins_image_dialogs_image.js 你会在那里看到他们专门删除了属性并添加了等效的样式。
于 2010-01-12T21:05:29.543 回答
1
保存表单时，请执行此操作
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;
}
}
}
}
于 2010-11-01T14:32:07.400 回答
1
与 Cedric Dugas 的解决方案类似，这里有一个 CKEditor 票的补丁，它帮助我解决了这个问题：
http://dev.ckeditor.com/attachment/ticket/5024/5024_6.patch
我使用了它，但稍微修剪了代码，以便过滤器只处理图像。此解决方案在插入图像时有效，但在使用编辑器中的句柄调整大小时也有效。
希望能帮助到你
于 2011-05-04T14:59:08.100 回答
-2
对于 ckeditor 4.1 版，您可以使用以下内容：
CKEDITOR.replace(textareaId,{
allowedContent: true,
});
请注意这一点，因为它似乎删除了所有 html 验证。
于 2013-04-09T22:24:47.720 回答