淺談vue中使用編輯器vue-quill-editor踩過(guò)的坑
結(jié)合vue+element-ui+vue-quill+editor二次封裝成組件
1.圖片上傳
分析原因
項(xiàng)目中使用vue-quill-editor富文本編輯器,在編輯內(nèi)容的時(shí)候,我們往往會(huì)編輯圖片,而vue-quill-editor默認(rèn)的處理方式是直接將圖片轉(zhuǎn)成base64格式,導(dǎo)致上傳的內(nèi)容十分龐大,且服務(wù)器接受post的數(shù)據(jù)的大小是有限制的,很有可能就提交失敗,造成用戶體驗(yàn)差。
引入element-ui
編輯editor.vue文件
<template> <div> <!-- 圖片上傳組件輔助--> <el-upload action='' accept='image/jpg, image/jpeg, image/png, image/gif' :http-request='upload' :before-upload='beforeUploadImg' :on-success='uploadSuccess' :on-error='uploadError' :show-file-list='false'> <i class='el-icon-plus avatar-uploader-icon'></i> </el-upload> </div></template><script> import axios from ’@/API/’;import { quillEditor } from 'vue-quill-editor';import COS from 'cos-js-sdk-v5';import Upload from ’@/components/Upload.vue’;import { addQuillTitle } from ’../utils/quill-title.js’;import 'quill/dist/quill.core.css';import 'quill/dist/quill.snow.css';import 'quill/dist/quill.bubble.css'; export default { data() { return { } }, methods: { // 上傳圖片前 beforeUpload(res, file) { const isJPG = file.type === ’image/jpg’ || file.type === ’image/png’ || file.type === ’image/jpeg’ const isLt1M = file.size / 1024 / 1024 < 1 if (!isJPG) { this.$message.error(’支持JPG、PNG格式的圖片,大小不得超過(guò)1M’) } if (!isLt1M) { this.$message.error(’文件最大不得超過(guò)1M’) } return isJPG && isLt1M }, // 上傳圖片成功 uploadSuccess(res, file) {}, // 上傳圖片失敗 uploadError(res, file) {}, // 上傳圖片處理過(guò)程 upload(req){} } }</script>
在editor.vue中引入vue-quill-editor
<template> <div> <!-- 圖片上傳組件輔助--> <el-upload action='' accept='image/jpg, image/jpeg, image/png, image/gif' :http-request='upload' :before-upload='beforeUploadImg' :on-success='uploadSuccess' :on-error='uploadError' :show-file-list='false'> <i class='el-icon-plus avatar-uploader-icon'></i> </el-upload> <quill-editor v-model='content' ref='QuillEditor' :options='editorOption' @blur='onEditorBlur($event)' @focus='onEditorFocus($event)' @ready='onEditorReady($event)'> </quill-editor> </div></template><script> import axios from ’@/API/’;import { quillEditor } from 'vue-quill-editor';import COS from 'cos-js-sdk-v5';import Upload from ’@/components/Upload.vue’;import { addQuillTitle } from ’../utils/quill-title.js’;import 'quill/dist/quill.core.css';import 'quill/dist/quill.snow.css';import 'quill/dist/quill.bubble.css'; // 工具欄配置 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 { data() { return { editorOption: { placeholder: ’請(qǐng)輸入編輯內(nèi)容’, theme: ’snow’, //主題風(fēng)格 modules: { toolbar: { container: toolbarOptions, // 工具欄 handlers: { ’image’: function (value) { if (value) { document.querySelector(’#quill-upload input’).click() } else { this.quill.format(’image’, false); } } } } } }, // 富文本編輯器配置 content: ’’, //富文本內(nèi)容 } }, methods: { // 上傳圖片前 beforeUpload(res, file) { const isJPG = file.type === ’image/jpg’ || file.type === ’image/png’ || file.type === ’image/jpeg’ const isLt1M = file.size / 1024 / 1024 < 1 if (!isJPG) { this.$message.error(’支持JPG、PNG格式的圖片,大小不得超過(guò)1M’) } if (!isLt1M) { this.$message.error(’文件最大不得超過(guò)1M’) } return isJPG && isLt1M }, // 上傳圖片成功 uploadSuccess(res, file) { let quill = this.$refs.QuillEditor.quill; let length = quill.getSelection().index; quill.insertEmbed(length, ’image’, url); quill.setSelection(length+1) }, // 上傳圖片失敗 uploadError(res, file) {this.$message.error(’圖片插入失敗’) }, // 上傳圖片處理過(guò)程 upload(req){} } }</script><style scoped>.avatar-uploader{display: none;}</style>
2.編輯器上增加title提示
在編輯器上增加一個(gè)quill-title.js的工具欄的title的配置文件
const titleConfig = { ’ql-bold’:’加粗’, ’ql-color’:’字體顏色’, ’ql-font’:’字體’, ’ql-code’:’插入代碼’, ’ql-italic’:’斜體’, ’ql-link’:’添加鏈接’, ’ql-background’:’背景顏色’, ’ql-size’:’字體大小’, ’ql-strike’:’刪除線’, ’ql-script’:’上標(biāo)/下標(biāo)’, ’ql-underline’:’下劃線’, ’ql-blockquote’:’引用’, ’ql-header’:’標(biāo)題’, ’ql-indent’:’縮進(jìn)’, ’ql-list’:’列表’, ’ql-align’:’文本對(duì)齊’, ’ql-direction’:’文本方向’, ’ql-code-block’:’代碼塊’, ’ql-formula’:’公式’, ’ql-image’:’圖片’, ’ql-video’:’視頻’, ’ql-clean’:’清除字體樣式’};export function addQuillTitle(){ const oToolBar = document.querySelector(’.ql-toolbar’), aButton = oToolBar.querySelectorAll(’button’), aSelect = oToolBar.querySelectorAll(’select’), aSpan= oToolBar.querySelectorAll(’span’); aButton.forEach((item)=>{ if(item.className === ’ql-script’){ item.value === ’sub’ ? item.title = ’下標(biāo)’: item.title = ’上標(biāo)’; }else if(item.className === ’ql-indent’){ item.value === ’+1’ ? item.title =’向右縮進(jìn)’: item.title =’向左縮進(jìn)’; }else if(item.className === ’ql-list’){ item.value===’ordered’ ? item.title=’有序列表’ : item.title=’無(wú)序列表’ }else if(item.className === ’ql-header’){ item.value === ’1’ ? item.title = ’標(biāo)題H1’: item.title = ’標(biāo)題H2’; }else{ item.title = titleConfig[item.classList[0]]; } }); aSelect.forEach((item)=>{ if(item.className!=’ql-color’&&item.className!=’ql-background’){ item.parentNode.title = titleConfig[item.classList[0]]; } }); aSpan.forEach((item)=>{ if(item.classList[0]===’ql-color’){ item.title = titleConfig[item.classList[0]]; }else if(item.classList[0]===’ql-background’){ item.title = titleConfig[item.classList[0]]; } });}
在editor.vue中引入quill-title.js
<template> <div> <!-- 圖片上傳組件輔助--> <el-upload action='' accept='image/jpg, image/jpeg, image/png, image/gif' :http-request='upload' :before-upload='beforeUploadImg' :on-success='uploadSuccess' :on-error='uploadError' :show-file-list='false'> <i class='el-icon-plus avatar-uploader-icon'></i> </el-upload> <quill-editor v-model='content' ref='QuillEditor' :options='editorOption' @blur='onEditorBlur($event)' @focus='onEditorFocus($event)' @ready='onEditorReady($event)'> </quill-editor> </div></template><script> import axios from ’@/API/’;import { quillEditor } from 'vue-quill-editor';import COS from 'cos-js-sdk-v5';import Upload from ’@/components/Upload.vue’;import { addQuillTitle } from ’../utils/quill-title.js’;import 'quill/dist/quill.core.css';import 'quill/dist/quill.snow.css';import 'quill/dist/quill.bubble.css'; // 工具欄配置 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 { data() { return { editorOption: { placeholder: ’請(qǐng)輸入編輯內(nèi)容’, theme: ’snow’, //主題風(fēng)格 modules: { toolbar: { container: toolbarOptions, // 工具欄 handlers: { ’image’: function (value) { if (value) { document.querySelector(’#quill-upload input’).click() } else { this.quill.format(’image’, false); } } } } } }, // 富文本編輯器配置 content: ’’, //富文本內(nèi)容 } }, mounted(){ addQuillTitle(); }, methods: { // 上傳圖片前 beforeUpload(res, file) { const isJPG = file.type === ’image/jpg’ || file.type === ’image/png’ || file.type === ’image/jpeg’ const isLt1M = file.size / 1024 / 1024 < 1 if (!isJPG) { this.$message.error(’支持JPG、PNG格式的圖片,大小不得超過(guò)1M’) } if (!isLt1M) { this.$message.error(’文件最大不得超過(guò)1M’) } return isJPG && isLt1M }, // 上傳圖片成功 uploadSuccess(res, file) { let quill = this.$refs.QuillEditor.quill; let length = quill.getSelection().index; quill.insertEmbed(length, ’image’, url); quill.setSelection(length+1) }, // 上傳圖片失敗 uploadError(res, file) {this.$message.error(’圖片插入失敗’) }, // 上傳圖片處理過(guò)程 upload(req){} } }</script><style scoped>.avatar-uploader{display: none;}</style>
補(bǔ)充知識(shí):Vue引用quill富文本編輯器,圖片處理的兩個(gè)神器插件(quill-image-drop-module、quill-image-resize-module)的正確姿勢(shì)。(解決各種報(bào)錯(cuò))
一、前言
我在vue-quill-editor的Github認(rèn)識(shí)了這兩個(gè)插件。
quill-image-drop-module:允許粘貼圖像并將其拖放到編輯器中。
quill-image-resize-module:允許調(diào)整圖像大小。
都很實(shí)用吶!
然而DEMO不夠詳細(xì),實(shí)際引用時(shí),報(bào)了很多錯(cuò)誤。
如
Cannot read property ’imports’ of undefined'、
Failed to mount component: template or render function not defined.、
Cannot read property ’register’ of undefined。
下面說(shuō)一下正確的引用姿勢(shì)。
二、我的環(huán)境
Webpack + Vue-Cli 2.0 (vue init非simple的版本)
三、正文
1、確保你的quill富文本編輯器(不添加插件時(shí))可以正常運(yùn)行。
2、安裝NPM依賴。
cnpm install quill-image-drop-module -S
cnpm install quill-image-resize-module -S
3、在build文件夾下找到webpack.base.conf.js。
修改:
module.exports = { plugins: [ new webpack.ProvidePlugin({ // 在這兒添加下面兩行 ’window.Quill’: ’quill/dist/quill.js’, ’Quill’: ’quill/dist/quill.js’ }) ]}
4、修改你在頁(yè)面引用的“quill富文本組件”。
修改<script>標(biāo)簽內(nèi)代碼:
// 以前需要有下面幾行: import { quillEditor } from ’vue-quill-editor’ //注意quillEditor必須加大括號(hào),否則報(bào)錯(cuò)。 import 'quill/dist/quill.core.css';// import 'quill/dist/quill.snow.css'; // 新增下面代碼: import resizeImage from ’quill-image-resize-module’ // 調(diào)整大小組件。 import { ImageDrop } from ’quill-image-drop-module’; // 拖動(dòng)加載圖片組件。 Quill.register(’modules/imageDrop’, ImageDrop); Quill.register(’modules/resizeImage ’, resizeImage )
然后,修改頁(yè)面引用的:options='editorOption'。
editorOption: { modules: { // 新增下面 imageDrop: true, // 拖動(dòng)加載圖片組件。 imageResize: { //調(diào)整大小組件。 displayStyles: { backgroundColor: ’black’, border: ’none’, color: ’white’ }, modules: [ ’Resize’, ’DisplaySize’, ’Toolbar’ ] } }}
重新 npm run dev ,插件運(yùn)行成功!
以上這篇淺談vue中使用編輯器vue-quill-editor踩過(guò)的坑就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章:
1. php網(wǎng)絡(luò)安全中命令執(zhí)行漏洞的產(chǎn)生及本質(zhì)探究2. 三個(gè)不常見(jiàn)的 HTML5 實(shí)用新特性簡(jiǎn)介3. Angular獲取ngIf渲染的Dom元素示例4. IIS+PHP添加對(duì)webp格式圖像的支持配置方法5. ASP調(diào)用WebService轉(zhuǎn)化成JSON數(shù)據(jù),附j(luò)son.min.asp6. 無(wú)線標(biāo)記語(yǔ)言(WML)基礎(chǔ)之WMLScript 基礎(chǔ)第1/2頁(yè)7. 使用.net core 自帶DI框架實(shí)現(xiàn)延遲加載功能8. Warning: require(): open_basedir restriction in effect,目錄配置open_basedir報(bào)錯(cuò)問(wèn)題分析9. php測(cè)試程序運(yùn)行速度和頁(yè)面執(zhí)行速度的代碼10. ASP.NET Core 5.0中的Host.CreateDefaultBuilder執(zhí)行過(guò)程解析
