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

對你有幫助的話記得收藏點贊，有什麼問題歡迎評論留言。