CKEDITOR - 防止将图像尺寸添加为 css 样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2051896/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CKEDITOR - prevent adding image dimensions as a css style
提问by Franek
How to prevent CKEDITOR from adding image dimensions as a style?
如何防止CKEDITOR将图像尺寸添加为样式？
Instead of this:
取而代之的是：
<img src="image.jpg" style="height:100px; width:100px;">
I want this
我要这个
<img src="image.jpg" height="100px" width="100px">
回答by Marco Cortellino
You can resolve the issue by inserting this code in config.js of your CKEditor
您可以通过在 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;
}
}
});
});
回答by Wiktor Walc
There is one more way to do this (much simpler), by using Disallowed Contentintroduced in CKEditor 4.4.0:
还有一种方法可以做到这一点（更简单），通过使用CKEditor 4.4.0 中引入的禁止内容：
CKEDITOR.replace( 'editor1', {
disallowedContent : 'img{width,height}'
} );
or in config.js:
或在 config.js 中：
config.disallowedContent = 'img{width,height}';
This rule will disallow inline styles (width and height) for img element, CKEditor will use attributes instead.
此规则将禁止 img 元素使用内联样式（宽度和高度），CKEditor 将使用属性代替。
If for some reason, you will notice that the width/height input elements in the Image dialog window are now gone, set the following as well:
如果由于某种原因，您会注意到图像对话框窗口中的宽度/高度输入元素现在消失了，请设置以下内容：
config.extraAllowedContent = 'img[width,height]';
回答by rykr
Hey, I figured it out! So I created an account here just to post this for you all. I'm not using it for an Outlook newsletter but it should still work for that because it adds on the height and width attributes to the img tags.
嘿，我想通了！所以我在这里创建了一个帐户只是为了给大家发布这个。我没有将它用于 Outlook 时事通讯，但它应该仍然适用，因为它将高度和宽度属性添加到 img 标签。
If we ever happen to want to do this again here is exactly how I did it.
如果我们碰巧想再次这样做，这正是我所做的。
First I found some fully formatted and commented source files:
首先，我找到了一些完全格式化和注释的源文件：
http://dev.fckeditor.net/browser/CKEditor/tags/3.2/_source/plugins/image/dialogs/image.js
http://dev.fckeditor.net/browser/CKEditor/tags/3.2/_source/plugins/image/dialogs/image.js
So I retrieved the source of plugins/image/dialogs/image.js:
于是我找回了plugins/image/dialogs/image.js的源码：
svn co http://svn.fckeditor.net/CKEditor/tags/3.2/_source/plugins/image/dialogs
If you have line numbers on each line because you didn't download it and just copied it you can remove them by running this command (from Linux terminal):
如果每行都有行号，因为你没有下载它只是复制它，你可以通过运行这个命令（从 Linux 终端）来删除它们：
cut -c 5- image.js > image2.js
Or just click the Original Format link near the bottom of the page at the 1st link above.
或者只需单击上面第一个链接中页面底部附近的原始格式链接。
Now we have a clean source file ready to edit.
现在我们有一个干净的源文件可以编辑了。
The original packed version was 19k in the one I had. The unpacked source code was 45k. But it should only load when someone is editing something anyway and shouldn't be a problem. If it is then just repack it.
我的原始打包版本是 19k。解压后的源代码为 45k。但它应该只在有人编辑某些东西时加载，应该没有问题。如果是，那么只需重新包装它。
The version I have might be different from the one you have so I will show you which lines I am modifying and then what I did to them.
我的版本可能与你的版本不同，所以我会告诉你我正在修改哪些行，然后我对它们做了什么。
Replace lines 636-641:
替换第 636-641 行：
if ( value )
element.setStyle( 'width', CKEDITOR.tools.cssLength( value ) );
else if ( !value && this.isChanged( ) )
element.removeStyle( 'width' );
!internalCommit && element.removeAttribute( 'width' );
with:
和：
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' );
Replace line 653 (657 after above edits):
替换第 653 行（上述编辑后的第 657 行）：
element.setStyle( 'width', value + 'px');
with:
和：
element.setStyle( 'width', value + 'px');
element.setAttribute( 'width', value );
Replace lines 686-692 (691-697 after above edits):
替换第 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' );
with:
和：
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' );
Replace line 704 (712 after above edits):
替换第 704 行（上述编辑后的 712）：
element.setStyle( 'height', value + 'px' );
with:
和：
element.setStyle( 'height', value + 'px' );
element.setAttribute( 'height', value );
The only catch is that it doesn't work when you drag the control points to resize it. I couldn't figure out that part. After dragging the control points to resize it just open the Image Properties and click OK and it will add the width and height attributes in again.
唯一的问题是当您拖动控制点以调整其大小时它不起作用。我无法弄清楚那部分。拖动控制点调整大小后，只需打开图像属性并单击确定，它将再次添加宽度和高度属性。
回答by Gabriele Petrioli
I do not believe you can do it without altering the image plugin file of the CKEDITOR..
我不相信你可以在不改变 CKEDITOR 的图像插件文件的情况下做到这一点。
If you search their bug tracking site, you will see that they try to 'avoid XHTML deprecated attributes' in favor of styling. ( Avoid deprecated image attributes)
如果您搜索他们的错误跟踪站点，您会发现他们试图“避免 XHTML 弃用属性”以支持样式。（避免弃用的图像属性）
The place to look if you want to do it yourself (by altering the source files) is this file : plugins_image_dialogs_image.jsYou will see in there that they specifically remove the attribute and add the style equivalent.
如果你想自己做（通过改变源文件）， 可以查看这个文件：plugins_image_dialogs_image.js你会在那里看到他们专门删除了属性并添加了等效的样式。
回答by Cedric Dugas
When you save your form, do this
保存表单时，请执行以下操作
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;
}
}
}
}
回答by MaxiWheat
Similar to Cedric Dugas' solution, there is a patch to a ticket for CKEditor here that helped me a lot solving this problem :
类似于 Cedric Dugas 的解决方案，这里有一个 CKEditor 票证的补丁，它帮助我解决了很多问题：
http://dev.ckeditor.com/attachment/ticket/5024/5024_6.patch
http://dev.ckeditor.com/attachment/ticket/5024/5024_6.patch
I used it but trimmed the code a little bit so that just images are processed by the filter. This solution works when the image gets inserted but also when it is resized with the handles in the editor.
我使用了它，但稍微修剪了代码，以便过滤器只处理图像。此解决方案适用于插入图像以及使用编辑器中的句柄调整其大小时。
Hope it helps
希望能帮助到你
回答by cby016
For ckeditor version 4.1 you can use the following:
对于 ckeditor 4.1 版，您可以使用以下内容：
CKEDITOR.replace(textareaId,{
allowedContent: true,
});
Be careful with this as it seems to remove all html validation.
小心这一点，因为它似乎删除了所有的 html 验证。
