element-ui vue-quill-editor 富文本编辑器 解决插入图片不采用base64 从服务器传图片在显示返回url
vue-quill-editor默认的图片插入方式，是直接将图片转成base64编码，这样的结果是整个富文本的html片段十分冗余。我们的服务器端接收的post的数据大小都是有限制的，这样的话导致提交失败，就算不提交失败，大量的数据存入数据库也不是好事。为了解决这个问题，我考虑了两个方案，换一个富文本编辑框框架，另一个是修改vue-quill-editor的框架代码。
百度一番，果断开始尝试修改框架代码框架，因为换个富文本编辑框有太多不确定性，增加测试成本。
解决方式
如上图，我们点击图片，不是把图片的base64编码插入富文本框，而是将本地文件上传到我的文件上传地址（我这里默认提供post方式上传图片，并且返回图片地址），将图片以html方式插入在富文本框内。这样由原来的图片数据优化为了<img src="...">的html格式数据。
template部分
vue data部分
vue method部分:
element-ui vue-quill-editor 富文本编辑器 解决插入图片不采用base64 从服务器传图片在显示返回url相关推荐
- vue 是否有word编辑控件_GitHub - C84882428/editor-ui: vue集成 tinymce 富文本编辑器,增加导入 word 模板...
editor-ui vue 集成 tinymce 富文本编辑器 自定义 tinymce 富文本编辑器, 在原来的编辑器中增加上传 word 模板 最终展示效果: 主要代码: 整体思路: 1,在编辑器原 ...
- 小程序editor 富文本编辑器组件
效果: 关于editor 富文本编辑器组件 复制到组件common 里面.json 引用即可 链接:https://pan.baidu.com/s/1_QIp28IOVuyVFfKfFZwxKQ 提取 ...
- vue使用百度富文本编辑器（ueditor）
文章目录 vue使用百度富文本编辑器(ueditor) 1.进入官网或者github下载源码 2.使用grunt编译 4.安装`vue-ueditor-wrap` 5.组件中引入,自定义组件 6.后端 ...
- 小程序的四次元口袋：editor富文本编辑器的使用、渲染，以及rich-text进行解析
editor富文本 1.介绍 富文本编辑器,可以对图片.文字进行编辑.极大地丰富了我们文章的结构样式,之前小程序还没有自己开发富文本插件,而在2019年微信小程序正式发布了富文本api. 支持的类型 ...
- froala editor富文本编辑器出现验证失败的解决方法
froala editor富文本编辑器出现验证失败的解决方法 出现这种情况,首先要下载源码包地址 https://www.froala.com/wysiwyg-editor 之后引用本地的 froal ...
- 解决百度ueditor富文本编辑器不能插入视频的问题/src掉链/src清空，不能显示视频
如果你嫌弃自己配置比较麻烦,出现各种奇奇怪怪的问题你下载我 这个文件 加入到你的项中, 只 需要 修改 项目名称 就可以 运行 地址 https://download.csdn.net/d ...
- VUE+tinymce（富文本编辑器）
效果图: VUE项目引入tinymce 1.tinymce安装以及下载 npm install @tinymce/tinymce-vue -save npm install tinymce -save ...
- vue使用ckeditor4富文本编辑器配置
使用场景: 本来最开始使用的是quill富文本编辑器,但是由于功能和项目得实际需求并不是怎么适合,因为我需要在Word文档里面把一些内容进行粘贴复制进去(复制的是图文),当出现这种场景的话quill就 ...
- Vue中引入富文本编辑器
这里使用的是 vue-quill-editor 富文本组件 先安装一下: npm i vue-quill-editor -s 下载之后 去components文件夹中新建一个文件夹 KEditor,然 ...
最新文章
- 用 Flask 来写个轻博客 (17) — MV(C)_应用蓝图来重构项目
- 用python画烟花-过年了，用Python放一场浪漫烟花秀！
- Hive用户权限管理理解
- JS面向对象--你真的理解闭包了吗？
- 游戏AI之决策结构—行为树
- 工业相机5A参数及其对图像采集的影响
- cacti登录密码忘记解决方法
- VMware 虚拟上网的的三种模式 ——bridged、host-only、NAT 模式
- 大型网站技术架构（七）--网站的可扩展性架构（转）
- 《机器学习实战》原书数据与代码（基于Python3）汇总
- 用python编译linux内核,戴子轩/RK3399上编译linux-kernel
- httpwatch9.1 安装包
- python实现从oracle读数据写入mysql（1）
- centos怎么查找node安装路径_centos7下用yuminstall安装nodejs，默认装在哪个目录了
- 图像处理-HSV和RGB相互转换
- impala shell
- 企业三层架构、冗余、STP生成树协议总结
- 学会使用 GitHub 之 GtHub 与 ATOM 联姻
- PTA 7-6 高速公路超速处罚
- python模拟报数游戏有n个人围成一圈，从0到n-1按顺序编号，从第一个人开始从1到k报数，报到k的人推出圈子，然后圈子缩小，从下个人继续游戏，问最后留下来的是几号？