分类：Vue-Quill-Editor

2021
01-09

vue-quill-editor插入图片路径太长问题解决方法

最近做项目的时候有一个发布新闻的需求，新闻编辑的时候要求能发布带格式的文本内容和能展示支持图片。由于项目是用Vue开发的，所以找编辑器的时候选了vue-quill-editor。编辑器长如下的样子：现在的问题但是这个编辑器会把插入的图片会转成base64位的编码，使得编辑器内容保存进数据库的时候会超出限制长度，从而报错。从问题来源着手首先要明白导致这个问题的原因是vue-quill-editor编辑器默认把上传的图片给转成base64... 继续阅读 >

2020
10-08

vue-quill-editor的使用及个性化定制操作

最近在用vue+elementui写一个小应用要用到富文本编辑器，以前做项目都一直都用ueditor，但是看了一下它与vue的兼容性并不好，又对比了几个后，选择了vue-quill-editor。vue-quill-editor基于Quill、适用于Vue的富文本编辑器，支持服务端渲染和单页应用，正是我想要的☻。这里只介绍基本的安装和部分简单的定制。我翻了很多别人写的东西对我的项目都无效，最后自己折腾出来在这记录备忘。一、安装1.安装模块npminstallv... 继续阅读 >

2020
10-08

vue-quill-editor 自定义工具栏和自定义图片上传路径操作

背景：1.某些场景下vue-quill-editor默认的工具栏部分功能不希望出现，需要删除部分功能。2.vue-quill-editor默认提供的图片上传方案是将图片转成base64存放到内容区，这会导致content字符长度太长，不一定可以传到后台保存（其实即使可以保存也不推荐这种方案）。所以我们需要将方案修改为将图片上传到服务器，然后通过URL的方式访问到图片回显及使用。vue-quill-editor工具栏改造及自定义图片上传（这里使用的是element-ui的上... 继续阅读 >

2020
10-08

浅谈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... 继续阅读 >

2020
10-08

解决Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题

假设你已经知道如何引入vue-quill-editor，并且遇到了跟我一样的问题（如上图），显示出来的图标排列不整齐，字体，文字大小选择时超出边框。你可以试试下面这种解决办法。在使用文本编辑器的vue页面中引入vue-quill-editor中的样式。@import"../../node_modules/quill/dist/quill.snow.css";然后在组件中添加class名——class=“ql-editor”。<quill-editorclass="ql-editor"></quill-editor>你就会看到错乱的图标样式已经改... 继续阅读 >

2020
09-29

Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)

使用教程(注意细看总结部分，写了几点，希望有所帮助)：1、安装插件：npminstallvue-quill-editor2、安装插件依赖：npminstallquill3、main.js文件中引入：importVuefrom'vue'importVueQuillEditorfrom'vue-quill-editor'import'quill/dist/quill.core.css'import'quill/dist/quill.snow.css'import'quill/dist/quill.bubble.css'Vue.use(VueQuillEditor)newVue({VueQuillEditor,render:h=>h(App),}).$mount('#... 继续阅读 >