浅谈vue中使用编辑器vue-quill-editor踩过的坑

2023-07-19 10:27:05 348

结合vue+element-ui+vue-quill+editor二次封装成组件

1.图片上传

分析原因

项目中使用vue-quill-editor富文本编辑器，在编辑内容的时候，我们往往会编辑图片，而vue-quill-editor默认的处理方式是直接将图片转成base64格式，导致上传的内容十分庞大，且服务器接受post的数据的大小是有限制的，很有可能就提交失败，造成用户体验差。

引入element-ui

编辑editor.vue文件

在editor.vue中引入vue-quill-editor





.avatar-uploader{
	display:none;
}

2.编辑器上增加title提示

在编辑器上增加一个quill-title.js的工具栏的title的配置文件

consttitleConfig={
'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':'清除字体样式'
};



exportfunctionaddQuillTitle(){
constoToolBar=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='上标';
}elseif(item.className==='ql-indent'){
item.value==='+1'?item.title='向右缩进':item.title='向左缩进';
}elseif(item.className==='ql-list'){
item.value==='ordered'?item.title='有序列表':item.title='无序列表'
}elseif(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]];
}elseif(item.classList[0]==='ql-background'){
item.title=titleConfig[item.classList[0]];
}
});
}

在editor.vue中引入quill-title.js





.avatar-uploader{
	display:none;
}

补充知识：Vue引用quill富文本编辑器，图片处理的两个神器插件（quill-image-drop-module、quill-image-resize-module）的正确姿势。（解决各种报错）

一、前言

我在vue-quill-editor的Github认识了这两个插件。

quill-image-drop-module：允许粘贴图像并将其拖放到编辑器中。

quill-image-resize-module：允许调整图像大小。

都很实用呐！

然而DEMO不够详细，实际引用时，报了很多错误。

如

Cannotreadproperty'imports'ofundefined"、

Failedtomountcomponent:templateorrenderfunctionnotdefined.、

Cannotreadproperty'register'ofundefined。

下面说一下正确的引用姿势。

二、我的环境

Webpack+Vue-Cli2.0(vueinit非simple的版本)

三、正文

1、确保你的quill富文本编辑器（不添加插件时）可以正常运行。

2、安装NPM依赖。

cnpminstallquill-image-drop-module-S

cnpminstallquill-image-resize-module-S

3、在build文件夹下找到webpack.base.conf.js。

修改：

module.exports={
plugins:[
newwebpack.ProvidePlugin({
//在这儿添加下面两行
'window.Quill':'quill/dist/quill.js',
'Quill':'quill/dist/quill.js'
})
]
}

4、修改你在页面引用的“quill富文本组件”。

修改

浅谈vue中使用编辑器vue-quill-editor踩过的坑

随机推荐