vue-quill-editor 簡單使用方法和注意事項

先安裝組件

npm install vue-quill-editor

npm install quill

全局引入

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

或局部引入

import { quillEditor } from "vue-quill-editor";
// 導入富文本編輯器樣式
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import Quill from "quill";

//組件引入部分

components: {

    quillEditor,

  },

使用樣例

<quill-editor
          style="height:490px;width:100%;"
          v-model="html"
          ref="richAnalysis"
          :options="options"
        ></quill-editor>

符文編輯框的背景色和初始字體好像需要自己設置,theme的主題設置就有snow和bubble,用來控制是否顯示工具欄的,

 

 

配置

options: {
        theme: "snow",
        placeholder: "請輸入內容",
        modules: {
          toolbar: [
            ["bold", "italic", "underline", "strike"], // 加粗，斜體，下划線，刪除線
            //['blockquote', 'code-block'],                      //引用，代碼塊
            [{ header: 1 }, { header: 2 }], // 幾級標題
            [{ list: "ordered" }, { list: "bullet" }], // 有序列表，無序列表
            [{ script: "sub" }, { script: "super" }], // 下角標，上角標
            [{ indent: "-1" }, { indent: "+1" }], // 縮進
            //[{ direction: "rtl" }], // 文字輸入方向
            [{ size: ["small", false, "large", "huge"] }], // 字體大小
            [{ header: [1, 2, 3, 4, 5, 6, false] }], // 標題
            [{ color: [] }, { background: [] }], // 顏色選擇
            [{ font: [] }], // 字體
            [{ align: [] }], // 居中
            ["clean"],　　　　//清除樣式
            [("link", "image","video")],//控制能上傳的內容
          ],
        },
      },