vue-quill-editor 修改配置,和图片上传
时间:2019-11-12
本文章向大家介绍vue-quill-editor 修改配置,和图片上传,主要包括vue-quill-editor 修改配置,和图片上传使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
富文本编辑器中的图片上传是将图片转换成Base64格式的,如果需要将图片上传至自己的图片服务器,需要修改配置
quillEditor/quill-config.js
/*富文本编辑图片上传配置*/ const uploadConfig = { action: '', // 必填参数 图片上传地址 methods: 'POST', // 必填参数 图片上传方式 token: '', // 可选参数 如果需要token验证,假设你的token有存放在sessionStorage name: 'img', // 必填参数 文件的参数名 size: 500, // 可选参数 图片大小,单位为Kb, 1M = 1024Kb accept: 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon' // 可选 可上传的图片格式 }; // toolbar工具栏的工具选项(默认展示全部) const toolOptions = [ ['bold', 'italic', 'underline', 'strike'], ['blockquote', 'code-block'], [{'header': 1}, {'header': 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'], ['link', 'image', 'video'] ]; const handlers = { image: function image() { var self = this; var fileInput = this.container.querySelector('input.ql-image[type=file]'); if (fileInput === null) { fileInput = document.createElement('input'); fileInput.setAttribute('type', 'file'); // 设置图片参数名 if (uploadConfig.name) { fileInput.setAttribute('name', uploadConfig.name); } // 可设置上传图片的格式 fileInput.setAttribute('accept', uploadConfig.accept); fileInput.classList.add('ql-image'); // 监听选择文件 fileInput.addEventListener('change', function () { // 创建formData var formData = new FormData(); formData.append(uploadConfig.name, fileInput.files[0]); formData.append('object','product'); // 如果需要token且存在token if (uploadConfig.token) { formData.append('token', uploadConfig.token) } // 图片上传 var xhr = new XMLHttpRequest(); xhr.open(uploadConfig.methods, uploadConfig.action, true); // 上传数据成功,会触发 xhr.onload = function (e) { if (xhr.status === 200) { var res = JSON.parse(xhr.responseText); let length = self.quill.getSelection(true).index; //这里很重要,你图片上传成功后,img的src需要在这里添加,res.path就是你服务器返回的图片链接。 self.quill.insertEmbed(length, 'image', res.path); self.quill.setSelection(length + 1) } fileInput.value = '' }; // 开始上传数据 xhr.upload.onloadstart = function (e) { fileInput.value = '' }; // 当发生网络异常的时候会触发,如果上传数据的过程还未结束 xhr.upload.onerror = function (e) { }; // 上传数据完成(成功或者失败)时会触发 xhr.upload.onloadend = function (e) { // console.log('上传结束') }; xhr.send(formData) }); this.container.appendChild(fileInput); } fileInput.click(); } }; export default { placeholder: '', theme: 'snow', // 主题 modules: { toolbar: { container: toolOptions, // 工具栏选项 handlers: handlers // 事件重写 } } };
上述是通用模式,根据需要修改 uploadConfig 中的内容,以及修改 ajax 的内容
下面是某次使用
import $http from '@/common/request/ajax' // 这里使用axios封装了http请求 import API from '@/common/request/api' // 接口API /* 富文本编辑图片上传配置 */ const uploadConfig = { name: 'img', // 必填参数 文件的参数名 accept: 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon' // 可选 可上传的图片格式 } // toolbar工具栏的工具选项(默认展示全部) const toolOptions = [ ['bold', 'italic', 'underline', 'strike'], ['blockquote', 'code-block'], [{ 'header': 1 }, { 'header': 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'], ['link', 'image', 'video'] ] const handlers = { image: function image () { var self = this var fileInput = this.container.querySelector('input.ql-image[type=file]') if (fileInput === null) { fileInput = document.createElement('input') fileInput.setAttribute('type', 'file') // 设置图片参数名 if (uploadConfig.name) { fileInput.setAttribute('name', uploadConfig.name) } // 可设置上传图片的格式 fileInput.setAttribute('accept', uploadConfig.accept) fileInput.classList.add('ql-image') // 监听选择文件 fileInput.addEventListener('change', async () => { const formData = new FormData() formData.append('file', fileInput.files[0]) let res = await $http.post(API.uploadFile, formData) let length = 0 if (res.code === '0') { // 相当于接口成功回调 length = self.quill.getSelection(true).index } self.quill.insertEmbed(length, 'image', res.data.picUrl) self.quill.setSelection(length + 1) fileInput.value = '' }) this.container.appendChild(fileInput) } fileInput.click() } } export default { placeholder: '', theme: 'snow', // 主题 modules: { toolbar: { container: toolOptions, // 工具栏选项 handlers: handlers // 事件重写 } } }
页面:quillEditor/index.vue
<template> <div> <quill-editor ref="myTextEditor" :value="value" :options="quillOption" @input="input" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)"> </quill-editor> </div> </template> <script> 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 quillConfig from './quill-config.js' export default { props: ['value'], components: { quillEditor }, data () { return { quillOption: quillConfig } }, methods: { input (val) { this.$emit('input', val) }, onEditorBlur (e) { // 失去焦点事件 this.$emit('blur', e) }, onEditorFocus (e) { // 获取焦点事件 this.$emit('focus', e) }, onEditorChange (e) { // change事件 this.$emit('change', e) } } } </script>
组件使用:这里就可以使用v-model了
<template> <div> <myQuillEditor v-model="content" @blur="onEditorBlur"></myQuillEditor> </div> </template> <script> import myQuillEditor from '@/components/tool/quillEditor' export default { data() { return { content: `` } }, methods: { onEditorBlur(e) { // 失去焦点事件 this.innerValid() // 失去焦点时进行业务验证---这里可以去掉 console.log(e) }, } watch: { content(newVal){ // 查看内容改变时value的变化---这里可以去掉 console.log(newVal) } }, components: { myQuillEditor } } </script>
原文地址:https://www.cnblogs.com/haishen/p/11840181.html
- Kubernetes 年度关键进展回顾
- 比较一下以“反射”和“表达式”执行方法的性能差异
- 人工智能芯片是什么?有什么用?
- 柯洁食言“复出”再战AI:明年4月见分晓
- 深入探讨ASP.NET MVC的筛选器
- pytorch自然语言处理之Pooling层的句子分类
- su命令cannot set groups: Operation not permitted的解决方法
- 利用腾讯云 COS 云对象存储定时远程备份网站
- 腾讯云技术公开课:零基础入门高可用云端架构设计
- 包学会之浅入浅出Vue.js:开学篇
- 包学会之浅入浅出Vue.js:升学篇
- 一个只有99行代码的JS流程框架 (一)
- 【腾讯云的1001种玩法】试用腾讯云 Windows Server 2012 R2 镜像的几点经验分享
- 一个只有99行代码的JS流程框架(二)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 【线性回归】读取txt
- 走近STL - Vector,再次见面
- 【线性回归】标准方程法
- 133: error: in C++98 XXX must be initialized by constructor, not by '{...}'
- spring之如何将验证错误信息显示在相应界面
- 【python-leetcode329-深度优先搜索】矩阵中的最长递增路径
- 带权树 -- 哈夫曼树,与它的那张哈夫曼编码表
- 【python-动态规划】0-1背包问题
- python之列表推导和生成器表达式
- 二叉树的前中后序遍历
- 【tensorflow2.0】处理结构化数据-titanic生存预测
- 【pandas】pandas中的常见函数
- 走进STL - 哈希表,散装称重么
- 第八届蓝桥杯省赛javaB组题目解析
- 拥抱STL - 类/结构体元素查询与排序