Tiptap 的 Highlight 扩展提供一个文本标记功能，可以帮助我们实现富文本编辑器里常见的荧光笔一样高亮文本。下面通过样例进行演示。

三、Highlight 高亮插件安装与使用

npm install @tiptap/extension-highlight

2，基本用法

<template>
  <div class="editor-container">
    <!-- 工具栏 -->
    <div class="menu-bar" v-if="editor">
      <button
        :class="{ active: editor.isActive('highlight') }"
        @click="toggleHighlight"
      >
        Highlight
      </button>
    </div>

    <!-- 编辑器内容区域 -->
    <EditorContent :editor="editor" class="editor-content" />
  </div>
</template>

<script>
import { Editor, EditorContent } from '@tiptap/vue-2'
import StarterKit from '@tiptap/starter-kit'
import Highlight from '@tiptap/extension-highlight'

export default {
  components: {
    EditorContent,
  },

  data() {
    return {
      editor: null,
    }
  },

  mounted() {
    this.editor = new Editor({
      extensions: [
        StarterKit,
        Highlight, // 加载 Highlight 扩展
      ],
      content: `
        <p>选中文字后，点击 Highlight 按钮试试高亮效果。</p>
      `,
    })
  },

  beforeDestroy() {
    this.editor.destroy()
  },

  methods: {
    toggleHighlight() {
      this.editor.chain().focus().toggleHighlight().run()
    },
  },
}
</script>

<style>
.editor-container {
  border: 1px solid #ccc;
  border-radius: 4px;
}
.editor-content { 
    min-height: 200px;
    padding: 12px; 
}

.menu-bar {
  padding: 8px;
  border-bottom: 1px solid #eee;
  background:#fafafa;
}

.menu-bar button {
  padding: 6px 12px;
  border: 1px solid #bbb;
  background: #fafafa;
  cursor: pointer;
}

.menu-bar button.active {
  background: #ffe066;
}
</style>

（2）运行程序，选中目标文字后点击“Highlight”可以将改文字高亮标注。

3，自定义 Highlight 颜色

<template>
  <div class="editor-container">

    <!-- 工具栏 -->
    <div class="menu-bar" v-if="editor">

      <!-- 高亮按钮（默认切换） -->
      <button
        :class="{ active: editor.isActive('highlight') }"
        @click="toggleHighlight"
      >
        Highlight
      </button>

      <!-- 多颜色选择 -->
      <span class="color-bar">
        <button
          v-for="c in colors"
          :key="c"
          class="color-btn"
          :style="{ backgroundColor: c }"
          @click="setHighlightColor(c)"
        ></button>
      </span>

      <!-- 取消高亮 -->
      <button @click="clearHighlight">Clear</button>
    </div>

    <!-- 编辑器 -->
    <EditorContent :editor="editor" class="editor-content"/>
  </div>
</template>

<script>
import { Editor, EditorContent } from '@tiptap/vue-2'
import StarterKit from '@tiptap/starter-kit'
import Highlight from '@tiptap/extension-highlight'

export default {
  components: { EditorContent },

  data() {
    return {
      editor: null,

      // 可自定义更多颜色
      colors: ['#ffeb3b', '#ff8a80', '#80d8ff', '#ccff90', '#ffd180'],
    }
  },

  mounted() {
    this.editor = new Editor({
      extensions: [
        StarterKit,

        // multicolor: true 允许自定义颜色
        Highlight.configure({
          multicolor: true,
        }),
      ],
      content: `
        <p>选中某些文字并使用上方颜色按钮，即可应用高亮颜色。</p>
      `,
    })
  },

  beforeDestroy() {
    this.editor.destroy()
  },

  methods: {
    toggleHighlight() {
      this.editor.chain().focus().toggleHighlight().run()
    },

    setHighlightColor(color) {
      this.editor.chain().focus().setHighlight({ color }).run()
    },

    clearHighlight() {
      this.editor.chain().focus().unsetHighlight().run()
    },
  },
}
</script>

<style>
.editor-container {
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* 工具栏 */
.menu-bar {
  padding: 8px;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 按钮样式 */
.menu-bar button {
  padding: 6px 12px;
  border: 1px solid #bbb;
  background: #fafafa;
  cursor: pointer;
  border-radius: 4px;
}

.menu-bar button.active {
  background: #ffe066;
}

/* 颜色按钮 */
.color-bar {
  display: flex;
  gap: 8px;
  margin-left: 15px;
}

.color-btn {
  width: 22px;
  height: 22px;
  cursor: pointer;
  border-radius: 4px;
  border: 1px solid #aaa;
  padding: 0;
}
</style>

（2）运行后，我们可以选择不同颜色进行文字高亮。