基於webpack和vue

一、npm 安裝 vue-quill-editor
二、在main.js中引入

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>
     <quill-editor
 
 
      v-model="content" 
      ref="myQuillEditor" 
      :options="editorOption" 
      @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
      @change="onEditorChange($event)">
    </quill-editor>
</template> 
<script>
    import { quillEditor } from 'vue-quill-editor'
 

    export default{
        data(){
            return {
                content:null,
                editorOption:{}
            }
        },
        methods:{
            onEditorBlur(){//失去焦點事件
            },
            onEditorFocus(){//獲得焦點事件
            },
            onEditorChange(){//內容改變事件
            }
        }
    }
 
</script>   

這樣引入後你會得到這樣一個編輯器
那麼你如果不需要那麼多的工具欄功能要怎麼辦呢；應該是通過options來修改但是他的預設值是什麼的
我在百度找了一圈也沒找到方法
最後在https://quilljs.com/docs/themes/這個官方文件裡面看到了類似的方法

初始值的設定應該是一樣的吧
所以我就照著toolbar部分去修改了options

<script>
    import { quillEditor } from 'vue-quill-editor'
    export default{
        data(){
            return {
                content:null,
                editorOption:{
                    modules:{
                        toolbar:[
                          ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
                           ['blockquote', 'code-block']
                        ]
                    }
                }
            }
        },
        methods:{
            onEditorBlur(){//失去焦點事件
            },
            onEditorFocus(){//獲得焦點事件
            },
            onEditorChange(){//內容改變事件
            }
        }
    }
</script>   

果然 生效了 只顯示了我寫在toolbar裡面的模組

那麼toolbar工具欄對應功能的模組名是什麼呢 我繼續往下看文件 發現大致上有以下的功能

背景顏色 - background
加粗- bold
顏色 - color
字型 - font
內聯程式碼 - code
斜體 - italic
連結 - link
大小 - size
刪除線 - strike
上標/下標 - script
下劃線 - underline
引用- blockquote
標題 - header
縮排 - indent
列表 - list
文字對齊 - align
文字方向 - direction
程式碼塊 - code-block
公式 - formula
圖片 - image
視訊 - video
清除字型樣式- clean

然而我試著直接引入發現有部分的圖示並沒有顯示；
然後我發現他有些如list這種列表應該是有預設值，我在很後面的文件裡發現了這個預設格式規範 這個官方文件也是個坑 內容不寫到一塊的 還好我聰明機智；

大致上分為這幾類：

1.只需要填寫功能名的
加粗 - bold；
斜體 - italic
下劃線 - underline
刪除線 - strike
引用- blockquote
程式碼塊 - code-block
公式 - formula
圖片 - image
視訊 - video
清除字型樣式- clean
這一類的引用 直接['name','name']這種格式就好了

2.需要有預設值的
標題 - header  
[{ 'header': 1 }, { 'header': 2 }] 值字型大小

列表 - list 
[{ 'list': 'ordered'}, { 'list': 'bullet' }], 值ordered，bullet

上標/下標 - script 
 [{ 'script': 'sub'}, { 'script': 'super' }],  值sub，super

縮排 - indent
[{ 'indent': '-1'}, { 'indent': '+1' }], 值-1，+1等

文字方向 - direction
[{ 'direction': 'rtl' }],    值rtl

這部分如圖所示會填寫的內容對應提供的值展示功能的圖示 如果多個值他家就顯示多個圖示

3.有多個值 以下拉列表形式顯示

大小 - size
 [{ 'size': ['small', false, 'large', 'huge'] }],  

標題 - header
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],

這部分顯示如圖所示 以下拉列形式顯示

4.有系統預設值的功能只需填寫一個空陣列 就會有出現預設的選項
顏色 - color
背景顏色 - background
字型 - font
文字對齊 - align
他們的格式都是
[{ 'color': [] }, { 'background': [] }], 
[{ 'font': [] }],
[{ 'align': [] }]
這種格式

效果如下 會有預設值出現

toolbar自定義工具欄就是這樣咯 剩下的就是根據填寫功能到options的modules裡就可以了