(编辑:jimmy 日期: 2024/12/25 浏览:2)
结合vue+element-ui+vue-quill+editor二次封装成组件
1.图片上传
分析原因
项目中使用vue-quill-editor富文本编辑器,在编辑内容的时候,我们往往会编辑图片,而vue-quill-editor默认的处理方式是直接将图片转成base64格式,导致上传的内容十分庞大,且服务器接受post的数据的大小是有限制的,很有可能就提交失败,造成用户体验差。
引入element-ui
编辑editor.vue文件
<template> <div> <!-- 图片上传组件辅助--> <el-upload class="avatar-uploader" 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 class="avatar-uploader" 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 class="info-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' "htmlcode"><template> <div> <!-- 图片上传组件辅助--> <el-upload class="avatar-uploader" 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 class="info-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踩过的坑就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。