1. 第一步，安裝
npm i vue-quill-editor -S
npm i quill -S
2. 在組件中使用
<quill-editor v-model="content" ref="myQuillEditor" :options="editorOption"></quill-editor>
// script
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css' // 這個CSS必須引入
import 'quill/dist/quill.snow.css' // 主題CSS
const defaultContent = `默認內(nèi)容`
const toolbarOptions = [
['bold', 'underline', 'strike'], // 加粗锉桑，斜體糠睡，下劃線消恍，刪除線
[{ header: 1 }, { header: 2 }], // 標題砂吞，鍵值對的形式预茄；1铃将、2表示字體大小
[{ color: [] }], // 字體顏色项鬼，字體背景顏色
[{ size: ['small', false, 'large', 'huge'] }] // 字體大小
]
data () {
return {
editorOption: {
modules: {
toolbar: toolbarOptions
},
placeholder: '請輸入內(nèi)容'
},
}
}
富文本框默認只有一行的高度，可以通過深度選擇器設置富文本框的樣式（less的語法是 /deep/）
/deep/ .ql-container {
max-width: 1000px;
height: 360px;
.ql-editor {
max-width: 1000px;
}
}
/deep/ .ql-toolbar {
max-width: 1000px;
}
