DDR爱好者之家 Design By 杰米
结合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踩过的坑就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
暂无评论...
P70系列延期，华为新旗舰将在下月发布
3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。
而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。
更新日志
2024年12月26日
2024年12月26日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果（九）》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]