浅谈vue中使用编辑器vue-quill-editor踩过的坑
结合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富文本组件”。
修改