---

欢迎关注 『VUE』 专栏，持续更新中
欢迎关注 『VUE』 专栏，持续更新中

需求分析

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

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

---

实现效果

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

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

---

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中设置自定义方法,否则用默认的组件方法

      <quillEditor
              class="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);//消除文本颜色
            }
          },
        }
      }
    }
  },

---

总结

大家喜欢的话，给个👍，点个关注！给大家分享更多计算机专业学生的求学之路！

版权声明：

发现你走远了@mzh原创作品，转载必须标注原文链接

Copyright 2024 mzh

Crated：2024-3-1

欢迎关注 『VUE』 专栏，持续更新中
欢迎关注 『VUE』 专栏，持续更新中
『未完待续』

---