<template>
|
<quill-editor
|
v-model="content"
|
ref="myQuillEditor"
|
:options="editorOption"
|
@blur="onEditorBlur($event)"
|
@focus="onEditorFocus($event)"
|
@change="onEditorChange($event)"
|
@ready="onEditorReady($event)">
|
</quill-editor>
|
</template>
|
<script>
|
import { quillEditor } from 'vue-quill-editor'
|
import Quill from 'quill'
|
import 'quill/dist/quill.core.css'
|
import 'quill/dist/quill.snow.css'
|
import 'quill/dist/quill.bubble.css'
|
|
// 源码中是import直接倒入，这里要用Quill.import引入
|
const Link = Quill.import('formats/link')
|
// 自定义a链接
|
class FileBlot extends Link {
|
// 继承Link Blot
|
static create (value) {
|
let node
|
if (value && !value.href) {
|
// 适应原本的Link Blot
|
node = super.create(value)
|
} else {
|
// 自定义Link Blot
|
node = super.create(value.href)
|
node.href = value.href
|
node.innerText = value.innerText
|
// node.setAttribute('download', value.innerText); // 左键点击即下载
|
}
|
return node
|
}
|
}
|
FileBlot.blotName = 'link' // 这里不用改，如果需要也可以保留原来的，这里用个新的blot
|
FileBlot.tagName = 'A'
|
Quill.register(FileBlot) // 注册link
|
|
export default {
|
name: 'RichText',
|
components: {
|
quillEditor
|
},
|
data () {
|
return {
|
content: '',
|
editorOption: {
|
modules: {
|
toolbar: [
|
['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: ['12', '14', '16', '18', '20', '22', '24', '28', '32', '36'] }], // 字体大小
|
[{ header: [1, 2, 3, 4, 5, 6] }], // 标题
|
[{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
|
[{ align: [] }], // 对齐方式
|
['clean'], // 清除文本格式
|
['link', 'image', 'video'] // 链接、图片、视频
|
]
|
},
|
placeholder: '请输入正文'
|
}
|
}
|
},
|
mounted () {
|
const quill = this.$refs.myQuillEditor.quill // 获取富文本实例
|
const range = quill.getSelection(true) // 获取光标所在位置
|
const linkText = 'https://www.baidu.com/' // 连接
|
const content = '百度一下' // 内容
|
quill.insertEmbed(range.index, 'link', { href: linkText, innerText: content }, 'api')
|
quill.setSelection(range.index + linkText.length) // 调整光标到最后
|
},
|
methods: {
|
// 失去焦点事件
|
onEditorBlur (quill) {
|
console.log('editor blur!', quill)
|
},
|
// 获得焦点事件
|
onEditorFocus (quill) {
|
console.log('editor focus!', quill)
|
},
|
// 准备富文本编辑器
|
onEditorReady (quill) {
|
console.log('editor ready!', quill)
|
},
|
// 内容改变事件
|
onEditorChange ({ quill, html, text }) {
|
console.log('editor change!', quill, html, text)
|
}
|
}
|
}
|
</script>
|
