使用vue-quill-editor富文本 实现图片上传
1. 下载并引入
import { quillEditor, Quill } from "vue-quill-editor";
import { container, ImageExtend, QuillWatch } from "quill-image-extend-module";
Quill.register('modules/ImageExtend', ImageExtend) // 别忘记加
2. 写入标签
<quill-editor class="edit" v-model.trim="content" ref="myQuillEditor" :options="editorOption"></quill-editor>
3. 配置信息 注意在data中配置
// 富文本框参数设置
editorOption: {
modules: {
ImageExtend: {
// 如果不作设置,即{} 则依然开启复制粘贴功能且以base64插入
name: "file", // 图片参数名
size: 3, // 可选参数 图片大小,单位为M,1M = 1024kb
action: "/api/admin/sys-file/uploadImg", // 服务器地址, 如果action为空,则采用base64插入图片
// response 为一个函数用来获取服务器返回的具体图片地址
// 例如服务器返回{code: 200; data:{ url: 'baidu.com'}}
// 则 return res.data.url
response: 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);
}
}
}
}
}
使用vue-quill-editor富文本 实现图片上传的更多相关文章
- 关于百度Editor富文本编辑器 自定义上传位置
因为要在网站上编辑富文本数据,所以直接采用百度的富文本编辑器,但是这个编辑器有个缺点,默认情况下,文件只能上传到网站的根目录,不能自定义路径. 而且json配置文件只能和controller.jsp在 ...
- Kindeditor JS 富文本编辑器图片上传指定路径
js //================== KindEditor.ready(function (K) { var hotelid = $("#hotelid").val(); ...
- php将富文本内容图片上传到oss并替换
/** * php 提取html中图片并替换 */ //要替换的内容 //提取图片路径的src的正则表达式 $match_str = '/(<img([^>]*)\s*src=(\'|\& ...
- Python3+Selenium3+webdriver学习笔记9(发送富文本信息及上传文件处理)
#!/usr/bin/env python# -*- coding:utf-8 -*-'''Selenium3+webdriver学习笔记9(发送富文本信息及上传文件处理)'''from seleni ...
- laravel富文本编辑和图片上传
---恢复内容开始--- 首先先找到一个适合的编辑器是胜利的一步,选择wangEditor这个编辑器 地址:http://www.wangeditor.com/ 然后选择下载,我是通过网上学习的,所以 ...
- layui 魔改:富文本编辑器添加上传视频功能
甲方又整新需求了:富文本编辑器需要可以传视频. layui本身的富文本编辑器没有传视频的功能,所以,又到了咱们魔改的时候了. 友情提醒,富文本编辑器 layedit 只有layui的V1版有,V2版没 ...
- 12-tinyMCE文本编辑器+图片上传预览+页面倒计时自动跳转
文本编辑器插件:1.将tinymce文件夹全部复制到webContent下2.tinymce/js目录下放 jquery等三个js文件3.语言包:tinymce/js/tinymce/langs目录下 ...
- bbs项目富文本编辑器实现上传文件到media目录
media目录是在project的settings中设置的,static目录是django自己使用的静态文件的上传目录,media目录是用户自定义上传文件的目录 # Django用户上传的文件都放在m ...
- 给Django后台富文本编辑器添加上传文件的功能
使用富文本编辑器上传的文件是要放到服务器上的,所以这是一个request.既然是一个request,就需要urls.py进行转发请求views.py进行处理.views.py处理完了返回一个文件所在的 ...
随机推荐
- @NOIP2018 - D1T2@ 货币系统
目录 @题目描述@ @题解@ @代码@ @题目描述@ 在网友的国度中共有 n 种不同面额的货币,第 i 种货币的面额为 a[i],你可以假设每一种货币都有无穷多张.为了方便,我们把货币种数为 n.面额 ...
- javascript中json对象与字符串互转及取值
一. json字符串转换为javascript对象,并取值 var answer = '{"id":0}' var value= JSON.parse(answer); //转 ...
- IO NIO AIO及常用框架概述
概述 nio 同步: 自己亲自出马持银行卡到银行取钱(使用同步IO时,Java自己处理IO读写). 异步: 委托一小弟拿银行卡到银行取钱,然后给你(使用异步IO时,Java将IO读写委托给OS处理,需 ...
- Hessian轻量级二进制远程调用框架
Hessian轻量级二进制远程调用框架 Hessian是一个轻量级的二进制远程调用框架,官方文档地址,它主要包括Hessian远程调用协议.Hessian序列化协议以及客户端服务端代理等几部分,关于H ...
- Android Studio(十):添加assets目录
Android Studio相关博客: Android Studio(一):介绍.安装.配置 Android Studio(二):快捷键设置.插件安装 Android Studio(三):设置Andr ...
- jq实现超级简单的隔行变色
文章地址:https://www.cnblogs.com/sandraryan/ <!DOCTYPE html> <html lang="en"> < ...
- vue 生成 二维码 qrCode 插件 使用 方法
首先安装方法:(--save 参数会改变package.json 推荐使用 下次直接install就行了) npm install --save qrcode 然后项目使用: import QRCod ...
- Codeforces Round #182 (Div. 1 + Div. 2)
A. Eugeny and Array \(r-l+1\)是奇数时,和显然无法为0. 奇数的情况需要判断-1和1的个数是否大于等于长度的一半. B. Eugeny and Play List 模拟. ...
- Python 科学计算库numpy
Numpy基础数据结构 NumPy数组是一个多维数组对象,称为ndarray.其由两部分组成: 实际的数据 描述这些数据的元数 # 多维数组ndarray import numpy as np ar ...
- cfp大纲
AFP基础知识 本章共14个考点,考试考15分左右. 本章重点: .职业道德准则 .家庭财务分析:净值的计算.储蓄的计算 .简单的财务比率分析 .金融理财和法律:企业组织形式.夫妻公共财产制度.财产分 ...