VUE3下通过vue-ueditor-wrap使用UEditor Plus遇到的问题及解决方案
这里使用的arcopro框架,UEditor Plus放到了public。第一次选择弹出shotcutmenu后,如果再次重新加载组件会出现错误。
·
shotcutmenu错误
第一次选择弹出shotcutmenu后,如果再次重新加载组件会出现错误。
- vue-ueditor-wrap组件提供了 editor-dependencies-checker 属性,这个属性接受一个函数作为参数,函数在组件创建 script 之前执行,如果返回 ture,则认为 UEditor 资源已存在,不会再创建 script。通常你不需要手动指定,组件内部已经实现了判断 ueditor.config.js 和 ueditor.all.min.js 是否加载过的默认检测函数。也就是说,如果你在网站的其他位置加载过 UEditor 的脚本,vue-ueditor-wrap 是不会重复加载的。
- 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;
}
更多推荐
已为社区贡献1条内容
所有评论(0)