vue-quill-editor富文本使用及說明
更新時間：2026年05月14日 11:09:25 作者：等....
文章主要講述了如何準備CSS文件用于自定義富文本樣式,并將其放置在指定目錄,同時強調(diào)了這是個人經(jīng)驗總結(jié),供參考并鼓勵支持站點
一、準備css文件
用于自定義富文本樣式(我的放到了assets/css/quillEditor)
.ql-snow .ql-picker {
height: none !important;
}
/* 行高 */
.ql-picker-options {
line-height: 1.5;
}
/* 標題 */
.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
content: "標準字體";
}
.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: "標題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: "標題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: "標題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: "標題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: "標題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: "標題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";
}
/* 字號設(shè)置 */
/* 默認字號 */
.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;
}二、在頁面里使用
<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注冊到quill-editor中
import * as Quill from 'quill'
// 自定義鼠標停留按鈕提示的交互
const titleConfig = {
'ql-bold': '加粗',
'ql-color': '顏色',
'ql-font': '字體',
'ql-code': '插入代碼',
'ql-italic': '斜體',
'ql-link': '添加鏈接',
'ql-background': '背景顏色',
'ql-size': '字體大小',
'ql-strike': '刪除線',
'ql-script': '上標/下標',
'ql-underline': '下劃線',
'ql-blockquote': '引用',
'ql-header': '標題',
'ql-indent': '縮進',
'ql-list': '列表',
'ql-align': '文本對齊',
'ql-direction': '文本方向',
'ql-code-block': '代碼塊',
'ql-formula': '公式',
'ql-image': '圖片',
'ql-video': '視頻',
'ql-clean': '清除字體樣式'
}
// 自定義的字體，注意下面的內(nèi)容要和css里面對應(yīng)上
var fonts = [
'SimSun',
'SimHei',
'Microsoft-YaHei',
'KaiTi',
'FangSong',
'Arial',
'Times-New-Roman',
'sans-serif'
]
// 自定義字號的大小，注意下面的內(nèi)容要和css里面對應(yīng)上
var sizes = [false, '16px', '18px', '20px', '22px', '26px', '28px', '30px']
//注冊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'], // 加粗 斜體 下劃線 刪除線 -----['bold', 'italic', 'underline', 'strike']
['blockquote', 'code-block'], // 引用 代碼塊-----['blockquote', 'code-block']
[{ header: 1 }, { header: 2 }], // 1、2 級標題-----[{ header: 1 }, { header: 2 }]
[{ list: 'ordered' }, { list: 'bullet' }], // 有序、無序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
[{ script: 'sub' }, { script: 'super' }], // 上標/下標-----[{ script: 'sub' }, { script: 'super' }]
[{ indent: '-1' }, { indent: '+1' }], // 縮進-----[{ indent: '-1' }, { indent: '+1' }]
[{ 'direction': 'rtl' }], // 文本方向-----[{'direction': 'rtl'}]
[{ size: sizes }], // 字體大小-----[{ size: ['small', false, 'large', 'huge'] }]
[{ header: [1, 2, 3, 4, 5, 6, false] }], // 標題-----[{ header: [1, 2, 3, 4, 5, 6, false] }]
[{ color: [] }, { background: [] }], // 字體顏色、字體背景顏色-----[{ color: [] }, { background: [] }]
[{ font: fonts }], // 字體種類-----[{ font: [] }]
[{ align: [] }], // 對齊方式-----[{ align: [] }]
['clean'] // 清除文本格式-----['clean']
['link', 'image'] // 鏈接、圖片、視頻-----['link', 'image', 'video']
]
export default {
//注冊富文本組件
components: { quillEditor },
data () {
formObj：{content:''}//富文本綁定的值
//定義富文本組件功能
editorOption: {
placeholder: '您想說點什么？',
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() {
//失去焦點事件
},
onEditorFocus() {
//獲得焦點事件
},
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覆蓋默認的上傳行為，可以自定義上傳的實現(xiàn)
async httpRequest ({ file }) {
let img = await this.getBase64(file)
// 調(diào)用后端給的接口上傳圖片
getUploadFilesImg({ imgbase64: img }).then((res) => {
// 獲取富文本組件實例
let quill = this.$refs.myQuillEditor.quill
// 獲取光標所在位置
let length = quill.getSelection().index
// 插入圖片，res為服務(wù)器返回的圖片鏈接地址
quill.insertEmbed(length, 'image', res.path)
// 調(diào)整光標到最后
quill.setSelection(length + 1)
}).catch((err) => {
console.log(err)
})
}
//定義鼠標停留按鈕提示事件，在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 = '下標' : item.title = '上標'
} else if (item.className === 'ql-indent') {
item.value === '+1' ? item.title = '向右縮進' : item.title = '向左縮進'
} 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>
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue?draggable組件實現(xiàn)拖拽及點擊無效問題的解決
這篇文章主要介紹了vue?draggable組件實現(xiàn)拖拽及點擊無效問題的解決,只需要在設(shè)置handle屬性就可以了，.defaultTypeTag 是要拖拽的塊的類名，要注意的是需要做點擊事件的項不能包含在這個類名里面，不然會無法觸發(fā)點擊事件，詳細解決辦法跟隨小編一起學(xué)習(xí)吧2022-05-05
這篇文章主要為大家介紹了vue之mixin的使用，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
在當(dāng)今前端開發(fā)領(lǐng)域,首屏加載速度和 SEO 優(yōu)化已成為衡量 Web 應(yīng)用質(zhì)量的重要指標,Vue3服務(wù)端渲染為解決這些問題提供了優(yōu)雅的解決方案,下面小編就來和大家詳細講講吧2025-05-05
Vue生命周期activated之返回上一頁不重新請求數(shù)據(jù)操作
這篇文章主要介紹了Vue生命周期activated之返回上一頁不重新請求數(shù)據(jù)操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了詳解vue-cli3多頁應(yīng)用改造，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-06-06
本文給大家介紹了vue項目中跨域問題的完美解決方案，通過更改header，使用http-proxy-middleware 代理解決（項目使用vue-cli腳手架搭建），具體內(nèi)容詳情大家跟隨腳本之家小編一起學(xué)習(xí)吧2018-06-06
這篇文章主要為大家介紹了Vue父子組件元素獲取方法互相調(diào)用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-09-09
vue中的v-model原理,與組件自定義v-model詳解
這篇文章主要介紹了vue中的v-model原理,與組件自定義v-model詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要為大家詳細介紹了vue組件父與子通信詳解，實現(xiàn)登錄窗口，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
這篇文章主要介紹了詳解vue中this.$emit()的返回值是什么，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04