Question

我正在使用CKEditor 3.5在网站上提供WYSYWYG编辑。插入图像时，您可以提供图像的宽度和高度，从而产生如下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中删除这些属性，所以我做的是覆盖上传者的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

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

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

然后在对话框定义

期间

删除原件
添加“自定义”字段

样式字段不确定，可能只是将其保留在对话框中，但是将其置于提交逻辑中。

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

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() );
        //}
    }   
};

我遇到的问题。

新字段添加到结尾对话。
原始代码的碎片（type == IMAGE）无效（喜欢知道为什么但感觉很舒服，可以安全地评论我的用法）

您可能会遇到标记规则撤消辛勤工作的问题，但“输出html”示例“建议应该可以帮助您解决这个问题。

Answer 4

我没有足够的观点对之前的答案发表评论。但就你的错误而言：CKEDITOR.currentInstance返回undefined。

这很奇怪，因为CKEDITOR是全球性的，但你不应该诉诸于此。

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

只是一个建议。

CKEditor：插入图像时自定义HTML

4 个答案: