VUE3下通过vue-ueditor-wrap使用UEditor Plus遇到的问题及解决方案

shotcutmenu错误

第一次选择弹出shotcutmenu后，如果再次重新加载组件会出现错误。

1. vue-ueditor-wrap组件提供了 editor-dependencies-checker 属性，这个属性接受一个函数作为参数，函数在组件创建 script 之前执行，如果返回 ture，则认为 UEditor 资源已存在，不会再创建 script。通常你不需要手动指定，组件内部已经实现了判断 ueditor.config.js 和 ueditor.all.min.js 是否加载过的默认检测函数。也就是说，如果你在网站的其他位置加载过 UEditor 的脚本，vue-ueditor-wrap 是不会重复加载的。
2. UEditor Plus // ui/shortcutmenu.js 中

initShortCutMenu: function() {
  - this.items = this.items || [];
  // 改为这个，创建新的内存空间
  + this.items = (this.items || []).map((item)=>item);
  ......

initItems: function() {
  if (utils.isArray(this.items)) {
    for (var i = 0, len = this.items.length; i < len; i++) {
      var item = this.items[i].toLowerCase();
      if (UI[item]) {
        // 这里因为前面是数组引用赋值，导致下面的代码修改了原数组，而vue-ueditor-wrap在下次创建editor是不会重新加载config.js文件，导致错误
        this.items[i] = new UI[item](this.editor);
        this.items[i].className += " edui-shortcutsubmenu ";
      }
    }
  }
},

上传文件携带bear token授权

+ var token = `Bearer ${localStorage.getItem('token')}`;
+     xhr.setRequestHeader('Authorization', token);
  if (method == "POST") {
      xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
      xhr.send(submitStr);
  } else {
      xhr.send(null);
  }

+ var token = `Bearer ${localStorage.getItem('token')}`;
+     xhr.setRequestHeader(['Authorization'], token);
  xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
  xhr.addEventListener("load", function(e) {
    try {
      var json = new Function("return " + utils.trim(e.target.response))();
      if (json.state == "SUCCESS" && json.url) {
        successHandler(json);
      } else {
        errorHandler(json.state);
      }
    } catch (er) {
      errorHandler(me.getLang("autoupload.loadError"));
    }
  });

plugins/simpleupload.js

function callback(responseData) {
  try {
		// var link,
		//   json,
		//   loader,
		//   body = (iframe.contentDocument || iframe.contentWindow.document)
		//     .body,
		//   result = body.innerText || body.textContent || "";
		// json = new Function("return " + result)();
		// link = me.options.imageUrlPrefix + json.url;
		// if (json.state == "SUCCESS" && json.url) {
		//   loader = me.document.getElementById(loadingId);
		//   domUtils.removeClasses(loader, "loadingclass");
		//   loader.setAttribute("src", link);
		//   loader.setAttribute("_src", link);
		//   loader.setAttribute("alt", json.original || "");
		//   loader.removeAttribute("id");
		//   me.fireEvent("contentchange");
		// } else {
		//   showErrorLoader && showErrorLoader(json.state);
		// }
    var link, loader;
        link = me.options.imageUrlPrefix + responseData.url;
    if (responseData.state == 'SUCCESS' && responseData.url) {
      loader = me.document.getElementById(loadingId);
      loader.setAttribute('src', link);
      loader.setAttribute('_src', link);
      loader.setAttribute('title', responseData.title || '');
      loader.setAttribute('alt', responseData.original || '');
      loader.removeAttribute('id');
      domUtils.removeClasses(loader, 'loadingclass');
    } else {
      alert(responseData.state); // TODO：临时解决fireEvent不能触发showmessage
      showErrorLoader && showErrorLoader(responseData.state);
    }
 } catch (er) {
   alert(responseData.state); // TODO：临时解决fireEvent不能触发showmessage
   showErrorLoader &&
     showErrorLoader(me.getLang("simpleupload.loadError"));
 }

showErrorLoader && showErrorLoader(responseData.state);
没有生效，知道的小伙伴麻烦私信教教我哈~

  // domUtils.on(iframe, "load", callback);
  // form.action = utils.formatUrl(
  //   imageActionUrl +
  //     (imageActionUrl.indexOf("?") == -1 ? "?" : "&") +
  //     params
  // );
  // form.submit();
  var action = utils.formatUrl(
    imageActionUrl +
      (imageActionUrl.indexOf('?') == -1 ? '?' : '&') +
      params
  );
  var fileForm = new FormData();
  fileForm.append('upfile', input.files[0]);
  var oReq = new XMLHttpRequest();
  oReq.open('POST', action, true);
  var token = `Bearer ${localStorage.getItem('token')}`;
  oReq.setRequestHeader('Authorization', token);
  oReq.send(fileForm); // 使用XMLHttpRequest的send()把数据发送出去
  oReq.onreadystatechange = function (responseText) {
    //服务器返回值的处理函数，此处使用匿名函数进行实现
    if (oReq.readyState == 4 && oReq.status == 200) {
      var responseData = eval('(' + oReq.responseText + ')');
      callback(responseData);
    }
  };

菜单项弹出frame时地址错误

这里使用的arcopro框架，UEditor Plus放到了public。

   修改配置文件
   // dialog内容的路径 ～会被替换成URL,垓属性一旦打开，将覆盖所有的dialog的默认路径
   ,iframeUrlMap:{
      'anchor':'~/dialogs/anchor/anchor.html',
   }

或者

mapUrl: function (url) {
        return url
          ?
            - url.replace('~/', this.editor.options.UEDITOR_CORS_URL || '')
            + url.replace('~/', this.editor.options.UEDITOR_HOME_URL || '') 
            : ""
      },

使用pinia组件订阅状态更新数据时会导致字数统计的触发，这时候拿不到countDom会报错

   var opt = editor.options,
	     max = opt.maximumWords,
	     msg = opt.wordCountMsg,
	     errMsg = opt.wordOverFlowMsg,
	     countDom = ui.getDom("wordcount");
    // 暂时加了个 || !countDom 来解决
    if (!opt.wordCount || !countDom) {
      return;
    }