VUE-element UI使用富文本

富文本使用的是vue-quill-editor

需求：
使用富文本编辑器，上传图文信息。因为vue-quill-editor是将图片转为base64编码，所以当图片比较大（图片数量较多），提交后台时参数过长，导致提交失败或者前台展示时加载响应时间过长，用户体验差。

解决思路：
将富文本的图片上传功能，调整为点击图片icon调用隐藏的上传组件，使图片先上传至服务器，再将图片链接插入到富文本中
图片上传的话这里使用了element上传组件。
图片上传区域隐藏，自定义vue-quill-editor的图片上传，点击图片上传时调用。

配置：
安装：

npm install vue-quill-editor --save

图片扩展功能安装：

npm install quill-image-extend-module --save-dev

导入：

import Quill from 'quill'
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { container, ImageExtend } from 'quill-image-extend-module'
Quill.register('modules/ImageExtend', ImageExtend)

注册组件：

components: {
quillEditor

}

html使用：

<quill-editor ref="text" v-model="form.content" class="myQuillEditor" :options="editorOption" />

data配置：

editorOption: {modules: {ImageExtend: {// 如果不作设置，即{}  则依然开启复制粘贴功能且以base64插入name: "file", // 图片参数名size: 3, // 可选参数 图片大小，单位为M，1M = 1024kbaction: "/res/imgUpload", // 服务器地址, 如果action为空，则采用base64插入图片// response 为一个函数用来获取服务器返回的具体图片地址// 例如服务器返回{code: 200; data:{ url: 'baidu.com'}}// 则 return res.data.urlresponse: res => {return res.data;},headers: xhr => {// 上传图片请求需要携带token的 在xhr.setRequestHeader中设置xhr.setRequestHeader("Authorization",this.getCookie("username")? this.getCookie("username").token_type +this.getCookie("username").access_token: "Basic emh4eTp6aHh5");}, // 可选参数 设置请求头部sizeError: () => {}, // 图片超过大小的回调start: () => {}, // 可选参数 自定义开始上传触发事件end: () => {}, // 可选参数 自定义上传结束触发的事件，无论成功或者失败error: () => {}, // 可选参数 上传失败触发的事件success: () => {}, // 可选参数  上传成功触发的事件change: (xhr, formData) => {// xhr.setRequestHeader('myHeader','myValue')// formData.append('token', 'myToken')} // 可选参数 每次选择图片触发，也可用来设置头部，但比headers多了一个参数，可设置formData},toolbar:{container:[['bold', 'italic', 'underline', 'strike'],        //加粗，斜体，下划线，删除线['blockquote', 'code-block'],         //引用，代码块[{ 'header': 1 }, { 'header': 2 }],               // 标题，键值对的形式；1、2表示字体大小[{ 'list': 'ordered'}, { 'list': 'bullet' }],          //列表[{ 'script': 'sub'}, { 'script': 'super' }],      // 上下标[{ 'indent': '-1'}, { 'indent': '+1' }],          // 缩进[{ 'direction': 'rtl' }],                         // 文本方向[{ 'size': ['small', false, 'large', 'huge'] }],  // 字体大小[{ 'header': [1, 2, 3, 4, 5, 6, false] }],         //几级标题[{ 'color': [] }, { 'background': [] }],          // 字体颜色，字体背景颜色[{ 'font': [] }],         //字体[{ 'align': [] }],        //对齐方式['clean'],        //清除字体样式['image','video']        //上传图片、上传视频]}},},

mounter（）函数内注册绑定事件

this.$refs.text.quill.getModule("toolbar").addHandler("image", this.imgHandler)

method:

imgHandler(state) {this.quillImg = truethis.addRange = this.$refs.text.quill.getSelection()if (state) {let fileInput = this.$refs.addImgconsole.log(fileInput)fileInput.click() }},

由于上传组件之前设置为不要自动上传到服务器，因此在上传组件的changeFile事件中，判断是否为富文本图片上传，若是，则直接上传到服务器。

常见的坑：
1、ref绑定dom发现打印出来undefined，一般由于该dom节点是v-if渲染的，mounted时该dom还未出现。
2、编辑好的富文本内容，在页面中渲染时格式无效。
解决方式：文本渲染区域，要加class名为‘ql-editor’

附：
// 富文本框参数设置

  editorOption: {modules: {ImageExtend: {// 如果不作设置，即{}  则依然开启复制粘贴功能且以base64插入name: "file", // 图片参数名size: 3, // 可选参数 图片大小，单位为M，1M = 1024kbaction: "/api/admin/sys-file/uploadImg", // 服务器地址, 如果action为空，则采用base64插入图片// response 为一个函数用来获取服务器返回的具体图片地址// 例如服务器返回{code: 200; data:{ url: 'baidu.com'}}// 则 return res.data.urlresponse: res => {return res.data;},headers: xhr => {// 上传图片请求需要携带token的 在xhr.setRequestHeader中设置xhr.setRequestHeader("Authorization",this.getCookie("username")? this.getCookie("username").token_type +this.getCookie("username").access_token: "Basic emh4eTp6aHh5");}, // 可选参数 设置请求头部sizeError: () => {}, // 图片超过大小的回调start: () => {}, // 可选参数 自定义开始上传触发事件end: () => {}, // 可选参数 自定义上传结束触发的事件，无论成功或者失败error: () => {}, // 可选参数 上传失败触发的事件success: () => {}, // 可选参数  上传成功触发的事件change: (xhr, formData) => {// xhr.setRequestHeader('myHeader','myValue')// formData.append('token', 'myToken')} // 可选参数 每次选择图片触发，也可用来设置头部，但比headers多了一个参数，可设置formData},toolbar: {// 如果不上传图片到服务器，此处不必配置container: [["bold", "italic", "underline", "strike"], // toggled buttons["blockquote", "code-block"],[{ header: 1 }, { header: 2 }], // custom button values[{ list: "ordered" }, { list: "bullet" }],[{ script: "sub" }, { script: "super" }], // superscript/subscript[{ indent: "-1" }, { indent: "+1" }], // outdent/indent[{ direction: "rtl" }], // text direction[{ size: ["small", false, "large", "huge"] }], // custom dropdown[{ header: [1, 2, 3, 4, 5, 6, false] }],[{ color: [] }, { background: [] }], // dropdown with defaults from theme[{ font: [] }],[{ align: [] }],["image"] //去除video即可], // container为工具栏，此次引入了全部工具栏，也可自行配置handlers: {image: function() {// 劫持原来的图片点击按钮事件QuillWatch.emit(this.quill.id);}}}}}

参考链接：
https://www.jianshu.com/p/4672be711a6b
https://www.jianshu.com/p/d0c1884505f1
https://segmentfault.com/a/1190000015954237
https://segmentfault.com/a/1190000012992461
https://www.jianshu.com/p/36b144b4cef8
https://blog.csdn.net/Alison_Rose/article/details/79929319
quill官方文档：https://quilljs.com/docs/quickstart/

VUE-element UI使用富文本相关推荐

element ui html编辑器,Vue + Element UI使用富文本编辑器
第一步下载组件 npm install vue-quill-editor 第二步在需要使用的组件内引入· 富文本组件 import { quillEditor } from 'vue-quill-ed ...
Vue + Element UI 使用富文本编辑器
第一步,先下载组件 npm install vue-quill-editor 第二步,在需要使用的位置引入(富文本组件) import { quillEditor } from 'vue-quill- ...
Vue +vue-quill-editor+ Element UI使用富文本编辑器(后续更新上传视频、链接、表格....)
如果你们有问题,可以发评论提问,我看见一定回复!!!!! 文章目录一.基本使用 1.下载vue-quill-editor组件 2.引入· 富文本组件 3.工具栏相关配置 4.设置工具栏中文提示 5. ...
elementui上传图片加参数_Vue + Element UI使用富文本编辑器
第一步下载组件 npm install vue-quill-editor 第二步在需要使用的组件内引入· 富文本组件 import { quillEditor } from 'vue-quill-ed ...
vue项目中使用富文本wangEditor插件出现的 The given range isn‘t in document错误
背景近期做的后台管理系统,需要有一个富文本编辑器来录入一些API文档的功能.调研时,用UEditor,去github直接下资源包,然后引入到项目中.然而由于项目是一个vue项目,UEditor的实现 ...
Vue Element UI 之富文本图片上传服务器 + 图片地址插入富文本
该案例的情况 vue版本:vue cli3 插件:vue-quill-editor vue-quill-editor的增强模块:quill-image-extend-module quill-imag ...
【项目实战】vue+springboot项目使用富文本编辑器实现长文章发表和展示
本人前端烂,文章展示部分现在还弄的不好. 效果: 很想实现点击查看详情然后进入查看具体的文章内容,但还不知道怎么弄,有知道的兄弟可以教我一下. 首先npm下载: cnpm install vue-qu ...
vue中如何使用富文本框组件
富文本框,就是可以在文本框里面输入文本并携带自我编辑的一种编辑器,使用vue做项目时少不了用到富文本框组件,下面就来说说该组件的使用步骤一.首先要在vue脚手架的依赖按钮中添加新的依赖vue-qui ...
vue中如何使用富文本编辑器（TinyMce）
英文官网:https://www.tiny.cloud/ 中文官网:http://tinymce.ax-z.cn/ 安装使用npm install tinymce --save命令下载完整的包 np ...

VUE-element UI使用富文本

VUE-element UI使用富文本相关推荐

最新文章

热门文章