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


效果图如下所示

VUE快速简单搭建UEditor富文本编辑器_第1张图片

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 目录下。

VUE快速简单搭建UEditor富文本编辑器_第2张图片


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

main.js

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

v-model绑定数据



 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


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

你可能感兴趣的:(VUE)