当前位置：首页 > news >正文

『VUE』vue-quill-editor 添加超链接的同时为文字添加颜色（详细图文注释）

news 来源：原创 2025/5/23 7:09:52

需求分析

因为用户添加超链接的时候,浏览器自动给超链接增加了蓝色的样式,这导致用户忘记了修改超链接文本的颜色

提示:如果是组件封装,不知道为啥一开始不生效更改,可以刷新看是否生效

实现效果

在这里插入图片描述

选中文字添加超链接后文本变色超链接添加.

选中已经有超链接的文字后点击超链接按钮后文本去掉颜色去掉超链接.

api说明

this.quill.getSelection()

调用该方法时，Quill 编辑器会返回当前的选区信息。如果没有选中任何文本（即只有光标在某个位置），它会返回 null。

返回值：
如果选中了文本，返回的对象包含以下两个属性：
index：表示选区的起始位置，即文本在编辑器中的索引。
length：表示选区的长度，即选中部分文本的长度。
如果没有选中文本（只是光标位置），返回值是 null。
format(“link”, href)
更侧重于链接处理，它让选中的文本变成一个超链接。

this.quill.format(“link”, false);//清除

formatText(range.index, range.length, ‘color’, …)
主要是对文本的样式格式化，可以用来修改字体颜色、大小、粗细等属性。

this.quill.formatText(range.index, range.length, ‘color’, false);//清除

实现代码

editorOption的handlers中设置自定义方法,否则用默认的组件方法

      <quillEditorclass="editor":class="[size]"v-model="content"ref="myQuillEditor":options="editorOption"@blur="onEditorBlur($event)"@focus="onEditorFocus($event)"@change="onEditorChange($event)"></quillEditor>

editorOption: {theme: "snow", // or 'bubble'placeholder: this.placeholder,modules: {toolbar: {container: [["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: ["small", false, "large", "huge"] }], // 字体大小[{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题[{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色[{ font: [] }], // 字体种类[{ align: [] }], // 对齐方式["clean"], // 清除文本格式["link", "image", "video"] // 链接、图片、视频],// container: "#toolbar",handlers: {link: function(value) {const range = this.quill.getSelection();//获取选中的文本if (value) {var href = prompt('请输入url地址');href=href.indexOf('http')>-1 ? href :"error"this.quill.format("link", href);//添加url连接this.quill.formatText(range.index, range.length, 'color', 'rgb(102, 163, 224)');} else {this.quill.format("link", false);//消除url链接this.quill.formatText(range.index, range.length, 'color', false);//消除文本颜色}},}}}},