CKEditor:插入图像时自定义HTML

Question

我正在使用CKEditor 3.5在网站上提供WYSYWYG编辑.插入图像时,您可以提供图像的宽度和高度,从而产生如下HTML:

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

由于这会在浏览器和同一网站上的其他地方调整大小我使用Nathanael Jones的图像大小调整模块,我想得到以下输出:

<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删除这些属性,所以我所做的就是重写上传的的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);
           };
        }
  }

到目前为止,这对我们有用.