首先先給大家看下效果圖：
效果圖.png
1、下載依賴：
npm i vue-quill-edito -D
2概作、引入包文件：
<script>
//引入樣式依賴
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
//引入組件
import { quillEditor } from 'vue-quill-editor'
</script>
3腋妙、注冊(cè)組件：
<script>
export default {
components: {
quillEditor
},
}
</script>
4、使用：
<template>
<!-- 富文本展示 -->
<quill-editor>
ref="myQuillEditor"
@change="onEditorChangeHandle" <!-- 內(nèi)容改變事件 -->
v-model='quillData' <!-- 雙向綁定的值讯榕，可以拿到富文本的內(nèi)容骤素，為 html 字符串-->
:options="editorOption" <!-- 富文本相關(guān)配置 -->
@blur="onEditorBlurHandle($event)" <!-- 獲得焦點(diǎn)事件 -->
@focus="onEditorFocusHandle($event)" <!-- 失去焦點(diǎn)事件 -->
@ready="onEditorReadyHandle($event)"> <!-- 富文本初始化完成事件 -->
</quill-editor>
</template>
5、配置參數(shù)以及對(duì)應(yīng)的方法：
<script>
// 富文本工具欄配置
const toolbarOptions = [
["bold", "italic", "underline", "strike"], // 加粗 斜體 下劃線 刪除線
["blockquote", "code-block"], // 引用 代碼塊
[{ header: 1 }, { header: 2 }], // 1瘩扼、2 級(jí)標(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: [] }], // 對(duì)齊方式
["clean"], // 清除文本格式
["link", "image", "video"] // 鏈接集绰、圖片、視頻
];
export default {
data() {
return {
//富文本內(nèi)容
quillData:'',
//富文本配置
editorOption:{
placeholder: "請(qǐng)輸入內(nèi)容", //同 input 的 placeholder 屬性一致
modules:{
toolbar:toolbarOptions //富文本工具欄配置
}
},
},
methods:{
//失去焦點(diǎn)事件
onEditorBlurHandle(){
},
//獲得焦點(diǎn)事件
onEditorFocusHandle(){
},
//內(nèi)容改變事件
onEditorChangeHandle(){
},
//初始化完成事件
onEditorReadyHandle(){
}
}
}
</script>
歡迎指教~~~
