vue3.0 + ueditor

公司有個需求，須要作個發送郵件的模版（富文本對於模版的擴展性更好吧）

 

關於富文本，也找了一些好看且支持vue的，可是功能都沒有百度全面

 

反正這個系統也是本身人用，顏值無所謂了

 

關於vue2.0+ueditor 有須要的能夠看原文：http://www.javashuo.com/article/p-yovkzqhh-dh.html

注：我是參考的這個配的vue3.0+ueditor

第一步：下載Ueditor相關靜態文件

 

在下載的同時，不要讓小手閒着，安裝vue-ueditor-wrap

npm i vue-ueditor-wrap -D

 

第二步：修改ueditor並引入項目

下載下來的ueditor包，解壓以後，名稱是帶着版本號的，爲了看上去簡潔一些，能夠改爲本身看上去順眼的名字，好比UEditor

 

將解壓完並順利改完名字的UEditor文件，直接丟到我們項目的public文件中

 

注：本項目是針對vue-cli3.0來講的，配置的時候和vue-cli2.0略有不一樣

vue3.0中，沒有static文件，可是存在public，全部我們將UEditor放到public中

 

第三步：進入vue項目配置

到了這一步，已經成功了50%

 

如今高潮來了哦

 

將vue-ueditor-wrap引入你要使用的組件或頁面中

 

一、import VueUeditorWrap from 'vue-ueditor-wrap'

不要忘記註冊組件

二、components: {

  VueUeditorWrap

}

 

頁面調用：

三、<vue-ueditor-wrap v-model="value" :config="myConfig"></vue-ueditor-wrap>

 

config爲調用vue-ueditor-wrap的配置項，在頁面中單獨設置的獨立配置

data () {
  return {
    value: '這是我調用vue-ueditor-wrap的案例',
    myConfig: {
      // 編輯器不自動被內容撐高
      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/'
    }
  }
}

　　

同時修改UEditor中的配置文件ueditor.config.js中的UEDITOR_HOME_URL

 

 

 

到這裏，若是沒什麼疑難雜症出現的話，打開頁面，毫無疑問你應該可以看到blingbling的富文本啦

 

圖片上傳功能須要後端配合配置，咱們還沒到這一步，到等了再來續更

若是有別的問題，請自行百度 哈哈哈

 

原文出處：https://www.cnblogs.com/tongjiaojiao/p/11737197.html