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

Question

我正在使用 CKEditor 3.5 在网站中提供所见即所得编辑。插入图像时，您可以提供图像的宽度和高度，这会导致 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);
           };
        }
  }

到目前为止，这对我们来说是有效的。

Answer 2

查看“输出html”示例，您可以找到一些代码将图像中的尺寸从样式更改为属性，因此您可以调整它来重写URL。

Answer 3

我没有足够的观点来评论之前的答案。但关于您的错误：CKEDITOR.currentInstance 返回未定义。

这很奇怪，因为 CKEDITOR 是全局的，但您不必求助于它。

在 OK 函数调用中，您可以访问“编辑器”，而不必获取实例。

只是一个建议。

Answer 4

最好的选择可能是“重新创建” src （可能还有样式）字段的行为。我也做过类似的事情。 （但没那么复杂）

从原始代码（来自plugins/dialog/image.js）开始，创建设置和提交逻辑来生成（并解析）您正在寻找的标记。

然后在对话框定义期间

1. 删除原件
2. 添加您的“自定义”字段

样式字段不确定，也许只是将其留在对话框中，但将其提交逻辑存根。

我将我的字段添加到对话框中...

var infoTab = dialogDefinition.getContents( 'info' );
// Move the ID field from "advanced" to "info" tab.
infoTab.add( idField_config);
var idField_config = {
    type : 'text',
    label : 'Name',
    id : 'linkId',
    setup : function( type, element ) {
        //if ( type == IMAGE )
            this.setValue( element.getAttribute( 'id' ) );
    },
    commit : function( type, element ) {
        //if ( type == IMAGE ) {
            if ( this.getValue() || this.isChanged() )
            element.setAttribute( 'id', this.getValue() );
        //}
    }   
};

我遇到的问题。

1. 新字段添加到末尾
   对话。
2. 原始代码片段
   ( type == IMAGE ) 无效（很想知道为什么，但感觉很舒服，可以安全地对我的用法进行评论）

您可能会遇到标记规则的问题，导致您的辛苦工作付诸东流，但“输出 html”样本”建议应该有所帮助你解决了这个问题。