CKEDITOR不会同时保存/解析属性和样式中的宽度/高度

Question

这段代码不会在源代码模式下保存

<img src="/images/test.jpg" height="300" width="450" style="width: 350px; height: auto;" />

当我将其置于源代码模式并单击回到wysiwyg模式时，CKEditor将剥离height / width属性。 这就是我所看到的

<img src="/images/test.jpg" style="width: 350px; height: auto;" />

但是我需要它来保存样式和属性（样式的高度/宽度和属性的高度/宽度）。

我尝试在下面使用此配置，但它不起作用

config.allowedContent = 'img{*}[*](*)'

我也试过

 config.allowedContent = true;

它确实起作用了，但是我的config.disallowedContent不起作用了。 我相信编辑器在HTML代码分析时会忽略样式和/或属性（以先到为准？）。

Answer 1

我终于找到了我的问题的答案。 这是/ckeditor.js中的代码，其中我注释了一行

contentTransformations: [
    // ["img{width}: sizeToStyle", "img[width]: sizeToAttribute"],
    ["img{float}: alignmentToStyle", "img[align]: alignmentToAttribute"]
]

同样在另一个文件中，我添加了以下代码：

evt.editor.dataProcessor.htmlFilter.addRules( {
elements: {
    $: function( element ) {
        if (element.name == 'img') {
            if (element.attributes.style) {
                var match = /(?:^|\s)width\s*:\s*((\d+)(pt|in|px)|auto|initial|inherit)/i.exec(element.attributes.style),
                    width = match && (match[2] || match[1]);

                if(width && !element.attributes.width) {
                    element.attributes.width = width;
                    element.attributes.style = element.attributes.style.replace(/(width\s*:\s*(\d+(pt|in|px)|auto|initial|inherit))/i, "");
                }

                match = /(?:^|\s)height\s*:\s*((\d+)(pt|in|px)|auto)/i.exec(element.attributes.style);
                var height = match && (match[2] || match[1]);

                if(height && !element.attributes.height) {
                    element.attributes.height = height;
                    element.attributes.style = element.attributes.style.replace(/(height\s*:\s*(\d+(pt|in|px)|auto|initial|inherit))/i, "");
                }
            }
        }
        return element;
    }
}

}）;