由于我們在項目中使用的次數(shù)不會很多，這里將作為按需引入方式使用褂傀。
富文本編輯器-效果展示
安裝依賴
npm install vue-quill-editor --save
創(chuàng)建 VueQuillEditor.js
import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor'
// require styles
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Vue.use(VueQuillEditor)
創(chuàng)建 titleConfig.js（可不添加）
// 文本提示語
export 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": "清除字體樣式",
"ql-upload": "文件"
};
按需引入方式
1.html
<el-upload
v-show="false"
class="upload-demo"
:action="uploadImgUrl"
:headers="uploadHeaders"
accept="image/jpeg,image/png,image/bmp"
:before-upload="handleBeforeUpload"
:on-success="handleSuccess"
:show-file-list="false"
>
<el-button v-show="false" class="ivu-btn" size="small" type="primary"></el-button>
</el-upload>
<quill-editor class="ql-editor"
v-model="content"
ref="QuillEditor"
:options="editorOption"
@blur="onEditorBlur($event)"
@focus="onEditorFocus($event)"
@change="onEditorChange($event)"
></quill-editor>
2.javaSrcipt
import '@/assets/js/quillEditor/VueQuillEditor.js'
import { titleConfig } from '@/assets/js/quillEditor/titleConfig.js' // 富文本文本提示語
export default {
data() {
return {
fileSize: 10,
uploadHeaders: { // 圖片上傳接口請求頭
Authorization: "token",
Platform: "web",
},
uploadImgUrl: "/upload", // 上傳的圖片服務(wù)器地址
content: "",
editorOption: {
placeholder: '請在這里輸入',
modules: {
toolbar: {
container: [
['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': ['small', false, 'large', 'huge'] }], // 字體大小
[{ 'header': [1, 2, 3, 4, 5, 6, false] }], //幾級標題
[{ 'color': [] }, { 'background': [] }], // 字體顏色锄蹂，字體背景顏色
[{ 'font': [] }], //字體
[{ 'align': [] }], //對齊方式
['clean'], //清除字體樣式
['image'] //上傳圖片
// ['image','video','link'] //上傳圖片、上傳視頻水慨、上傳文件
],
handlers: {
'image': function (value) {
if (value) {
// 調(diào)用iview圖片上傳
document.querySelector('.upload-demo .ivu-btn').click()
} else {
this.quill.format('image', false);
}
}
}
}
}
},
}
},
// 在dom創(chuàng)建完成后再調(diào)用
mounted() {
// 富文本提示信息
this.$nextTick(() => {
const oToolBar = document.getElementsByClassName('ql-editor')[0];
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]];
});
})
},
methods: {
onEditorBlur(e){
console.log(e, '失去焦點事件');
},
onEditorFocus(e){
console.log(e, '獲得焦點事件');
},
onEditorChange(e){
console.log(e, '內(nèi)容改變事件');
},
// 上傳前校檢格式和大小
handleBeforeUpload(file) {
// 檢驗文件類型
const isIMAGE = (file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/bmp');
if (!isIMAGE) {
this.$message.error(`請上傳圖片類型文件得糜！`);
return false;
}
// 校檢文件大小
const isLt = file.size / 1024 / 1024 < this.fileSize;
if (!isLt) {
this.$message.error(`上傳文件大小不能超過 ${this.fileSize} MB!`);
return false;
}
return true;
},
handleSuccess (res) {
// 獲取富文本組件實例
let quill = this.$refs.QuillEditor.quill
// 如果上傳成功
if (res.code===0) {
// 獲取光標所在位置
let length = quill.getSelection().index;
// 插入圖片，res為服務(wù)器返回的圖片鏈接地址
quill.insertEmbed(length, 'image', res.data)
// 調(diào)整光標到最后
quill.setSelection(length + 1)
} else {
// 提示信息晰洒，需引入Message
this.$message.error('圖片插入失敗')
}
},
}
}
編輯后成功返回
console.log(this.content);
解決圖片上傳后的 html 模板轉(zhuǎn)碼失敵丁（看需求，非必須）
- 【UrlEncode編碼/UrlDecode解碼】
encodeURIComponent(this.content); // 編碼
decodeURIComponent(this.content); // 解碼
