在vue中使用ueditor(上传图片)
程序员文章站
2022-05-26 17:55:03
...
下载ueditor源码
下载地址:http://ueditor.baidu.com/website/download.html,这里使用的是jsp utf-8版本,下载完以后解压,把文件夹名字改为UEditor。如果是vue-cli2构建的项目,把UEditor文件夹放在static文件夹下,如果是vue-cli3构建的项目就放在public文件夹下。
安装vue-ueditor-wrap
vue-ueditor-wrap插件可以让ueditor使用v-model实现数据双向绑定。
npm i vue-ueditor-wrap
使用vue-ueditor-wrap
// 在要使用ueditor编辑器页面引用组件
import VueUeditorWrap from 'vue-ueditor-wrap'
// 注册组件
components: { VueUeditorWrap }
// 使用组件
<vue-ueditor-wrap v-model="content"></vue-ueditor-wrap>
配置
此处需要后台配合提供配置文件的请求接口,并且后台提供的配置文件也需要修改,修改的内容与前端相似
在要使用ueditor的vue文件中
// html:
<vue-ueditor-wrap v-model="content" :config=”myConfig” @ready=”ueditorReady”></vue-ueditor-wrap>
// js:
data () {
return {
myConfig: {
toolbars: [], // 菜单
serverUrl: 'xxx', // 请求配置文件的接口
UEDITOR_HOME_URL: ‘/UEditor/’ // UEditor资源存放路径,最好根据环境来判断路径
…… // 同ueditor官网介绍的配置
}
}
},
methods: {
// 此方法用来处理上传图片
ueditorReady: function (editorInstance) {
let UE = editorInstance;
UE._bkGetActionUrl = UE.getActionUrl;
UE.getActionUrl = function(action) {
if (action === 'uploadUeFile'){
// 替换原有的上传路径,包括图片上传视频上传等
return '/xxx/uploadUeFile'; // 上传接口路径
} else if (action === 'config') {
// 获取config配置文件
return 'xxx'; //获取配置文件接口路径
} else {
return this._bkGetActionUrl.call(this,action);
}
}
}
}
在ueditor.config.js中
在vue-cli2中可以使用env的值来判断环境,但是在vue-cli3中的public文件夹下的js文件是获取不到env值的,只能用其他方式来判断环境。
let locationHost = window.location.host;
if (locationHost.indexOf('测试环境域名关键字') > -1) { // 测试环境
window.UEDITOR_HOME_URL = "http://域名/项目名/UEditor/";
} else if (locationHost.indexOf('线上环境域名关键字') > -1) { // 线上环境
window.UEDITOR_HOME_URL = " http://域名/项目名/UEditor/";
} else { // 开发环境
window.UEDITOR_HOME_URL = "/public/UEditor/";
}
var URL = window.UEDITOR_HOME_URL || getUEBasePath();
window.UEDITOR_CONFIG = {
//为编辑器实例添加一个路径,这个不能被注释
UEDITOR_HOME_URL: URL
// 服务器统一请求接口路径
, serverUrl: "xxx" // 获取配置文件接口路径
……
}