Vue富文本插件(quill-editor)的使用及說(shuō)明
更新時(shí)間：2023年02月18日 16:11:47 作者：前端阿皓
這篇文章主要介紹了Vue富文本插件(quill-editor)的使用及說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。
介紹在Vue中使用quill-editor富文本插件，支持圖片的放大縮小及拖動(dòng)
效果圖：
1、下載依賴
cnpm i vue-quill-editor --save cnpm i quill-image-resize-module --save //圖片操作
2、全局引入及注冊(cè)main.js
import VueQuillEditor from 'vue-quill-editor';
import * as Quill from 'quill'; //引入編輯器
import resizeImage from 'quill-image-resize-module'; // 圖片縮放組件。
Quill.register('modules/resizeImage ', resizeImage);
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
Vue.use(VueQuillEditor);
3、封裝組件RichText
<template>
<div class="richBox" v-loading="spinning">
<quill-editor
v-model="content"
:options="editorOption"
ref="QuillEditor">
</quill-editor>
<input type="file"
ref="imgs"
accept="image/*" class="uploads" style="display: none;" @change="uploadImgs">
<input type="file"
ref="videos"
accept="video/*" class="upVideo" style="display: none;" @change="uploadVideo">
</div>
</template>
<script>
import {
uploads
} from "./upload.js" //uploads.js是封裝的一個(gè)上傳方法，可基于Promise進(jìn)行封裝
const toolbarOptions = [
['bold', 'italic', 'underline', 'strike'], // toggled buttons
['blockquote', 'code-block'],
[{'header': 1}, {'header': 2}], // custom button values
[{'list': 'ordered'}, {'list': 'bullet'}],
[{'script': 'sub'}, {'script': 'super'}], // superscript/subscript
[{'indent': '-1'}, {'indent': '+1'}], // outdent/indent
[{'direction': 'rtl'}], // text direction
[{'size': ['small', false, 'large', 'huge']}], // custom dropdown
[{'header': [1, 2, 3, 4, 5, 6, false]}],
[{'color': []}, {'background': []}], // dropdown with defaults from theme
[{'font': []}],
[{'align': []}],
['link', 'image', 'video'],
['clean'] // remove formatting button
]
export default{
props: {
values: { //用于回顯
type: String,
default: ''
},
},
data(){
return{
spinning:false,
content: '',
editorOption: {
placeholder:"請(qǐng)輸入",
modules: {
imageResize: { //圖片放大縮小配置
displayStyles: {
backgroundColor: 'black',
border: 'none',
color: 'white'
},
modules: ['Resize', 'DisplaySize', 'Toolbar']
},
toolbar: {
container: toolbarOptions, // 工具欄
handlers: {
'image': function (value) {
if (value) {
document.querySelector('.uploads').click()
} else {
this.quill.format('image', false);
}
},
'video':function(value){
if (value) {
document.querySelector('.upVideo').click()
} else {
this.quill.format('video', false);
}
}
}
}
}
}
}
},
watch: { //監(jiān)聽(tīng)回顯的數(shù)據(jù)變化
values: {
handler(newVal, oldVal) {
this.content = newVal;
this.$refs.QuillEditor.quill.blur();
},
immediate: true
}
},
methods:{
getVal () { //返回內(nèi)容
return this.content
},
setVal(data){ //賦值
this.content = data;
},
uploadImgs(e){ //上傳圖片
var file = this.$refs.imgs.files[0];
this.spinning = true
this.upFile(file,'image');
e.target.value = '';
},
uploadVideo(e){ //上傳視頻
var file = this.$refs.videos.files[0];
this.spinning = true
this.upFile(file,'video')
},
upFile(file,type){ //上傳api
uploads(file).then(result => {
this.spinning = false
this.insertImg(result,type)
})
},
insertImg(url,type){ //插入圖片
var quill = this.$refs.QuillEditor.quill;
let length = quill.getSelection().index;
quill.insertEmbed(length,type,url);
quill.setSelection(length+1);
}
}
}
</script>
<style>
p {
margin: 10px;
}
.edit_container,
.quill-editor {
height: 300px;
}
.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="small"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
content: "10px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
content: "18px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
content: "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: "標(biāo)題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: "標(biāo)題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: "標(biāo)題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: "標(biāo)題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: "標(biāo)題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: "標(biāo)題6" !important;
}
.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
content: "標(biāo)準(zhǔn)字體" !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;
}
</style>
<style scoped="scoped" lang="scss">
.richBox{
width: 95% !important;
.quill-editor{
width: 100% !important;
height: 600px;
}
}
::v-deep .ql-container{
height: 90% !important;
}
</style>
4、使用
<richTxt ref="child" :values="form.content"/>
1、獲取富文本內(nèi)容：
let oldProcedure = this.$refs.child.getVal(); this.form.content= oldProcedure;
5、萬(wàn)事俱備之后
運(yùn)行項(xiàng)目可能會(huì)出現(xiàn)imports錯(cuò)誤，這里提供了cli2和cli3兩種解決方案
1. 在vue cli2中，處理方案如下:
找到webpack.base.conf文件，添加以下代碼
const webpack = require('webpack');
module.exports = {
plugins: [
new webpack.ProvidePlugin({
'window.Quill': 'quill/dist/quill.js',
'Quill': 'quill/dist/quill.js'
})
],
}
2.在vue cli3中，處理方案如下：
在項(xiàng)目根目錄找到vue.config.js文件，如果沒(méi)有就創(chuàng)建此文件，添加以下代碼
const webpack = require('webpack')
module.exports = {
chainWebpack: config => {
//富文本圖片縮放
config.plugin('provide').use(webpack.ProvidePlugin, [{
'window.Quill': 'quill',
'Quill': 'quill/dist/quill.js'
}])
}
}
//注意 如果原文件有chainWebpack 不要重復(fù)添加，在原有chainWebpack里面的最后面添加上面代碼
6、格式問(wèn)題
v-html渲染格式問(wèn)題：給v-html綁定的元素添加class="ql-editor"
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
vue中使用refs定位dom出現(xiàn)undefined的解決方法
本篇文章主要介紹了vue中使用refs定位dom出現(xiàn)undefined的解決方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
這篇文章主要為大家詳細(xì)介紹了vue自定義可選時(shí)間的日歷組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
vue3.0 子組件如何修改父組件傳遞過(guò)來(lái)的值
這篇文章主要介紹了vue3.0 子組件如何修改父組件傳遞過(guò)來(lái)的值，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Electron采集桌面共享和系統(tǒng)音頻(桌面捕獲)實(shí)例
這篇文章主要為大家介紹了Electron采集桌面共享和系統(tǒng)音頻(桌面捕獲)實(shí)現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10
vue阻止頁(yè)面回退的實(shí)現(xiàn)方法(瀏覽器適用)
這篇文章主要介紹了vue阻止頁(yè)面回退的實(shí)現(xiàn)方法(瀏覽器適用)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
使用el-row及el-col頁(yè)面縮放時(shí)出現(xiàn)空行的問(wèn)題及解決
這篇文章主要介紹了使用el-row及el-col頁(yè)面縮放時(shí)出現(xiàn)空行的問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
解決vue3項(xiàng)目中el-menu不兼容SSR問(wèn)題
這篇文章主要介紹了解決vue3項(xiàng)目中el-menu不兼容SSR問(wèn)題,需要的朋友可以參考下2023-12-12
完美解決vue引入BMapGL is not defined的問(wèn)題
在Vue項(xiàng)目中使用BMapGL時(shí),通過(guò)在src下添加bmp.js文件并配置密鑰（ak）,可以有效解決地圖API的應(yīng)用問(wèn)題,本方法是基于個(gè)人經(jīng)驗(yàn)總結(jié),希望能為開(kāi)發(fā)者提供參考和幫助2024-10-10
這篇文章主要介紹了淺談Vue.js 中的 v-on 事件指令的使用，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11
一次用vue3簡(jiǎn)單封裝table組件的實(shí)戰(zhàn)過(guò)程
之所以封裝全局組件是為了省事,所有的目的,全都是為了偷懶,下面這篇文章主要給大家介紹了關(guān)于用vue3簡(jiǎn)單封裝table組件的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12