html - CKEditor:插入图像时的自定义HTML

Question

我正在使用 CKEditor 作为我网站的富文本编辑器。在该站点上，我还有一个自定义图像管理器，我使用“filebrowserImageBrowseUrl”配置参数在 CKEditor 中使用它。这会在图像属性中放置一个“浏览服务器”按钮，让我可以从我的图像管理器中选择一个文件。这很好用。

但是，当我从我的图像管理器中插入图像并在 CKEditor 中调整它的大小时，这只会向 img 标签添加一个样式属性。当人们浏览我的网站时，他们会看到我想要的大小的图像，但他们也必须下载大量数据，即使图像大小只是缩略图。

当您将宽度和高度作为查询字符串放入图像 url 时，我的图像管理器会自动调整大小。

我如何覆盖 CKEditor 创建的 img 标签，以便除了样式属性之外，将选定的宽度和高度作为查询变量放入 img 标签的 src 属性中(这样 CKEditor 仍然知道图像的尺寸) ？

我确实在此处发现了另一个问题:CKEditor: Customized HTML on inserting an image但是该问题的答案似乎不起作用，因为该示例中的宽度和高度包含图像的原始尺寸而不是自定义尺寸。我还调试了这些方法中的各种变量，但没有找到自定义大小。

所以问题仍然存在:如何覆盖 CKEditor 的输出 HTML 以将图像的大小作为查询变量以及 CKEditor 默认放置它的样式属性？

更新

为了使下面的所有评论更加全面，这里有一个浓缩版:

CKEDITOR.on('instanceReady', function (ev) {
    var editor = ev.editor,
        dataProcessor = editor.dataProcessor,
        htmlFilter = dataProcessor && dataProcessor.htmlFilter;

    htmlFilter.addRules( {
        elements : {
            $ : function( element ) {
                // Output dimensions of images as width and height attributes on src
                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];

                        var imgsrc = element.attributes.src + "?width=" + width + "&height=" + height;

                        element.attributes.src = imgsrc;
                        element.attributes['data-cke-saved-src'] = imgsrc;
                    }
                }
            }
        }
    });
});

只要 CKEditor 生成实际的 HTML，就会运行此代码，这发生在您通过单击“源代码”按钮查看源代码或对该页面执行 HTTP POST 时。

不过，这是一个小警告。上面的代码将继续为每次单击“源”按钮或每次回发附加宽度和高度查询字符串，因此您可能需要添加一些额外的逻辑来过滤掉宽度和高度查询字符串，然后再将它们附加到源属性。

Answer 1

如果您查看 Output HTML sample在您的 CKEditor 副本中，您可以看到它如何使用 htmlFilter 更改图像以将尺寸放入属性中。基于该代码，您可以编写自己的代码，以便它更改图像的 url。

请注意:URL 受到保护以避免浏览器出现问题，因此修改“src”属性可能还不够。查看您正在修改的对象的属性。