上传图片：无法读取未定义的属性“setCustomData”答案

【问题标题】：Upload Image: Cannot read property 'setCustomData' of undefined上传图片：无法读取未定义的属性“setCustomData”
【发布时间】：2018-01-19 04:58:13
【问题描述】：

我正在尝试将上传的图片嵌入到编辑器中。我的filebrowserUploadUrl 是/api/m/image，它似乎工作正常。我点击Send it to the Server按钮后，出现脚本错误如下：

image.js?t=H4PG:19 Uncaught TypeError: Cannot read property 'setCustomData' 
of undefined
  at textInput.onChange (image.js?t=H4PG:19)
  at textInput.n (ckeditor.js:10)
  at textInput.CKEDITOR.event.CKEDITOR.event.fire (ckeditor.js:12)
  at textInput.setValue (ckeditor.js:619)
  at textInput.setValue (ckeditor.js:545)
  at a.q (ckeditor.js:841)
  at ckeditor.js:31
  at Object.callFunction (ckeditor.js:31)
  at image?CKEditor=editor&CKEditorFuncNum=1&langCode=en:1

上面的最后一行是对filebrowserUploadUrl的调用，它的响应是：

window.parent.CKEDITOR.tools.callFunction(1, '/images/bulletins.jpg', '上传成功');

Uploaded successfully 消息显示在警报中。 Image Info 选项卡下的预览框未更新。但是如果我点击确定关闭对话框，图像（bulletins.jpg）就嵌入到编辑器中了。

什么可能导致错误，我该如何解决？

我找到了导致它的原因。当插入图像对话框启动到上传选项卡时，我想设置默认选项卡。我使用以下代码：

CKEDITOR.on("dialogDefinition", function(ev) {
  var dialogName = ev.data.name;
  var dialogDefinition = ev.data.definition;
  if (dialogName === "image") {
    dialogDefinition.onShow = function() {
      this.selectPage("Upload");
    }
  }
});

使用上述代码时，上传文件时会出现该错误。

【问题讨论】：

我在使用 onShow 事件处理程序后面临同样的问题。 dialogDefinition.onShow = function() { console.log('onShow called'); } 有人可以帮助我吗？

标签： ckeditor ckeditor4.x

【解决方案1】：

我遇到了同样的问题，在使用 vikram 提出的解决方案后，编辑器在将图像链接粘贴到文本中时产生错误。这里有更好的方法，不要完全覆盖默认的onShow 方法，而是通过以下方式添加更多内容：

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

    if (dialogName == 'image') {

        var oldOnShow = dialogDefinition.onShow;
        var newOnShow = function () {
            this.selectPage('Upload');
            this.hidePage('Link');

            // change tabs order
            $('a[title=Upload].cke_dialog_tab').css('float', 'left');
        };

        dialogDefinition.onShow = function () {
            oldOnShow.call(this, arguments);
            newOnShow.call(this, arguments);
        };
    }
});

【讨论】：

【解决方案2】：

经过大量调试，我找到了解决方案。

如果你会在image.js 中看到txtUrl 文本框的onChange 方法@ 见行号 507 和 513 您将了解此错误的原因。

在第 513 行调用setCustomData。

original.setCustomData('isReady', 'false');

CKEDITOR.on("dialogDefinition", function(ev) {
  var dialogName = ev.data.name;

  //current editor
  var editor = ev.editor;
  var dialogDefinition = ev.data.definition;

  if (dialogName === "image") {
    dialogDefinition.dialog.on('show', function(e){
      var dialogBox = e.sender;

        //This line is the answer of your question
       //this line will get rid of the error setCustomData
      dialogBox.originalElement = editor.getSelection().getStartElement();
      this.selectPage("Upload");
    });
  }
});

【讨论】：