vue 富文本编辑器上传图片到服务器并显示到富文本中

问题：因为富文本编辑器上传图片后，是转成base64保存进数据库，图片过大时参数会很长。
前提条件：安装了quill富文本编辑器。npm install quill@1.3.6
1，安装好后在页面直接引入quill

import Quill from "quill";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";

2，先隐藏一个element的上传图片的组件

<el-upload:action="uploadUrl":on-success="handleUploadSuccess":on-error="handleUploadError"name="file":show-file-list="false":headers="headers"style="display: none"ref="upload"v-if="this.uploadUrl"></el-upload>

3，生成富文本编辑器
生成位置

<div class="editor" ref="editor" :style="styles"></div>

参数

uploadUrl：process.env.VUE_APP_BASE_API+'/file/upload',//上传路径
Quill: null,//quill实例
currentValue: "",
options: {theme: "snow",//主题bounds: document.body,debug: "warn",modules: {// 工具栏配置toolbar: [["bold", "italic", "underline", "strike"],       // 加粗 斜体 下划线 删除线["blockquote", "code-block"],                    // 引用  代码块[{ list: "ordered" }, { list: "bullet" }],       // 有序、无序列表[{ indent: "-1" }, { indent: "+1" }],            // 缩进[{ size: ["small", false, "large", "huge"] }],   // 字体大小[{ header: [1, 2, 3, 4, 5, 6, false] }],         // 标题[{ color: [] }, { background: [] }],             // 字体颜色、字体背景颜色[{ align: [] }],                                 // 对齐方式["clean"],                                       // 清除文本格式["link", "image"]                                // 链接、图片],},placeholder: "请输入内容",readOnly: this.readOnly,//只读},

生成

init() {const editor = this.$refs.editor;//dom元素//创建this.Quill = new Quill(editor, this.options);// 定义图片上传事件if (this.uploadUrl) {let toolbar = this.Quill.getModule("toolbar");toolbar.addHandler("image", (value) => {if (value) {this.$refs.upload.$children[0].$refs.input.click();} else {this.quill.format("image", false);}});}//赋值，显示内容this.Quill.pasteHTML(this.currentValue);//修改内容后，得到显示内容this.Quill.on("text-change", (delta, oldDelta, source) => {const html = this.$refs.editor.children[0].innerHTML;const text = this.Quill.getText();const quill = this.Quill;this.currentValue = html;})},

上传图片成功后，显示图片在富文本里面

handleUploadSuccess(res, file) {// 获取富文本组件实例let quill = this.Quill;// 如果上传成功if (res.code == 200) {// 获取光标所在位置let length = quill.getSelection().index;// 插入图片  res.url为服务器返回的图片地址quill.insertEmbed(length, "image", res.data.url);// 调整光标到最后quill.setSelection(length + 1);} else {this.$message.error("图片插入失败");}},

vue 富文本编辑器上传图片到服务器并显示到富文本中相关推荐

vue问题四：富文本编辑器上传图片
vue使用富文本编辑器上传图片: 我是用的是wangEditor 富文本编辑器 demo:http://www.wangeditor.com/ 1).安装依赖:npm install wangedit ...
vue quill富文本编辑器上传图片遇到的坑
在使用quill富文本编辑器上传图片的时候,很多地方都是成功的,但是唯有一处,上传图片总是失败,由此后端的朋友就说可以html标签转换成JSON字符串上传上去,展示的时候在转换回来,即可解决问题. 由 ...
vue3使用vue-quill实现富文本编辑器上传图片
最近开发的一个vue3+element-plus的项目,需要用到富文本编辑器,最终选择了VueQuill这一款轻便型的富文本编辑器:官网地址为 https://vueup.github.io/vue- ...
富文本编辑器上传图片的功能
今天,我们来讲一下富文本编辑器上传图片功能的操作.首先,在这里需要引入一个js插件 (config.js),在插件里面写下配置图片上传的路径. 接下来,既然要实现上传图片的功能,那我们就需要一个东西是 ...
java富文本传图片_使用富文本编辑器上传图片实例详解
富文本编辑器上传图片一.导入kindeditor的js 二.将kindeditor与一个文本域textarea进行关联,即用textarea初始化一个kindeditor对象 itemaddedit ...
富文本在服务器上图片不显示,解决CKEditor 4 富文本编辑器在图片组件无法显示[上传]选项卡的相关问题...
关于解决CKEditor 4 富文本编辑器在图片组件无法显示[上传]选项卡的相关问题. 本文可能会对以下现象得以解决: 图片上传组件,没有 [上传] 选项卡. 资源无法加载 [imgupload] ( ...
c语言课程设计文本编辑器实验报告6,C课程设计简易文本编辑器.doc
C课程设计简易文本编辑器目录第一章课程设计目的和要求1 1.1课程设计的目1 1.2 基本要求1 第二章课程设计任务内容2 2.1 设计背景2 2.2简易文本编辑器设计内容2 第三章详细设计 ...
linux 文本编辑器_Linux排名前7位的最佳文本编辑器
linux 文本编辑器 Text editors play a major role for Linux users. Whether it is setting up user instructio ...
文本编辑器的实现课程c语言,c语言文本编辑器
c语言文本编辑器Tag内容描述: 1.文本编辑器C语言课程设计报告目录1. 设计目的及要求1.1设计目的1.2设计要求1.3题目解析2. 总体设计3. 详细设计3.1流程图3.2程序解析4. 调试分析 ...
在Vue中使用Tinymce富文本编辑器+上传图片到七牛
公司官网后台需要做一个上传新闻.公告的功能,自然而然就需要用到了富文本编辑器. UEditor.Simditor.wangEditor.CKEditor.TinyMCE.Quill,这是当前比较热门的 ...

vue 富文本编辑器上传图片到服务器并显示到富文本中

vue 富文本编辑器上传图片到服务器并显示到富文本中相关推荐

最新文章

热门文章