vue使用富文本編輯器vue-quill-editor的操作指南和注意事項
更新時間：2023年05月30日 09:18:04 作者：SwJieJie
vue中很多項目都需要用到富文本編輯器,在使用了ueditor和tinymce后,發(fā)現(xiàn)并不理想,所以果斷使用vue-quill-editor來實現(xiàn),下面這篇文章主要給大家介紹了關(guān)于vue使用富文本編輯器vue-quill-editor的操作指南和注意事項,需要的朋友可以參考下
問題描述：
我們在開發(fā)過程中經(jīng)常會遇到使用富文本編輯器進行操作，當(dāng)前插件市場上關(guān)于富文本的編輯器挺多的，我們就不一一個介紹了，現(xiàn)在我們主要講解一些vue-quill-editor富文本編輯器的使用操作和注意事項。
效果圖
具體操作使用
1. 安裝
npm install vue-quill-editor -S
2. 引入到項目中
有兩種掛載方式： 全局掛載 和 在組件中掛載，根據(jù)自己的項目需求選擇，一般用到富文本編輯都是在某一個項目中，我們這里為了方便大家選擇，兩種引用方案都寫下來以便大家參考：
（1），頁面中引用
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
export default {
components: {
quillEditor
}
}
（2），全局中引用
import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor'
// 引入樣式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Vue.use(VueQuillEditor, /* { 默認全局 } */)
3. 頁面上面具體實現(xiàn)
<template>
<quill-editor
class="ql-editor"
v-model="content"
ref="myQuillEditor"
:options="editorOption"
@blur="onEditorBlur($event)"
@focus="onEditorFocus($event)"
@change="onEditorChange($event)">
</quill-editor>
</template>
<script>
export default {
data() {
return {
content: `<p>這是 vue-quill-editor 的內(nèi)容！</p>`, //雙向數(shù)據(jù)綁定數(shù)據(jù)
// 富文本編輯器配置
editorOption: {
modules: {
toolbar: [
['bold', 'italic', 'underline', 'strike'], // 加粗 斜體 下劃線 刪除線
['blockquote', 'code-block'], // 引用 代碼塊
[{ header: 1 }, { header: 2 }], // 1、2 級標題
[{ list: 'ordered' }, { list: 'bullet' }], // 有序、無序列表
[{ script: 'sub' }, { script: 'super' }], // 上標/下標
[{ indent: '-1' }, { indent: '+1' }], // 縮進
[{ direction: 'rtl' }], // 文本方向
[{ size: ['12px', false, '16px', '18px', '20px', '30px'] }], // 字體大小
[{ header: [1, 2, 3, 4, 5, 6, false] }], // 標題
[{ color: [] }, { background: [] }], // 字體顏色、字體背景顏色
[{ font: [false, 'SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial'] }], // 字體種類
[{ align: [] }], // 對齊方式
['clean'], // 清除文本格式
['link', 'image', 'video'] // 鏈接、圖片、視頻
},
placeholder: '請輸入正文'
}
}
},
methods: {
// 失去焦點事件
onEditorBlur(quill) {
console.log('editor blur!', quill)
},
// 獲得焦點事件
onEditorFocus(quill) {
console.log('editor focus!', quill)
},
// 準備富文本編輯器
onEditorReady(quill) {
console.log('editor ready!', quill)
},
// 內(nèi)容改變事件
onEditorChange({ quill, html, text }) {
console.log('editor change!', quill, html, text)
this.content = html
}
}
}
</script>
到這里一個默認的富文本編輯器已經(jīng)導(dǎo)入使用了，如下圖所視！
4.為了更好配合使用，樣式上面進行優(yōu)化，使用中文標識方便查看
（1），重新自定義字體類型
import Quill from 'quill' // 引入編輯器
// 自定義字體大小
const Size = Quill.import('attributors/style/size')
Size.whitelist = ['10px', '12px', '16px', '18px', '20px', '30px', '32px']
Quill.register(Size, true)
// 自定義字體類型
var fonts = ['SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial', 'sans-serif']
var Font = Quill.import('formats/font')
Font.whitelist = fonts
Quill.register(Font, true)（2），自定義對應(yīng)樣式
// 給文本內(nèi)容加高度，滾動條
.quill-editor /deep/ .ql-container {
min-height: 220px;
}
.ql-container {
min-height: 230px;
}
/deep/ {
.ql-snow .ql-tooltip [data-mode="link"]::before {
content: "請輸入鏈接地址:";
left: 0;
}
.ql-snow .ql-tooltip.ql-editing {
left: 0 !important;
}
.ql-snow .ql-tooltip {
left: 0 !important;
}
.ql-snow .ql-editor {
max-height: 300px;
}
.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
border-right: 0px;
content: "保存";
padding-right: 0px;
}
.ql-snow .ql-tooltip[data-mode="video"]::before {
content: "請輸入視頻地址:";
}
.ql-snow .ql-picker.ql-size .ql-picker-label::before, .ql-snow .ql-picker.ql-size .ql-picker-item::before {
content: "14px" !important;
font-size: 14px;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="10px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="10px"]::before {
content: "10px" !important;
font-size: 10px;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="12px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12px"]::before {
content: "12px" !important;
font-size: 12px;
}
.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" !important;
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" !important;
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" !important;
font-size: 20px;
}
.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" !important;
font-size: 30px;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="32px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32px"]::before {
content: "32px" !important;
font-size: 32px;
}
.ql-snow .ql-picker.ql-header .ql-picker-label::before, .ql-snow .ql-picker.ql-header .ql-picker-item::before {
content: "文本" !important;
}
.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" !important;
}
.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" !important;
}
.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" !important;
}
.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" !important;
}
.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" !important;
}
.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" !important;
}
.ql-snow .ql-picker.ql-font .ql-picker-label::before, .ql-snow .ql-picker.ql-font .ql-picker-item::before {
content: "標準字體" !important;
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
content: "襯線字體" !important;
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
content: "等寬字體" !important;
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="SimSun"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="SimSun"]::before {
content: "宋體" !important;
font-family: "SimSun";
}
.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: "黑體" !important;
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: "微軟雅黑" !important;
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: "楷體" !important;
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: "仿宋" !important;
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" !important;
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" !important;
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" !important;
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";
}
.ql-snow.ql-toolbar .ql-formats .ql-revoke {
background-image: url("../../../../assets/images/icons8-rotate-left-18.png");
width: 20px;
height: 20px;
filter: grayscale(100%);
opacity: 1;
}
.ql-snow.ql-toolbar .ql-formats .ql-revoke:hover {
background-image: url("../../../../assets/images/icons8-rotate-left-18.png");
width: 20px;
height: 20px;
filter: none;
opacity: 0.9;
}
img {
filter: grayscale(100%);
opacity: 1;
}
img:hover {
filter: none;
opacity: 0.9;
}
/*加上height和滾動屬性就可以，滾動條樣式是系統(tǒng)默認樣式，可能不同*/
.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
border-color: #ccc;
height: 125px;
overflow: auto;
}
}（3），注意點：富文本里面的下拉框默認是不滾動的，想要滾動效果，加上下面的css
/*加上height和滾動屬性就可以，滾動條樣式是系統(tǒng)默認樣式，可能不同*/
.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
border-color: #ccc;
height: 125px;
overflow: auto;
}
5.上傳圖片到七牛云
vue-quill-editor 默認的是以 base64 保存圖片，會直接把圖片 base64 和內(nèi)容文本一起以字符串的形式提交到后端。這樣小圖片還行，如果要上傳大圖片會提示上傳失敗，優(yōu)秀的前端打字員顯然不會這樣做。
思路
可以先將圖片上傳至服務(wù)器，再將圖片鏈接插入到富文本中顯示
圖片上傳可以自定義一個組件或者使用 element-ui 的上傳圖片的組件（我在項目中使用的是自定義的組件，這里演示使用 element-ui 組件上傳）
上傳圖片的組件需要隱藏，點擊圖片上傳時調(diào)用element-ui 的圖片上傳，上傳成功后返回圖片鏈接。
在編輯器項中配置配置項
<el-upload v-show="false" class="avatar-uploader" :data='fileUpload' :show-file-list="false" :http-request="onUploadHandler" > </el-upload>
在option中配置上傳操作，之前的option就耀稍作修改
handlers: {
'image': function (value) {
if (value) { // value === true
document.querySelector('.avatar-uploader input').click()
} else {
this.quill.format('image', false)
}
}
}點擊富文本上的上傳圖片，就會觸發(fā)這里的handlers，將操作引到upload的函數(shù)上，在這個函數(shù)里面需要做的操作是，將圖片上傳到七牛云，并拿到返回的在線鏈接，然后將圖片鏈接插入到頁面對應(yīng)位置上。這里我的上傳是自己封裝了函數(shù)。
async onUploadHandler(e) {
const imageUrl = 上傳七牛云后返回來的一串在線鏈接
// 獲取光標所在位置
let quill = this.$refs.myQuillEditor.quill
let length = quill.getSelection().index
// 插入圖片
quill.insertEmbed(length, 'image', imageUrl)
// 調(diào)整光標到最后
quill.setSelection(length + 1)
// this.content += url
}6.自定義控制圖片大小
（1），安裝插件
npm i quill-image-resize-module -S
（2），在文件中導(dǎo)入包
import Quill from 'quill'
import ImageResize from 'quill-image-resize-module'
Quill.register('modules/imageResize', ImageResize) （3），在原本的配置項上添加（與toolbar平級進行配置）
toolbar: {},
// 調(diào)整圖片大小
imageResize: {
displayStyles: {
backgroundColor: 'black',
border: 'none',
color: 'white'
},
modules: [ 'Resize', 'DisplaySize', 'Toolbar' ]
}效果：
7.自定義toobar樣式設(shè)計
//在quill中使用
toolbar: {
container: toolbarOptions,
handlers: {
**report: this.openWorkReport**
}
}
// 方法中使用
openWorkReport () {
this.$emit('openWorkReport')
},
// 樣式
/* 自定義toobar樣式設(shè)計 */
/* 工作匯報彈窗 */
.ql-snow.ql-toolbar .ql-formats .ql-report{
background: url("../images/meeting/report.png") no-repeat;
background-size: contain;
display: inline-block;
height: 18px;
margin: 3px 5px;
width: 28px;
}效果
有關(guān)視頻上傳參考：視頻上傳
總結(jié)
到此這篇關(guān)于vue使用富文本編輯器vue-quill-editor的操作指南和注意事項的文章就介紹到這了,更多相關(guān)vue使用富文本編輯器vue-quill-editor內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章詳細介紹了vue渲染機制和如何解決數(shù)據(jù)修改頁面不刷新問題的多種方法，想了解更多的小伙伴可以借鑒閱讀2023-03-03
這篇文章主要介紹了Vue文本模糊匹配功能如何實現(xiàn),文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-07-07
為讓大家更好的理解Vue3的Composition?Api本文采用了詳細的動畫演繹，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
微信小程序地圖導(dǎo)航功能實現(xiàn)完整源代碼附效果圖（推薦）
這篇文章主要介紹了微信小程序地圖導(dǎo)航功能實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
vue實現(xiàn)錨點跳轉(zhuǎn)及滾動監(jiān)聽的方法
這篇文章主要為大家詳細介紹了vue實現(xiàn)錨點跳轉(zhuǎn)及滾動監(jiān)聽的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
基于 Vue.js 2.0 酷炫自適應(yīng)背景視頻登錄頁面實現(xiàn)方式
本文講述如何實現(xiàn)擁有酷炫背景視頻的登錄頁面，瀏覽器窗口隨意拉伸，背景視頻及前景登錄組件均能完美適配，背景視頻可始終鋪滿窗口，前景組件始終居中，視頻的內(nèi)容始終得到最大限度的保留，可以得到最好的視覺效果2018-01-01
vue-router動態(tài)路由實現(xiàn)前端權(quán)限管理方式
這篇文章主要介紹了vue-router動態(tài)路由實現(xiàn)前端權(quán)限管理方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue2.5 結(jié)合 Element UI 之 Table 和 Pagination 組件實現(xiàn)分頁功能
這篇文章主要介紹了Vue2.5 結(jié)合 Element UI 之 Table 和 Pagination 組件實現(xiàn)分頁功能，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2018-01-01
本文主要介紹了Vuex模塊化實現(xiàn)待辦事項的狀態(tài)管理的相關(guān)知識，具有很好的參考價值，下面跟著小編一起來看下吧2017-03-03
vue.js實現(xiàn)數(shù)據(jù)動態(tài)響應(yīng) Vue.set的簡單應(yīng)用
這篇文章主要介紹了vue.js實現(xiàn)數(shù)據(jù)動態(tài)響應(yīng)，Vue.set的簡單應(yīng)用，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06