vue2使用富文本编辑器vue-quill-editor
const toolOptions=[
['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' }], // 文本方向
['link', 'image', 'video'], // 链接、图片、视频
[{ align: [] }], // 添加居中按钮
[{ color: [] }], // 文字颜色按钮
],
const uploadConfig = {
modules: {
ImageExtend: {
// 如果不作设置，即{} 则依然开启复制粘贴功能且以base64插入
name: 'File', // 图片参数名
size: 0.3, // 可选参数 图片大小，单位为M，1M = 1024kb
action: '', // 服务器地址, 如果action为空，则采用base64插入图片
// response 为一个函数用来获取服务器返回的具体图片地址
// 例如服务器返回{code: 200; data:{ url: ''}}
// 则 return
response: (res) => {
console.log(res)
return res.url
},
headers: (xhr) => {
console.log(xhr)
//当前为你的接口需要的header参数设置
xhr.setRequestHeader('Authorization', `Bearer ${getAccessToken()}`)
// = `Bearer ${getAccessToken()}`
}, // 可选参数 设置请求头部
sizeError: () => {}, // 图片超过大小的回调
start: () => {}, // 可选参数 自定义开始上传触发事件
end: () => {}, // 可选参数 自定义上传结束触发的事件，无论成功或者失败
error: () => {}, // 可选参数 上传失败触发的事件
success: () => {}, // 可选参数 上传成功触发的事件
change: (xhr, formData) => {
// ('myHeader','myValue')
// ('token', 'myToken')
}, // 可选参数 每次选择图片触发，也可用来设置头部，但比headers多了一个参数，可设置formData
},
toolbar: {
// 如果不上传图片到服务器，此处不必配置
container: toolOptions, // container为工具栏，此次引入了全部工具栏，也可自行配置
handlers: {
image: function () {
// 劫持原来的图片点击按钮事件
QuillWatch.emit(this.quill.id)
},
},
},
},
}