快捷導(dǎo)航

vue-quill-editor富文本使用及說(shuō)明

更新時(shí)間：2026年05月14日 11:09:25 作者：等....

文章主要講述了如何準(zhǔn)備CSS文件用于自定義富文本樣式,并將其放置在指定目錄,同時(shí)強(qiáng)調(diào)了這是個(gè)人經(jīng)驗(yàn)總結(jié),供參考并鼓勵(lì)支持站點(diǎn)

一、準(zhǔn)備css文件

用于自定義富文本樣式(我的放到了assets/css/quillEditor)

.ql-snow .ql-picker {
    height: none !important;
}
/* 行高 */
.ql-picker-options {
    line-height: 1.5;
}
/* 標(biāo)題 */
.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
    content: "標(biāo)準(zhǔn)字體";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
    content: "標(biāo)題1";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
    content: "標(biāo)題2";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
    content: "標(biāo)題3";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
    content: "標(biāo)題4";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
    content: "標(biāo)題5";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
    content: "標(biāo)題6";
}
/* 字體 */
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=SimHei]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=SimHei]::before {
    content: "黑體";
    font-family: "SimHei";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Microsoft-YaHei]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Microsoft-YaHei]::before {
    content: "微軟雅黑";
    font-family: "Microsoft YaHei";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=KaiTi]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=KaiTi]::before {
    content: "楷體";
    font-family: "KaiTi";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=FangSong]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=FangSong]::before {
    content: "仿宋";
    font-family: "FangSong";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Arial]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Arial]::before {
    content: "Arial";
    font-family: "Arial";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Times-New-Roman]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Times-New-Roman]::before {
    content: "Times New Roman";
    font-family: "Times New Roman";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=sans-serif]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=sans-serif]::before {
    content: "sans-serif";
    font-family: "sans-serif";
}
.ql-font-SimSun {
    font-family: "SimSun";
}
.ql-font-SimHei {
    font-family: "SimHei";
}
.ql-font-Microsoft-YaHei {
    font-family: "Microsoft YaHei";
}
.ql-font-KaiTi {
    font-family: "KaiTi";
}
.ql-font-FangSong {
    font-family: "FangSong";
}
.ql-font-Arial {
    font-family: "Arial";
}
.ql-font-Times-New-Roman {
    font-family: "Times New Roman";
}
.ql-font-sans-serif {
    font-family: "sans-serif";
}
/* 字號(hào)設(shè)置 */
/* 默認(rèn)字號(hào) */
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
    content: "14px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="14px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before {
    content: "14px";
    font-size: 14px;
}
.ql-size-14px {
    font-size: 14px;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before {
    content: "16px";
    font-size: 16px;
}
.ql-size-16px {
    font-size: 16px;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before {
    content: "18px";
    font-size: 18px;
}
.ql-size-18px {
    font-size: 18px;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before {
    content: "20px";
    font-size: 20px;
}
.ql-size-20px {
    font-size: 20px;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="22px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="22px"]::before {
    content: "22px";
    font-size: 22px;
}
.ql-size-22px {
    font-size: 22px;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="26px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="26px"]::before {
    content: "26px";
    font-size: 26px;
}
.ql-size-26px {
    font-size: 26px;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="28px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="28px"]::before {
    content: "28px";
    font-size: 28px;
}
.ql-size-28px {
    font-size: 28px;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="30px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="30px"]::before {
    content: "30px";
    font-size: 30px;
}
.ql-size-30px {
    font-size: 30px;
}

二、在頁(yè)面里使用

<template>
	<div class="editor-box" style="line-height: 0;">
		<!-- 圖片上傳組件輔助-->
        <el-upload
            action="#"
            class="upload-img"
            v-show="false"
            :http-request="httpRequest">
        </el-upload>
 		<quill-editor
    		v-model="formObj.content"
    		ref="myQuillEditor"
    		:options="editorOption"
    		@blur="onEditorBlur($event)"
      		@focus="onEditorFocus($event)"
      		@change="onEditorChange($event)">
    	</quill-editor>
	</div> 
</template>
<script>
// 引入vue-quill-editor富文本
import { quillEditor } from 'vue-quill-editor'
// 引入vue-quill-editor富文本css樣式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
// 引入自定義富文本樣式
import '@/assets/css/quillEditor.css'
// 將css注冊(cè)到quill-editor中
import * as Quill from 'quill'

// 自定義鼠標(biāo)停留按鈕提示的交互
const titleConfig = {
    'ql-bold': '加粗',
    'ql-color': '顏色',
    'ql-font': '字體',
    'ql-code': '插入代碼',
    'ql-italic': '斜體',
    'ql-link': '添加鏈接',
    'ql-background': '背景顏色',
    'ql-size': '字體大小',
    'ql-strike': '刪除線(xiàn)',
    'ql-script': '上標(biāo)/下標(biāo)',
    'ql-underline': '下劃線(xiàn)',
    'ql-blockquote': '引用',
    'ql-header': '標(biāo)題',
    'ql-indent': '縮進(jìn)',
    'ql-list': '列表',
    'ql-align': '文本對(duì)齊',
    'ql-direction': '文本方向',
    'ql-code-block': '代碼塊',
    'ql-formula': '公式',
    'ql-image': '圖片',
    'ql-video': '視頻',
    'ql-clean': '清除字體樣式'
}
// 自定義的字體，注意下面的內(nèi)容要和css里面對(duì)應(yīng)上
var fonts = [
    'SimSun',
    'SimHei',
    'Microsoft-YaHei',
    'KaiTi',
    'FangSong',
    'Arial',
    'Times-New-Roman',
    'sans-serif'
]
// 自定義字號(hào)的大小，注意下面的內(nèi)容要和css里面對(duì)應(yīng)上
var sizes = [false, '16px', '18px', '20px', '22px', '26px', '28px', '30px']
//注冊(cè)css自定義樣式
var Size = Quill.import('formats/size')
Size.whitelist = sizes
var Font = Quill.import('formats/font')
Font.whitelist = fonts // 將字體加入到白名單
Quill.register(Font, true)

// 工具欄配置
const toolbarOptions = [
    ['bold', 'italic', 'underline', 'strike'], // 加粗 斜體 下劃線(xiàn) 刪除線(xiàn) -----['bold', 'italic', 'underline', 'strike']
    ['blockquote', 'code-block'], // 引用  代碼塊-----['blockquote', 'code-block']
    [{ header: 1 }, { header: 2 }], // 1、2 級(jí)標(biāo)題-----[{ header: 1 }, { header: 2 }]
    [{ list: 'ordered' }, { list: 'bullet' }], // 有序、無(wú)序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
    [{ script: 'sub' }, { script: 'super' }], // 上標(biāo)/下標(biāo)-----[{ script: 'sub' }, { script: 'super' }]
    [{ indent: '-1' }, { indent: '+1' }], // 縮進(jìn)-----[{ indent: '-1' }, { indent: '+1' }]
    [{ 'direction': 'rtl' }], // 文本方向-----[{'direction': 'rtl'}]
    [{ size: sizes }], // 字體大小-----[{ size: ['small', false, 'large', 'huge'] }]
    [{ header: [1, 2, 3, 4, 5, 6, false] }], // 標(biāo)題-----[{ header: [1, 2, 3, 4, 5, 6, false] }]
    [{ color: [] }, { background: [] }], // 字體顏色、字體背景顏色-----[{ color: [] }, { background: [] }]
    [{ font: fonts }], // 字體種類(lèi)-----[{ font: [] }]
    [{ align: [] }], // 對(duì)齊方式-----[{ align: [] }]
    ['clean'] // 清除文本格式-----['clean']
    ['link', 'image'] // 鏈接、圖片、視頻-----['link', 'image', 'video']
]

export default {
	//注冊(cè)富文本組件
	components: { quillEditor },
	data () {
		formObj：{content:''}//富文本綁定的值
		//定義富文本組件功能
		editorOption: {
                placeholder: '您想說(shuō)點(diǎn)什么？',
                theme: 'snow',
                modules: {
                    toolbar: {
                        container: toolbarOptions, // 工具欄
                        handlers: {
                            image: function (value) {
                                if (value) {
                                    // 調(diào)用element的圖片上傳組件
                                    document.querySelector('.upload-img input').click()
                                } else {
                                    this.quill.format('image', false)
                                }
                            }
                        }
                    }
                }
            }
	},
	mounted () {
        this.addQuillTitle()
    },
	methods: {
		onEditorBlur() {
	      //失去焦點(diǎn)事件
	    },
	    onEditorFocus() {
	      //獲得焦點(diǎn)事件
	    },
	    onEditorChange() {
	      //內(nèi)容改變事件
	      this.$emit("input", this.content);
	    },
	    // 圖片格式轉(zhuǎn)換為base64
	    getBase64 (file) {
            return new Promise((resolve, reject) => {
                const reader = new FileReader()
                reader.readAsDataURL(file)
                reader.onload = () => resolve(reader.result)
                reader.onerror = error => reject(error)
            })
        },
	    //上傳圖片，httpequest覆蓋默認(rèn)的上傳行為，可以自定義上傳的實(shí)現(xiàn)
	    async httpRequest ({ file }) {
            let img = await this.getBase64(file)
            // 調(diào)用后端給的接口上傳圖片
            getUploadFilesImg({ imgbase64: img }).then((res) => {
                // 獲取富文本組件實(shí)例
                let quill = this.$refs.myQuillEditor.quill
                // 獲取光標(biāo)所在位置
                let length = quill.getSelection().index
                // 插入圖片，res為服務(wù)器返回的圖片鏈接地址
                quill.insertEmbed(length, 'image', res.path)
                // 調(diào)整光標(biāo)到最后
                quill.setSelection(length + 1)
            }).catch((err) => {
                console.log(err)
            })
        }
		//定義鼠標(biāo)停留按鈕提示事件，在mounted里調(diào)用
		addQuillTitle () {
            const oToolBar = document.querySelector('.ql-toolbar')
            const aButton = oToolBar.querySelectorAll('button')
            const aSelect = oToolBar.querySelectorAll('select')
            aButton.forEach(function (item) {
                if (item.className === 'ql-script') {
                    item.value === 'sub' ? item.title = '下標(biāo)' : item.title = '上標(biāo)'
                } else if (item.className === 'ql-indent') {
                    item.value === '+1' ? item.title = '向右縮進(jìn)' : item.title = '向左縮進(jìn)'
                } else {
                    item.title = titleConfig[item.classList[0]]
                }
            })
            aSelect.forEach(function (item) {
                item.parentNode.title = titleConfig[item.classList[0]]
            })
        }
	}
}
</script>
<style lang="less" scoped>
// 定義富文本高度
/deep/ .ql-container.ql-snow{
    height: 400px;
}
</style>