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

Question

我正在使用 CKEditor 3.5 在网站中提供所见即所得编辑。插入图像时，您可以提供图像的宽度和高度，这会生成如下 HTML:

<img alt="" src="/Images/Sample.png" style="width: 62px; height: 30px; " />

因为这会在浏览器和同一网站上的其他地方调整大小，所以我使用 Nathanael Jones' Image Resizing Module ，我想得到以下输出:

<img alt="" src="Images/Sample.png?width=62&height=30" />

是否有一种简单的方法来控制生成的 HTML，或者我真的可以为 CKEditor 编写自己的对话框/插件吗？

编辑:

将以下行添加到 config.js 是最终对我有用的解决方案:

CKEDITOR.on('dialogDefinition', function (ev) {
    var dialogName = ev.data.name;
    var dialogDefinition = ev.data.definition;
    var dialog = dialogDefinition.dialog;
    var editor = ev.editor;

    if (dialogName == 'image') {
        dialogDefinition.onOk = function (e) {
            var imageSrcUrl = e.sender.originalElement.$.src;
            var width = e.sender.originalElement.$.width;
            var height = e.sender.originalElement.$.height;
            var imgHtml = CKEDITOR.dom.element.createFromHtml('<img src=' + imageSrcUrl + '?width=' + width + '&height=' + height + ' alt="" />');
            editor.insertElement(imgHtml);
        };
    }
});

接下来的问题是，在编辑图像时，宽度和高度自然会出现在 URL 字段中，而在宽度和高度的专用字段中会丢失。所以我需要想出一个相反的解决方案......:-)

Answer 1

我也遇到了同样的问题，我需要从生成的图像 HTML 中删除这些属性，所以我所做的就是重写 uploader 的 onOK 方法并使用 CKEditor 的 API 手动插入图像元素，诸如此类像这样:

   CKEDITOR.on('dialogDefinition', function(ev) {
        // Take the dialog name and its definition from the event data
        var dialogName = ev.data.name;
        var dialogDefinition = ev.data.definition;
        var editor = ev.editor;
        if (dialogName == 'image') {
           dialogDefinition.onOk = function(e) {
              var imageSrcUrl = e.sender.originalElement.$.src;
              var imgHtml = CKEDITOR.dom.element.createFromHtml("<img src=" + imageSrcUrl + " alt='' align='right'/>");
              editor.insertElement(imgHtml);
           };
        }
  }

到目前为止，这对我们有效。