在我们开发过程中或多或少会遇到需要富文本的功能,富文本编辑器其实也很多,但是我们常用的就是那么几个,比如百度UEditor富文本编辑器,这个使用起来也方便,功能也很完善。但是总有那么一点吊胃口,在vue项目中使用的话很难配置,我们今天就来讲讲怎么配置。首先我们去下载【vue-ueditor-wrap】这个插件。然后下载成功了去项目的node_modules文件夹里找到vue-ueditor-wrap文件夹,在找到vue-ueditor-wrap.min.js这个文件,搜索UEDITOR_HOME_URL修改为【UEDITOR_HOME_URL:”./UEditor/“】,这样就不用了配置什么开发路径正式路径了,接着再去修改一下vue-ueditor-wrap-》src-》components-》vue-ueditor-wrap.vue文件中大概17左右,注释掉部分代码,如:
data () {
return {
status: 0,
initValue: '',
defaultConfig: {
// VUE CLI 3 会添加 process.env.BASE_URL 的环境变量,而 VUE CLI 2 没有,所以借此设置 UEDITOR_HOME_URL,能涵盖大部分 Vue 开发者的使用场景
// UEDITOR_HOME_URL: process.env.BASE_URL ? process.env.BASE_URL + '/UEditor/' : '/xhd_admin/dist/UEditor/',
enableAutoSave: false
}
};
这样弄就好了。还有就是百度富文本还是要下载哦,不能只下vue-ueditor-wrap,下载了百度UEditor解压后放到项目的public文件夹下就好了。
使用方法:
<vue-ueditor-wrap v-model="msg" :config="config" />
import VueUeditorWrap from "vue-ueditor-wrap";
data(){
return{
config: {
// 编辑器不自动被内容撑高
autoHeightEnabled: false,
// 初始容器高度
initialFrameHeight: 240,
// 初始容器宽度
initialFrameWidth: "100%",
// 上传文件接口(这个地址是我为了方便各位体验文件上传功能搭建的临时接口,请勿在生产环境使用!!!)
serverUrl: "http://35.201.165.105:8000/controller.php",
// UEditor 资源文件的存放路径,如果你使用的是 vue-cli 生成的项目,通常不需要设置该选项,vue-ueditor-wrap 会自动处理常见的情况,如果需要特殊配置,参考下方的常见问题2
UEDITOR_HOME_URL: "./UEditor/",
zIndex: 3500,//层级
},
}
}
到了这里就可以使用了。