結合vue+element-ui+vue-quill+editor二次封裝成組件

1.圖片上傳

分析原因

項目中使用vue-quill-editor富文本編輯器，在編輯內容的時候，我們往往會編輯圖片，而vue-quill-editor默認的處理方式是直接將圖片轉成base64格式，導致上傳的內容十分龐大，且服務器接受post的數據的大小是有限制的，很有可能就提交失敗，造成用戶體驗差。

引入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格式的圖片，大小不得超過1M’) } if (!isLt1M) { this.$message.error(’文件最大不得超過1M’) } return isJPG && isLt1M }, // 上傳圖片成功 uploadSuccess(res, file) {}, // 上傳圖片失敗 uploadError(res, file) {}, // 上傳圖片處理過程 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: ’請輸入編輯內容’, theme: ’snow’, //主題風格 modules: { toolbar: { container: toolbarOptions, // 工具欄 handlers: { ’image’: function (value) { if (value) { document.querySelector(’#quill-upload input’).click() } else { this.quill.format(’image’, false); } } } } } }, // 富文本編輯器配置 content: ’’, //富文本內容 } }, 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格式的圖片，大小不得超過1M’) } if (!isLt1M) { this.$message.error(’文件最大不得超過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(’圖片插入失敗’) }, // 上傳圖片處理過程 upload(req){} } }</script><style scoped>.avatar-uploader{display: none;}</style>

2.編輯器上增加title提示

在編輯器上增加一個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’:’上標/下標’, ’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’:’清除字體樣式’};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 = ’下標’: item.title = ’上標’; }else if(item.className === ’ql-indent’){ item.value === ’+1’ ? item.title =’向右縮進’: item.title =’向左縮進’; }else if(item.className === ’ql-list’){ item.value===’ordered’ ? item.title=’有序列表’ : item.title=’無序列表’ }else if(item.className === ’ql-header’){ item.value === ’1’ ? item.title = ’標題H1’: item.title = ’標題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: ’請輸入編輯內容’, theme: ’snow’, //主題風格 modules: { toolbar: { container: toolbarOptions, // 工具欄 handlers: { ’image’: function (value) { if (value) { document.querySelector(’#quill-upload input’).click() } else { this.quill.format(’image’, false); } } } } } }, // 富文本編輯器配置 content: ’’, //富文本內容 } }, 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格式的圖片，大小不得超過1M’) } if (!isLt1M) { this.$message.error(’文件最大不得超過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(’圖片插入失敗’) }, // 上傳圖片處理過程 upload(req){} } }</script><style scoped>.avatar-uploader{display: none;}</style>

補充知識：Vue引用quill富文本編輯器，圖片處理的兩個神器插件（quill-image-drop-module、quill-image-resize-module）的正確姿勢。（解決各種報錯）

一、前言

我在vue-quill-editor的Github認識了這兩個插件。

quill-image-drop-module：允許粘貼圖像并將其拖放到編輯器中。

quill-image-resize-module：允許調整圖像大小。

都很實用吶！

然而DEMO不夠詳細，實際引用時，報了很多錯誤。

如

Cannot read property ’imports’ of undefined'、

Failed to mount component: template or render function not defined.、

Cannot read property ’register’ of undefined。

下面說一下正確的引用姿勢。

二、我的環境

Webpack + Vue-Cli 2.0 (vue init非simple的版本)

三、正文

1、確保你的quill富文本編輯器（不添加插件時）可以正常運行。

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、修改你在頁面引用的“quill富文本組件”。

修改<script>標簽內代碼：

// 以前需要有下面幾行： import { quillEditor } from ’vue-quill-editor’ //注意quillEditor必須加大括號，否則報錯。 import 'quill/dist/quill.core.css';// import 'quill/dist/quill.snow.css'; // 新增下面代碼： import resizeImage from ’quill-image-resize-module’ // 調整大小組件。 import { ImageDrop } from ’quill-image-drop-module’; // 拖動加載圖片組件。 Quill.register(’modules/imageDrop’, ImageDrop); Quill.register(’modules/resizeImage ’, resizeImage )

然后，修改頁面引用的:options='editorOption'。

editorOption: { modules: { // 新增下面 imageDrop: true, // 拖動加載圖片組件。 imageResize: { //調整大小組件。 displayStyles: { backgroundColor: ’black’, border: ’none’, color: ’white’ }, modules: [ ’Resize’, ’DisplaySize’, ’Toolbar’ ] } }}

重新 npm run dev ，插件運行成功！

以上這篇淺談vue中使用編輯器vue-quill-editor踩過的坑就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持好吧啦網。