最近工作中需求使用一款富文本編輯器，經(jīng)過(guò)再三比較選擇了vue-quill-editor，之所以選擇vue-quill-editor，是看上了它的輕量以及外觀簡(jiǎn)潔的優(yōu)勢(shì)。打開(kāi)官方文檔，直接上手配置，各種報(bào)錯(cuò)，踩了很多坑，遇到的主要問(wèn)題有以下幾個(gè)
- 字體大小無(wú)法設(shè)置
- 工具欄樣式錯(cuò)位
- 圖片上傳報(bào)錯(cuò)
-
編輯器高度無(wú)法設(shè)置
........
經(jīng)過(guò)參考多篇博客，終于解決了所有問(wèn)題，網(wǎng)上資料雖然很多，但是都沒(méi)有完全適用的，比較零碎，這里我將自己的經(jīng)驗(yàn)分享一下，希望可以幫助到有需要的人。下面是效果圖：
1641565632939_3B625783-D0CC-42e8-A196-44691018F936.png
完整代碼
<template>
<div class="vue-quill-editor">
<quill-editor
ref="mwQuillEditor"
v-model="html"
:options="editorOption"
/>
</div>
</template>
<script>
import { quillEditor, Quill } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import SelectImages from '@/components/SelectImages/index'
// 設(shè)置字體大小
const fontSizeStyle = Quill.import('attributors/style/size') // 引入這個(gè)后會(huì)把樣式寫(xiě)在style上
fontSizeStyle.whitelist = ['12px', '14px', '16px', '18px', '20px', '24px', '28px', '32px', '36px']
Quill.register(fontSizeStyle, true)
// 設(shè)置字體樣式
const Font = Quill.import('attributors/style/font') // 引入這個(gè)后會(huì)把樣式寫(xiě)在style上
const fonts = [
'SimSun',
'SimHei',
'Microsoft-YaHei',
'KaiTi',
'FangSong'
]
Font.whitelist = fonts // 將字體加入到白名單
Quill.register(Font, true)
// 工具欄
const toolbarOptions = [
['bold', 'italic', 'underline', 'strike'], // 加粗 斜體 下劃線 刪除線 -----['bold', 'italic', 'underline', 'strike']
[{ color: [] }, { background: [] }], // 字體顏色、字體背景顏色-----[{ color: [] }, { background: [] }]
[{ align: [] }], // 對(duì)齊方式-----[{ align: [] }]
[{ size: fontSizeStyle.whitelist }], // 字體大小-----[{ size: ['small', false, 'large', 'huge'] }]
[{ font: fonts }], // 字體種類(lèi)-----[{ font: [] }]
[{ header: [1, 2, 3, 4, 5, 6, false] }], // 標(biāo)題
[{ direction: 'ltl' }], // 文本方向-----[{'direction': 'rtl'}]
[{ direction: 'rtl' }], // 文本方向-----[{'direction': 'rtl'}]
[{ indent: '-1' }, { indent: '+1' }], // 縮進(jìn)-----[{ indent: '-1' }, { indent: '+1' }]
[{ list: 'ordered' }, { list: 'bullet' }], // 有序、無(wú)序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
[{ script: 'sub' }, { script: 'super' }], // 上標(biāo)/下標(biāo)-----[{ script: 'sub' }, { script: 'super' }]
['blockquote', 'code-block'], // 引用 代碼塊-----['blockquote', 'code-block']
['clean'], // 清除文本格式-----['clean']
['link', 'image', 'video'] // 鏈接、圖片、視頻-----['link', 'image', 'video']
]
export default {
name: 'VueQuillEditor',
components: {
quillEditor
},
props: {
value: {
type: [Number, Object, Array, String],
default: ''
}
},
data () {
return {
html: this.value,
editorOption: {
modules: {
toolbar: {
container: toolbarOptions,
handlers: {
image: this.handleImgUpload
}
}
}
},
isShow: false
}
},
watch: {
html: {
handler (newValue) {
this.$emit('input', newValue)
},
deep: true
},
value: {
handler (newValue, oldValue) {
if (newValue !== oldValue) this.html = newValue
},
deep: true
}
},
mounted () {
this.initMounted()
},
methods: {
initMounted () {
setTimeout(() => {
this.isShow = true
}, 100)
},
handleImgUpload () {
const { quill } = this.$refs.mwQuillEditor
SelectImages({
visible: true,
multi: true,
showButton: true,
maxMulti: 18,
success: (data, filPath) => {
for (const item of data) {
const length = quill.getSelection(true).index
// 獲取光標(biāo)所在位置
// 插入圖片，res為服務(wù)器返回的圖片鏈接地址
quill.insertEmbed(length, 'image', filPath + item)
// 調(diào)整光標(biāo)到最后
quill.setSelection(length + 1)
}
}
})
}
}
}
</script>
<style lang="scss">
.vue-quill-editor {
.quill-editor{
line-height: normal;
.ql-container.ql-snow{
line-height: normal !important;
height: 550px !important;
font-size:14px;
}
.ql-snow {
.ql-tooltip[data-mode=link]::before {
content: "請(qǐng)輸入鏈接地址:";
}
.ql-tooltip.ql-editing a.ql-action::after {
border-right: 0px;
content: '保存';
padding-right: 0px;
}
.ql-tooltip[data-mode=video]::before {
content: "請(qǐng)輸入視頻地址:";
}
.ql-picker.ql-size {
.ql-picker-label[data-value="12px"]::before,
.ql-picker-item[data-value="12px"]::before {
content: '12px';
}
.ql-picker-label[data-value="14px"]::before,
.ql-picker-item[data-value="14px"]::before {
content: '14px';
}
.ql-picker-label[data-value="16px"]::before,
.ql-picker-item[data-value="16px"]::before {
content: '16px';
}
.ql-picker-label[data-value="18px"]::before,
.ql-picker-item[data-value="18px"]::before {
content: '18px';
}
.ql-picker-label[data-value="20px"]::before,
.ql-picker-item[data-value="20px"]::before {
content: '20px';
}
.ql-picker-label[data-value="24px"]::before,
.ql-picker-item[data-value="24px"]::before {
content: '24px';
}
.ql-picker-label[data-value="28px"]::before,
.ql-picker-item[data-value="28px"]::before {
content: '28px';
}
.ql-picker-label[data-value="32px"]::before,
.ql-picker-item[data-value="32px"]::before {
content: '32px';
}
.ql-picker-label[data-value="36px"]::before,
.ql-picker-item[data-value="36px"]::before {
content: '36px';
}
}
.ql-picker.ql-header {
.ql-picker-label::before,
.ql-picker-item::before {
content: '文本';
}
.ql-picker-label[data-value="1"]::before,
.ql-picker-item[data-value="1"]::before {
content: '標(biāo)題1';
}
.ql-picker-label[data-value="2"]::before,
.ql-picker-item[data-value="2"]::before {
content: '標(biāo)題2';
}
.ql-picker-label[data-value="3"]::before,
.ql-picker-item[data-value="3"]::before {
content: '標(biāo)題3';
}
.ql-picker-label[data-value="4"]::before,
.ql-picker-item[data-value="4"]::before {
content: '標(biāo)題4';
}
.ql-picker-label[data-value="5"]::before,
.ql-picker-item[data-value="5"]::before {
content: '標(biāo)題5';
}
.ql-picker-label[data-value="6"]::before,
.ql-picker-item[data-value="6"]::before {
content: '標(biāo)題6';
}
}
.ql-picker.ql-font{
.ql-picker-label[data-value="SimSun"]::before,
.ql-picker-item[data-value="SimSun"]::before {
content: "宋體";
font-family: "SimSun" !important;
}
.ql-picker-label[data-value="SimHei"]::before,
.ql-picker-item[data-value="SimHei"]::before {
content: "黑體";
font-family: "SimHei";
}
.ql-picker-label[data-value="Microsoft-YaHei"]::before,
.ql-picker-item[data-value="Microsoft-YaHei"]::before {
content: "微軟雅黑";
font-family: "Microsoft YaHei";
}
.ql-picker-label[data-value="KaiTi"]::before,
.ql-picker-item[data-value="KaiTi"]::before {
content: "楷體";
font-family: "KaiTi" !important;
}
.ql-picker-label[data-value="FangSong"]::before,
.ql-picker-item[data-value="FangSong"]::before {
content: "仿宋";
font-family: "FangSong";
}
}
}
.ql-align-center{
text-align: center;
}
.ql-align-right{
text-align: right;
}
.ql-align-left{
text-align: left;
}
}
}
</style>
