浅谈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 ，插件运行成功！
以上这篇浅谈vue中使用编辑器vue-quill-editor踩过的坑就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。
相关推荐
-
解决Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题
假设你已经知道如何引入vue-quill-editor,并且遇到了跟我一样的问题(如上图),显示出来的图标排列不整齐,字体,文字大小选择时超出边框.你可以试试下面这种解决办法 . 在使用文本编辑器的vue页面中引入vue-quill-editor中的样式. @import "../../node_modules/quill/dist/quill.snow.css"; 然后在组件中添加class名 -- class="ql-editor". <quill-edi
-
Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)
使用教程(注意细看总结部分,写了几点,希望有所帮助): 1.安装插件:npm install vue-quill-editor 2.安装插件依赖:npm install quill 3.main.js文件中引入: import Vue from 'vue' import VueQuillEditor from 'vue-quill-editor' import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' impor
-
Vue项目中quill-editor带样式编辑器的使用方法
vue-quill-editor默认插入图片是直接将图片转为base64再放入内容中,如果图片比较大的话,富文本的内容就会很大. 插入视频是直接弹框输入URL地址,某些需求下我们需要让用户去本地选择自己的视频,我们可以通过vue-quill-editor内部的某些方法进行更改 该方法使用了 element-ui 和 文件上传七牛 一.npm 安装 vue-quill-editor 二.在main.js中引入 import VueQuillEditor from 'vue-quill-editor
-
vue-quill-editor富文本编辑器简单使用方法
文章刚开始先来介绍一下vue-quill-editor富文本编辑器的简单使用,具体操作步骤如下: 安装: npm install vue-quill-editor --save main.js: import VueQuillEditor from 'vue-quill-editor' import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' import 'quill/dist/quill.bubble.css'
-
浅谈Keras中fit()和fit_generator()的区别及其参数的坑
1.fit和fit_generator的区别 首先Keras中的fit()函数传入的x_train和y_train是被完整的加载进内存的,当然用起来很方便,但是如果我们数据量很大,那么是不可能将所有数据载入内存的,必将导致内存泄漏,这时候我们可以用fit_generator函数来进行训练. 下面是fit传参的例子: history = model.fit(x_train, y_train, epochs=10,batch_size=32, validation_split=0.2) 这里需要给出
-
浅谈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> <
-
vue中wangEditor5编辑器的基本使用
目录 一.wangEditor5是什么 二.wangEditor5基本使用 (一).安装 (二).编译器引入 (三).css及变量引入 三.wangEditor5工具栏配置 (一).editor.getAllMenuKeys() (二).toolbarConfig中的excludeKeys 四.wangEditor5上传图片 五.wangEditor5的一些问题收集及解决 六.完整代码 总结 一.wangEditor5是什么 wangEditor是一款富文本编译器插件,其他的我就不再过多赘述,因
-
浅谈ElementUI中switch回调函数change的参数问题
需求说明 八个switch组件,用同一个回调函数 switch组件状态发生变化时需要知道它目前开关状态 需要知道当前是哪个switch 问题描述 按照官方文档对switch事件的描述 事件名称 说明 回调参数 change switch 状态发生变化时的回调函数 新状态的值 下面这样写可以满足第二个需求,change回调函数中的参数callback就是开关当前的状态值,默认是boolean类型,但是第三个需求还不能解决. <el-switch v-model="value1" @
-
浅谈element中InfiniteScroll按需引入的一点注意事项
大家为了节省空间,常常进行按需引入来节省空间,这里我给大家来介绍一下element中按需引入无限滚动指令注意的事项. 针对前面element 按需引入的一些配置这里就不再详细介绍了. 那么这里讲的是在main.js写入以下代码. import { InfiniteScroll } from 'element-ui'; Vue.use(InfiniteScroll) 好,这样引入.注册了,那么我们接下来做得事情就是在页面使用它. <template> <ul class="inf
-
浅谈Java中FastJson的使用
FastJson的使用 使用maven导入依赖包 <!--下边依赖跟aop没关系,只是项目中用到了 JSONObject,所以引入fastjson--> <dependency> <groupId>com.alibaba</groupId> <artifactId>fastjson</artifactId> <version>1.2.70</version> </dependency> 常用方法:
-
浅谈el-table中使用虚拟列表对对表格进行优化
目录 前言 解决思路 具体实现 需要满足的必备条件 问题 前言 我们会经常使用表格,如果数据量大就直接可以分页,但是不可避免的会出现一些需要一页要展示很多条的情况,或者不用分页. 这个时候如果纯展示还好一点,列表里如果加上可编辑,就会变得卡的不行,点个下拉框,下拉框好久才会弹出来.这样是十分影响用户使用. 解决思路 首先我考虑是不是由于数据加载太慢导致的页面卡顿,于是我采用了滚动加载的方式,首先获取数据后,先加载100条数据.滚动的时候再加载到页面中,这样分批次加载,就会减轻首次加载数据量太大的
-
浅谈Vue3中watchEffect的具体用法
前言 watchEffect,它立即执行传入的一个函数,同时响应式追踪其依赖,并在其依赖变更时重新运行该函数. 换句话说:watchEffect相当于将watch 的依赖源和回调函数合并,当任何你有用到的响应式依赖更新时,该回调函数便会重新执行.不同于 watch,watchEffect 的回调函数会被立即执行(即 { immediate: true }) 此文主要讲述怎样利用清除副作用使我们的代码更加优雅~ watchEffect的副作用 什么是副作用(side effect),简单的说副作用
-
浅谈vue3中ref、toRef、toRefs 和 reactive的区别
目录 一.ref——定义任意类型响应式数据 二.reactive——定义响应式对象 三.toRef——将一个 reactive 转化为一个 ref 四.toRefs——将多个 reactive 自动解构为多个 ref 一.ref——定义任意类型响应式数据 ref 能定义“任何类型”的响应式数据(ref 在 vue3 中指响应式数据). 参数可以传入任意数据类型. 使用 ref 定义的属性必须通过 .value 的形式才能修改其值.属性的值一旦被修改就会触发模板的重新渲染以显示最新的值. 对于在
-
浅谈Angular中ngModel的$render
在我开始着手ngModel的领域时候,有一个问题很令我纠结,那就是$render()到底是做什么的呢?查了很多资料都只是简单的描述一下,这就令我很纠结了,终于在一个阳光明媚的晚上,我终于解决了这个大问题 那么这个$render方法到底是干什么的呢?他的用处就是在$viewValue改变的时候可以重新绑定model数据,但是我们要注意一点($viewValue和DOM节点的value是不同的),我觉得他们的区别有点类似setTimeout和$timeout的区别,但是又不太一样.ps:其实mode