npm install vue-quill-editor --save

import Vue from 'vue';
import VueQuillEditor from 'vue-quill-editor';
// require styles
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
Vue.use(VueQuillEditor);

<template>
  <div>
    <quill-editor v-model="content" :options="editorOption"></quill-editor>
  </div>
</template>
<script>
export default {
  data() {
    return {
      content: '', // 富文本內(nèi)容
      editorOption: {} // 富文本編輯器配置
    };
  }
};
</script>

editorOption: {
  placeholder: '請輸入內(nèi)容',
  modules: {
    toolbar: [
      ['bold', 'italic', 'underline', 'strike'], // 加粗、斜體、下劃線、刪除線
      ['blockquote', 'code-block'], // 引用、代碼塊
      [{ header: 1 }, { header: 2 }], // 1、2級標(biāo)題
      [{ list: 'ordered' }, { list: 'bullet' }], // 有序、無序列表
      [{ script: 'sub' }, { script: 'super' }], // 上標(biāo)、下標(biāo)
      [{ indent: '-1' }, { indent: '+1' }], // 縮進(jìn)
      [{ direction: 'rtl' }], // 文本方向
      [{ size: ['small', false, 'large', 'huge'] }], // 字體大小
      [{ header: [1, 2, 3, 4, 5, 6, false] }], // 標(biāo)題
      [{ color: [] }, { background: [] }], // 字體顏色、背景顏色
      [{ font: [] }], // 字體
      [{ align: [] }], // 對齊方式
      ['clean'], // 清除文本格式
      ['link', 'image', 'video'] // 鏈接、圖片、視頻
    ]
  }
}