3

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

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

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

如何覆盖 CKEditor 创建的 img 标签，以便将选定的宽度和高度作为查询变量放入 img 标签中的 src 属性以及 style 属性（以便 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 时会发生这种情况。

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

4

1 回答 1

2

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

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

于 2012-06-03T18:00:37.240 回答