Vue集成ueditor
- 封装组件
说明：绿色部分 1.为每个模块js配置appid、appkey、token及文件预览地址，文件上传成功后只返回UUID！获取config配置文件接口地址
- 引用
config: {
autoHeightEnabled: false,
elementPathEnabled: false,
wordCount: false,
initialFrameWidth: null,
initialFrameHeight: 320,
toolbars: [this.global.UE_TOOL_BAR]
},
- 多图片上传
修改dialogs\image\image.js
1.将消息头X_Requested_With改为x-requested-with，目的是与项目进行统一
2.添加消息头 App-Key、App-Id、Access-Token，目的是后台文件上传接口需要登录并且验证App-Id与App-Key
注：第1、2条修改位置为uploader.on('uploadBeforeSend'......
3.由于文件上传接口统一返回指定格式，因此需要修改上传成功后解析文件，修改如下：
位置：uploader.on('uploadSuccess'......
var fileViewServer=editor.options.chishipConfig.fileViewServer
if (json.success) {
_this.imageList.push({
url:fileViewServer.replace("{UUID}",json.data.uuid),
title:json.data.originalName,
original:json.data.originalName
});
console.log(_this.imageList)
$file.append('');
} else {
$file.find('.error').text((json.data ? json.data : json.message)).show();
}
红线是改动的地方，chishipConfig.fileViewServer是组件封装传递的，前面有介绍！
- 附件上传
去掉在线附件：dialogs\attachment\attachment.html
注释
修改dialogs\attachment\attachment.js
1.将消息头X_Requested_With改为x-requested-with，目的是与项目进行统一
2.添加消息头 App-Key、App-Id、Access-Token，目的是后台文件上传接口需要登录并且验证App-Id与App-Key
注：第1、2条修改位置为uploader.on('uploadBeforeSend'......
3.由于文件上传接口统一返回指定格式，因此需要修改上传成功后解析文件，修改如下：
位置：uploader.on('uploadSuccess'......
var fileViewServer=editor.options.chishipConfig.fileViewServer
if (json.success) {
_this.fileList.push({
url:fileViewServer.replace("{UUID}",json.data.uuid),
title:json.data.originalName,
original:json.data.originalName
});
console.log(_this.fileList)
$file.append('');
} else {
$file.find('.error').text((json.data ? json.data : json.message)).show();
}
红线是改动的地方，chishipConfig.fileViewServer是组件封装传递的，前面有介绍！
3.改动重组fileList方法
位置：getInsertList(......
title: data.original, 此属性直接获取原标题即可，不需要截断代码!
4.修改插入成功，回显问题
位置：ueditor.all.js
UE.plugin.register('insertfile',
增加'xlsx': 'icon_xls.gif',
由于回显，ue本身向数组多添加了一个，所以删除数组多余的一个，filelist=filelist.slice(0,1)
Icon改为通过title截取icon = iconDir + getFileIcon(item.title)
- 视频上传
修改dialogs\video\video.js
1.将消息头X_Requested_With改为x-requested-with，目的是与项目进行统一
2.添加消息头 App-Key、App-Id、Access-Token，目的是后台文件上传接口需要登录并且验证App-Id与App-Key
注：第1、2条修改位置为uploader.on('uploadBeforeSend'......
3.由于文件上传接口统一返回指定格式，因此需要修改上传成功后解析文件，修改如下：
位置：uploader.on('uploadSuccess'......
var fileViewServer=editor.options.chishipConfig.fileViewServer
if (json.success) {
_this.uploadVideoList.push({
url:fileViewServer.replace("{UUID}",json.data.uuid),
Type:’video’,
original:json.data.originalName
});
$file.append('');
} else {
$file.find('.error').text((json.data ? json.data : json.message)).show();
}
红线是改动的地方，chishipConfig.fileViewServer是组件封装传递的，前面有介绍！
- 涂鸦上传
修改dialogs\scrawl\scrawl.js
// 执行确认按钮方法
function exec(scrawlObj) {
if (scrawlObj.isScrawl) {
addMaskLayer(lang.scrawlUpLoading)
var base64 = scrawlObj.getCanvasData()
if (base64) {
var chishipConfig = editor.options.chishipConfig
var options = {
timeout: 100000,
setRequestHeader: chishipConfig.headers,
......
onerror: function() {
alert(lang.imageError)
dialog.close()
}
}
options.data = {
base64: 'data:image/png;base64,' + base64 }
红色下划线为修改内容
修改static\ueditor\ueditor.all.js 8168行
if (method == 'POST') {
const header = ajaxOptions.setRequestHeader
const keys = Object.keys(header)
for (let i = 0; i < keys.length; i++) {
const key = keys[i]
const value = header[key]
xhr.setRequestHeader(key, value)
}
// application/x-www-form-urlencoded;charset=UTF-8;
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=UTF-8')
xhr.send(submitStr)
红色下划线为修改内容