Vue中部署百度富文本编辑器UEditor及其自带的后端,并加入秀米插件
导语
本文使用vue-ueditor-wrap插件将UEditor编辑器嵌入Vue中,实践过程中颇多曲折,以下错误和解决方案都是个人摸索的经历,谨慎模仿。
vue-ueditor-wrap的github地址
Ueditor官方文档
秀米插件官方文档
部署UEditor前端部分
- 在项目中安装vue-ueditor-wrap:
npm i vue-ueditor-wrap -S
- 下载一个版本的UEditor源码,本文以utf8-jsp为例说明
- 解压下载的压缩包,并重命名为UEditor,放在项目的static目录下
- 在main.js文件中全局引入VueUeditorWrap组件并注册:
import VueUeditorWrap from 'vue-ueditor-wrap'
Vue.component('vue-ueditor-wrap', VueUeditorWrap)
- 在需要的页面中放入插件并进行配置:
<!--HTML部分,(将编辑器的文本双向绑定到this.msg上--> <vue-ueditor-wrap v-model="msg" :config="myConfig"></vue-ueditor-wrap>
//JS部分 data () { return { //测试文字 msg: