实现流程:
①富文本工具栏添加一个自定义功能,可以修改样式,为该功能按钮添加背景图片
②添加一个组件库的上传组件,通过设置功能按钮事件调上传组件的click事件
③上传附件成功后,通过富文本的插入方法,将附件以a标签的形式插入内容中
1、安装使用富文本
官网地址:http://doc.quilljs.cn/1409423
2、使用自定义方法,重写插入链接方法
import Quill from 'quill'
var Link = Quill.import('formats/link')
class FileBlot extends Link {
static create(value) {
let node = undefined
if(value && !value.href) {
node = super.create(value)
} else{
node = super.create(value.href)
node.innerText = value.innerText
node.download = value.innerText
}
return node
}
}
FileBlot.blotName = 'link'
FileBlot.tagName = 'A'
Quill.register(FileBlot)
3、修改富文本配置项
options: {
theme: "snow",
bounds: document.body,
debug: "warn",
modules: {
// 工具栏配置
toolbar: {
container: [
["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
["blockquote", "code-block"], // 引用 代码块
[{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
[{ indent: "-1" }, { indent: "+1" }], // 缩进
[{ size: ["small", false, "large", "huge"] }], // 字体大小
[{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
[{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
[{ align: [] }], // 对齐方式
["clean"], // 清除文本格式
["link", "upload", "image", "video"] // 链接、附件、图片、视频
],
// 自定义添加一个upload功能项,监听对应的事件处理
handlers: {
'upload': value => {
this.$nextTick(() => {
this.$refs.uploadFileRef.click()
})
}
}
},
},
placeholder: "请输入内容",
readOnly: this.onlyRead,
},
4、upload组件的成功事件监听,上传成功后进行插入链接
// this.Quill:富文本实例;
// window.filePublicUrl:自定义文件服务器地址
// file:上传的文件对象
uploadChange(file) {
let length = this.Quill.getSelection().index // 获取内容长度
this.Quill.insertEmbed(length, 'link', { href: window.filePublicUrl + file.filefullPath, innerText: file.filestoredname}) // 插入链接
const num = file.filestoredname && file.filestoredname.length || 0
this.Quill.insertText(length + num, '、', true)
this.Quill.setSelection(length + num + 1) // 设置光标位置
}
// 组件初始化
init() {
const editor = this.$refs.editor
this.Quill = new Quill(editor, this.options)
}