关于vue-quill-editor富文本编辑器 图片上传到服务器问题

·  阅读 487

关于vue-quill-editor富文本编辑器

一、简介

基于 Quill,适用于Vue的富文本编辑器,支持服务端渲染和单页应用。
不过有一定的兼容性,就是兼容IE10+;
复制代码

二、项目背景

  在最近项目中,使用编辑器时,经常会用到表单验证结合富文本编辑器上传图片的功能。
  编辑器默认都是使用`base64`来处理图片,如果图片过大的话会让`base64`文件过大,就会超过表单
  验证的条件,所以需要将图片上传到服务器来解决。
复制代码

三、具体实现

首先下载相关的依赖包

npm i vue-quill-editor -S //插件名称
npm i quill-image-extend-module -S //编辑器的增强模块
复制代码

quill-image-extend-modulequill编辑器的扩展模块,主要提供图片上传到服务器的功能。

具体代码实现(根据项目中表单包裹实现)

<template>
    <el-form-item label="其他说明">
        <div>
             <quill-editor v-model="ruleForm.instructions" ref="myQuillEditor" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)">
             </quill-editor>
        </div>
    </el-form-item>
</tempalte>

<script>
import { quillEditor, Quill } from "vue-quill-editor";//调用编辑器
import { ImageExtend, QuillWatch } from "quill-image-extend-module";
Quill.register("modules/ImageExtend", ImageExtend); //注册扩展模块
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";

export default {
	components: {
		quillEditor
	},
	data() {
		return {
			// 富文本编辑器内容
			flag: "",
			labelPosition: "left",
			editorOption: {
				placeholder: "请输入内容",
				modules: {
					ImageExtend: {
						loading: true,
						name: "file",
						action: '/home/file/upload', 
						response: (res) => {
							return this.api.imageUrl + res.data;
						},
					},
					toolbar: {
						container: [["bold", "italic", "underline"],
							["blockquote"],
							//列表
							[{ list: "ordered" }, { list: "bullet" }],
							// 文本方向
							[{ direction: "rtl" }],
							// 字体颜色,字体背景颜色
							[{ color: [] }, { background: [] }],
							//字体
							[{ font: [] }],
							//对齐方式
							[{ align: [] }],
							//上传图片
							['image'],
							//清除字体样式
							["clean"]
						],
						handlers: {
							image: function () {
								QuillWatch.emit(this.quill.id);
							},
						}
					}
                     }
               }
        }
}
复制代码
quill-image-extend-module 相关配置

ImageExtend下的action表示服务器地址,因为各环境地址可能不同所以可以通过环境变量进行配置,比如development环境为/home/file/upload,以下是quill-image-extend-module 的所有可配置项:

editorOption:{
  modules: {
    ImageExtend: {
      loading: true, // 可选参数 是否显示上传进度和提示语
      name: "img", // 图片参数名
      size: 3, // 可选参数 图片大小,单位为M,1M = 1024kb
      action: updateUrl, // 服务器地址, 如果action为空,则采用base64插入图片
      // response 为一个函数用来获取服务器返回的具体图片地址
      // 例如服务器返回{code: 200; data:{ url: 'baidu.com'}}
      // 则 return res.data.url
      response: (res) => {
        return res.info;
      },
      headers: (xhr) => {}, // 可选参数 设置请求头部
      start: () => {}, // 可选参数 自定义开始上传触发事件
      end: () => {}, // 可选参数 自定义上传结束触发的事件,无论成功或者失败
      error: () => {}, // 可选参数 自定义网络错误触发的事件
      change: (xhr, formData) => {}, // 可选参数 选择图片触发,也可用来设置头部,但比headers多了一个参数,可设置formData
    },
    toolbar: {
      container: container, // container为工具栏,此次引入了全部工具栏,也可自行配置
      handlers: {
        image: function () {
          // 劫持原来的图片点击按钮事件
          document.querySelector(".quill-image-input").click();
        },
      },
    },
  },
}
复制代码

由于不同的用户的服务器返回的数据格式不相同,因此在配置中需要return接口返回的图片地址。

// 你必须把返回的数据中所包含的图片地址 return 回去
respnse: (res) => {
  return res.info  // 这里切记要return回你的图片地址
}
复制代码
分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改