vue3.0 + ueditor

  • 2019 年 10 月 25 日
  • 筆記

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

 

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

 

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

 

關於vue2.0+ueditor 有需要的可以看原文：https://juejin.im/post/5c6e78f95188252f30483be3

註：我是參考的這個配的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引入你要使用的組件或頁面中

 

1、import VueUeditorWrap from ‘vue-ueditor-wrap‘

不要忘記註冊組件

2、components: {
  VueUeditorWrap
}
 
頁面調用：
3、<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的富文本啦
 

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

如果有別的問題，請自行百度 哈哈哈

 

VirMach 便宜 VPS

QNews

QNews