浅谈vue中使用编辑器vue-quill-editor踩过的坑
作者：maggie_live 发布时间：2024-04-10 13:46:00
标签：vue,编辑器,vue-quill-editor
结合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' ? 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
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 ，插件运行成功！
来源：https://blog.csdn.net/maggie_live/article/details/88695477
0
投稿猜你喜欢
一、Tensor 之间的运算规则相同大小 Tensor 之间的任何算术运算都会将运算应用到元素级不同大小 Tensor(要求dimensio- 首先将ORACLE 10g的安装光盘放入光驱，如果自动运行，一般会出现如图1安装界面： 图1 单击“开始安装”，就可以安装ORACLE 10
- 前言大家好，我是小张~记得小时候，家里只有一个钟表用来看时间(含有时针、分针、秒针的那种)，挂在墙上哒哒哒响个不停，现在生活条件好了、基本人
- “MySQL是一个功能齐全的关系数据库管理系统（RDBMS），可以与Oracle DB和Microsoft的SQL Server竞争。MyS
- 一、什么是Django ContentTypes？Django ContentTypes是由Django框架提供的一个核心功能，它对当前项目
- 今天照着样例搞了下tensorboard，发现自己无法显示scalar，而graph却可以正常显示。出现这种情况就说明，tensorfboa
- 如果你的PHP网站换了空间，必定要对Mysql数据库进行转移，一般的转移的方法，是备份再还原，有点繁琐，而且由于数据库版本的不一样会导致数据
- 代码如下： EXEC sp_rename '表名.[原列名]', '新列名', 'column
- 开发一个相机应用，需要申请三个权限：相机、读文件、写文件。1、在AndroidManifest.xml中添加<uses-permiss
- 在CMD控制台进入Jupyter notebook之前，先激活安装了该模块的配置环境，再启动jupyter notebook，问题完美解决。
- requests是一个很实用的Python HTTP客户端库，编写爬虫和测试服务器响应数据时经常会用到。可以说，Requests 完全满足如
- 本文实例为大家分享了python tkinter库实现气泡屏保和锁屏的具体代码，供大家参考，具体内容如下显示效果如下：代码： im
- 环境准备前提已经安装好python、pycharm，配置了对应的环境变量。1、安装selenium模块文件–>设置
- Python版本 实现了比之前的xxftp更多更完善的功能 1、继续支持多用户 2、继续支持虚拟目录 3、增加支持用户根目录以及映射虚拟目录
- 一、原因浅析今天在写一个Python与html5 Websocket 实例，么次终止运行重新运行脚本总是提示地址已经存在并且被使用！查询相关
- 本文实例讲述了Python嵌套函数，作用域与偏函数用法。分享给大家供大家参考，具体如下：内嵌函数（嵌套函数）：意思：在函数里面再定义一个新的
- Template无疑是一个好东西，可以将字符串的格式固定下来，重复利用。同时Template也可以让开发人员可以分别考虑字符串的格式和其内容
- 这是我的数据库student，好比输入一个值为32，查询id最接近32的整行数据，可以用以下代码import pymysqlvalue=32
- try: 语句测试代码块的错误，一般把可能会出错的代码放到这里 catch： 只有try里面的代码块发生错误时，才会执行这里的代
- 本文实例讲述了php下pdo的mysql事务处理用法。分享给大家供大家参考。具体分析如下：php+mysql事务处理的几个步骤:1.关闭自动
