步驟1：使用npm 安裝vue-quill-editor
npm install vue-quill-editor --save
當(dāng)前安裝的的版本是 "vue-quill-editor": "^3.0.6"
該插件是基于 Quill涕侈、適用于 Vue 的富文本編輯器，支持服務(wù)端渲染和單頁(yè)應(yīng)用。故在安裝vue-quill-editor的同時(shí)也按照了Qill模塊钟些，可以在node_modules文件夾中進(jìn)行查看
vue-quill-editor 文檔： vue-quill-editor docs link
Qill api文檔： Qill api docs link
步驟2：局部引入組件
<template>
<div class="section-editor">
<quillEditor v-model="content" ref="vueQuillEditor" :options="editorOption"
@blur="onEditorBlur($event)" @focus="onEditorFocus($event)"@change="onEditorChange($event)">
</quillEditor>
</div>
</template>
<script>
import { quillEditor } from "vue-quill-editor"; //調(diào)用編輯器
// 引入樣式饿肺，此時(shí)樣式是直接從quill文件中直接引入
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
export default {
name: 'editor',
components: { quillEditor },
data() {
return {
content: null,
editorOption: {}
}
},
methods: {
onEditorBlur(){}, // 失去焦點(diǎn)事件
onEditorFocus(){}, // 獲得焦點(diǎn)事件
onEditorChange(){}, // 內(nèi)容改變事件
},
computed: {
editor() {
return this.$refs.vueQuillEditor.quill;
}
}
}
</script>
全局引入【在main.js文件中】
import QuillEditor from "vue-quill-editor";
// 引入樣式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Vue.use(QuillEditor)
//調(diào)用
<quill-editor v-model="content" ref="vueQuillEditor" :options="editorOption"
@blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)"> </quill-editor>
定義工具欄：【法一】通過(guò)options傳值,下列配置為插件默認(rèn)值：
editorOption: {
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']
]
}
}
【法二】根據(jù)id自己定義工具欄內(nèi)容
editorOption: {
modules: {
toolbar: '#toolbar'
}
}
工具欄插槽如下：
<quill-editor v-model="content" ref="vueQuillEditor" :options="editorOption"
@blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)">
<div id="toolbar" slot="toolbar">
<!-- Add a bold button -->
<button class="ql-bold">Bold</button>
<button class="ql-italic">Italic</button>
<!-- Add font size dropdown -->
<select class="ql-size">
<option value="small"></option>
<!-- Note a missing, thus falsy value, is used to reset to default -->
<option selected></option>
<option value="large"></option>
<option value="huge"></option>
</select>
<select class="ql-font">
<option selected="selected"></option>
<option value="serif"></option>
<option value="monospace"></option>
</select>
<!-- Add subscript and superscript buttons -->
<button class="ql-script" value="sub"></button>
<button class="ql-script" value="super"></button>
<!-- You can also add your own -->
<button id="custom-button" >[ Click me ]</button>
</div>
</quill-editor>
小棨留言：文章描述或者語(yǔ)法理解不到位的地方，請(qǐng)大家多多指教卷中！
