富文本编辑器：链接功能

一、安装命令

npm i vue-quill-editor

二、代码

<template><div><quill-editorv-model="content"ref="quillEditor":options="editorOptions"/></div>
</template><script>
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'export default {components: { quillEditor },data() {return {content: '',editorOptions: {modules: {toolbar: {container: ['link'],handlers: {link: this.linkHandler // 绑定自定义处理函数}}},formats: ['link'] // 必须注册格式}}},methods: {// 自定义链接处理linkHandler() {const quill = this.$refs.quillEditor.quillconst range = quill.getSelection();if (!range) {this.$message.error('请先选择要添加链接的文本')return}let url = prompt('请输入链接地址（需包含 http/https）', 'https://')if (!url) return // 用户取消输入// 自动补全协议if (!/^(https?):\/\//.test(url)) {url = 'http://' + url}// 分情况处理选中文本if (range.length > 0) {// 有选中文本：直接添加链接quill.formatText(range.index, range.length, 'link', url)} else {// 无选中文本：插入带链接的默认文本const text = prompt('请输入链接文本', '点击这里')quill.insertText(range.index, text, 'link', url)}}}
}
</script>