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]=newUI[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 =newFunction("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

functioncallback(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 =newFormData();
  fileForm.append('upfile', input.files[0]);var oReq =newXMLHttpRequest();
  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;}