CKEDITOR-防止将图像尺寸添加为css样式
如何防止CKEDITOR将图像尺寸添加为样式 与此相反：CKEDITOR-防止将图像尺寸添加为css样式,css,image,ckeditor,Css,Image,Ckeditor,如何防止CKEDITOR将图像尺寸添加为样式 与此相反： <img src="image.jpg" style="height:100px; width:100px;"> 我想要这个 <img src="image.jpg" height="100px" width="100px"> 我认为，如果不更改CKEDITOR的图像插件文件，您就无法做到这一点 如果您搜索他们的bug跟踪站点，您将看到他们试图“避免使用XHTML不推荐的属性”，而倾向于样式化。（） 如果您
<img src="image.jpg" style="height:100px; width:100px;">
<img src="image.jpg" height="100px" width="100px">
我认为，如果不更改CKEDITOR的图像插件文件，您就无法做到这一点 如果您搜索他们的bug跟踪站点，您将看到他们试图“避免使用XHTML不推荐的属性”，而倾向于样式化。（） 如果您想自己（通过更改源文件）执行此操作，请查看以下文件：
您将在其中看到，他们专门删除了属性并添加了样式等效项。嘿，我想出来了！所以我在这里创建了一个帐户，只是为了给大家发布这个。我不是在Outlook时事通讯中使用它，但它应该仍然适用，因为它为img标记添加了高度和宽度属性 如果我们碰巧想再做一次，我就是这样做的 首先，我发现了一些完全格式化和注释的源文件： 因此，我检索了plugins/image/dialogs/image.js的源代码：
svn co http://svn.fckeditor.net/CKEditor/tags/3.2/_source/plugins/image/dialogs
if ( value )
element.setStyle( 'width', CKEDITOR.tools.cssLength( value ) );
else if ( !value && this.isChanged( ) )
element.removeStyle( 'width' );
!internalCommit && element.removeAttribute( 'width' );
唯一的问题是，拖动控制点以调整其大小时，它不起作用。我搞不懂那部分。拖动控制点以调整其大小后，只需打开图像属性并单击“确定”，它将再次添加宽度和高度属性。保存表单时，请执行此操作
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的补丁，帮助我解决了这个问题： 我使用了它，但对代码做了一点修改，这样过滤器只处理图像。此解决方案在插入图像时有效，但在编辑器中使用句柄调整图像大小时也有效
希望对您有所帮助您可以通过在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中引入的：
CKEDITOR.replace( 'editor1', {
disallowedContent : 'img{width,height}'
} );
config.disallowedContent = 'img{width,height}';
config.extraAllowedContent = 'img[width,height]';
完全正确你可以编辑插件，它应该很简单。但是你为什么要这样做呢？你不想在你的图片上添加样式属性的一个原因是，它们与设计不匹配，为了克服这个问题，你必须添加！样式表中的重要规则不是什么好主意。@Funky Dude-可能是一个XHTMLpage@Funky伙计-看看@Stephen的评论。我们正在使用它来创建电子邮件时事通讯的内容。因此，我们不能使用css。有时，如果不指定图像尺寸，outlook不会显示图像。到目前为止，有没有可以接受的答案？您可以在压缩包的_source文件夹下与其他CKEditor一起获取该文件。这对我很有用。另一个答案中链接的补丁针对单个实例进行了硬编码，我经常在一个页面上有多个实例。作为奖励，当它放在我的自定义JS配置文件中时，它可以工作，这意味着我可以保持ckeditor LIB不变，这使得升级更容易。它对我不起作用，支持哪个版本的ckeditor？我使用的是3.6.3这不适用于我在IE 9中使用CKEditor 4.1.2：（但在Chrome中工作良好。使用版本：“4.1.1”，修订版："5a2a7e3，这个补丁在跨浏览器的情况下似乎工作得很好。谢谢！我做了ol'复制和调整，添加了对浮点的处理，将其转换为align属性。这允许我绕过Drupal中的一些XSS过滤，去掉图像上的任何样式属性。这个答案与原始问题无关。这是有效的对我来说，@Marco solution没有。我使用4.4.5如果你想允许所有内容，并将样式转换为属性，那么你可以这样做：
config.allowedContent={$1:{//使用将元素指定为对象的功能。元素：CKEDITOR.dtd，属性：true，样式：true，类：true}；config.disallowedContent='img{width，height}“；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;
}
}
}
}
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.replace(textareaId,{
allowedContent: true,
});
CKEDITOR.replace( 'editor1', {
disallowedContent : 'img{width,height}'
} );
config.disallowedContent = 'img{width,height}';
config.extraAllowedContent = 'img[width,height]';