CKEDITOR - 防止将图像尺寸添加为CSS样式 [英] CKEDITOR - prevent adding image dimensions as a css style

问题描述

如何防止CKEDITOR将图片尺寸添加为样式？

How to prevent CKEDITOR from adding image dimensions as a style?

而不是这样：

<img src="image.jpg" style="height:100px; width:100px;">

我想要这个

<img src="image.jpg" height="100px" width="100px">

推荐答案

您可以通过在config中插入此代码来解决此问题.js的CKEditor

You can resolve the issue by inserting this code in config.js of your CKEditor

CKEDITOR.on('instanceReady', function (ev) {
// Ends self closing tags the HTML4 way, like <br>.
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 - 防止将图像尺寸添加为CSS样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！