企业官网建设流程全解析

Tiptap 颜色扩展完整教程：3 步给富文本编辑器加上文本颜色与背景色

【免费下载链接】tiptapThe headless rich text editor framework for web artisans.项目地址: https://gitcode.com/GitHub_Trending/ti/tiptap

公告里把「重要」标成红色，往往比再开一次会更有效。用 Tiptap 的颜色扩展，三步就能给富文本编辑器加上传文本颜色与背景色：装包、注册、写几个取色按钮。看完你就能独立做出一个可以上色的编辑器。

先认识颜色扩展：它能做什么

这个能力的核心是 extension-color 包，源码在 packages/extension-color/。一句话讲，它给文字加了一个color属性，渲染时转成内联样式。底层依赖 ProseMirror 的「属性系统」——你可以理解成给每段文字贴的小标签，让它能携带自己的样式信息。Tiptap 把读写这些标签封装成一条 JS 命令，你不用碰底层。

文本颜色、背景色、清除颜色，分别对应setColor、setBackgroundColor、unsetColor三个命令。它们本质都是标记（mark），所以能跟加粗、斜体自然共存：加粗又上色、上色又高亮，随便叠。

官方演示里也有一对现成页面，色板面板和编辑器的交互都能直接看：demos/src/Extensions/Color/。

从 0 到跑通：三步快速上手

第一步，装包。核心包加颜色扩展即可，Vue、React 各自再补一个适配包：

pnpm add @tiptap/core @tiptap/vue-3 @tiptap/extension-color

第二步，注册。记住一句话：Color必须配TextStyle，后者提供承载颜色属性的标记容器，少一个颜色就不生效。

import { Color } from '@tiptap/extension-color' import Document from '@tiptap/extension-document' import Paragraph from '@tiptap/extension-paragraph' import Text from '@tiptap/extension-text' import { TextStyle } from '@tiptap/extension-text-style' const editor = new Editor({ extensions: [Document, Paragraph, Text, TextStyle, Color], content: '<p>选我，然后试下面的红色按钮</p>', })

第三步，验证。选中一段文字调一下命令，变红就说明跑通了：

editor.chain().focus().selectAll().setColor('#f03e3e').run()

🎨 搭一个和你编辑器合身的取色面板

面板 UI 完全由你决定，下面的示例是 4 个色块加一个清除按钮（Vue）。关键就两点：点击事件里调setColor命令；用isActive判断光标处的颜色，给选中的色块加高亮。

<script setup> import { useEditor, EditorContent } from '@tiptap/vue-3' import { Color, TextStyle } from '@tiptap/extension-color' import Document from '@tiptap/extension-document' import Paragraph from '@tiptap/extension-paragraph' import Text from '@tiptap/extension-text' const palette = ['#f03e3e', '#3b82f6', '#f59e0b', '#10b981'] const editor = useEditor({ extensions: [Document, Paragraph, Text, TextStyle, Color], content: '<p>选中一段文字，试试下面的色块</p>', }) </script> <template> <div v-if="editor"> <button v-for="hex in palette" :key="hex" :style="{ backgroundColor: hex }" :class="{ active: editor.isActive('textStyle', { color: hex }) }" @click="editor.chain().focus().setColor(hex).run()" /> <button @click="editor.chain().focus().unsetColor().run()">清除</button> <EditorContent :editor="editor" /> </div> </template>

想要更「专业」的取色体验，直接换成浏览器原生<input type="color">，再用editor.getAttributes('textStyle').color读出当前色值回显即可。

进阶玩法：背景色、组合标记与主题预设

背景色和文本颜色是同一套思路，实现在@tiptap/extension-text-style包里，命令换成setBackgroundColor/unsetBackgroundColor：

import { BackgroundColor } from '@tiptap/extension-text-style' editor.chain().focus().setBackgroundColor('#fff3bf').run()

组合更简单——把几条命令串在一次 chain 里，选中文字一步完成加粗、上色、高亮：

editor.chain() .focus() .toggleBold() .setColor('#c2410c') .setBackgroundColor('#ffedd5') .run()

主题预设也一样好做。把几组标记属性按业务场景存起来，需要时整体套用：

const styles = { warning: { color: '#92400e', backgroundColor: '#fef3c7' }, brand: { color: '#0f172a', backgroundColor: '#e0f2fe' }, } editor.chain().focus().setMark('textStyle', styles.warning).run()

如果你还想让颜色作用在标题、段落这类整块节点上，改一下Color.configure({ types: [...] })里的types就行，默认值是['textStyle']。

⚠️ 三个高频坑与修法

坑一：setColor 没反应。九成是漏注册了TextStyle。Color只负责颜色属性本身，标记容器没注册时命令根本无处可写。先看扩展列表里有没有它，再看types配得对不对。

坑二：清除颜色后留下「残影」。别手写unsetMark。内置的unsetColor已经把属性置空，并且顺手删掉空的textStyle节点；手写经常漏掉删节点那一步，文档里就会攒下一堆空 span，导出 HTML 时特别难看。

坑三：光标移动后面板不同步。色块高亮要跟着选区走。用editor.isActive('textStyle', { color: hex })判断当前颜色，Vue 里响应式会自动重算；React 项目用useEditorState订阅状态再取，逻辑是一样的。

🚀 下一步

想抠实现细节，颜色扩展在 packages/extension-color/，背景色在 packages/extension-text-style/；想直接跑起来看效果，演示源码在 demos/src/Extensions/BackgroundColor/。后续版本计划再补渐变文字、主题预设等能力，关注仓库更新即可。

【免费下载链接】tiptapThe headless rich text editor framework for web artisans.项目地址: https://gitcode.com/GitHub_Trending/ti/tiptap