第一步下載組件

npm install vue-quill-editor 

第二步在需要使用的組件內引入· 富文本組件

import { quillEditor } from 'vue-quill-editor'

同時引入相關css

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

因為是個組件所以要注冊才能使用

components: {
    quillEditor
  }

放到視圖容器中

<quill-editor ref="text" v-model="content" class="myQuillEditor" :options="editorOption" />
<el-button type="primary" @click="submit">提交</el-button>

基本配置

data () {
  return {
    content: '',
    editorOption: {} 
  }
},
methods: {
  submit () {
    console.log(this.$refs.text.value)
  }
}
// editorOption里是放圖片上傳配置參數用的，例如：
// action:  '/api/product/richtext_img_upload.do',  // 必填參數 圖片上傳地址
// methods: 'post',  // 必填參數 圖片上傳方式
// token: '',  // 可選參數 如果需要token驗證，假設你的token有存放在sessionStorage
// name: 'upload_file',  // 必填參數 文件的參數名
// size: 500,  // 可選參數   圖片大小，單位為Kb, 1M = 1024Kb
// accept: 'multipart/form-data, image/png, image/gif, image/jpeg, image/bmp, image/x-icon,image/jpg'  // 可選 可上傳的圖片格式

一切準備完成以后點擊提交按鈕就可以看見自己在富文本輸入的內容啦~~

富文本大小可以根據父元素調整

控制臺打印出來的圖片

到這里就分享完咯，小伙伴們有更好用，更方便的富文本可以推薦一下呦~~