VUE快速简单搭建UEditor富文本编辑器

效果图如下所示

Installation

npm i vue-ueditor-wrap

下载 UEditor
官网链接: http://ueditor.baidu.com/website/download.html
我的链接: https://pan.baidu.com/s/1zA9RgdeMjMQNSPygWq8Vaw 提取码: qjds

将下载的压缩包解压并重命名为 UEditor,放入你项目的 static 目录下，如果你使用的是 vue-cli 3.x，可以把 UEditor 文件夹放入项目的 public 目录下。

引入VueUeditorWrap组件,注册为全局组件

main.js

import VueUeditorWrap from 'vue-ueditor-wrap'
Vue.component('vue-ueditor-wrap', VueUeditorWrap)

v-model绑定数据

<vue-ueditor-wrap style="width:55%;" v-model="value"></vue-ueditor-wrap>

 data() {
      return {
       value:'',
       myConfig: {
         autoHeightEnabled: false,
         initialFrameHeight: 200,
         initialFrameWidth: '100%',
         UEDITOR_HOME_URL: '/UEditor/',
         serverUrl: 'http://35.201.165.105:8000/controller.php'
       },
      }
  }

//获取编辑器数据直接 this.value

微信小程序富文本解析: https://blog.csdn.net/qq_43764578/article/details/100130611

对你有帮助的话记得收藏点赞，有什么问题欢迎评论留言。