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

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-ifeditor button v-forhex in palette :keyhex :style{ backgroundColor: hex } :class{ active: editor.isActive(textStyle, { color: hex }) } clickeditor.chain().focus().setColor(hex).run() / button clickeditor.chain().focus().unsetColor().run()清除/button EditorContent :editoreditor / /div /template想要更「专业」的取色体验直接换成浏览器原生input typecolor再用editor.getAttributes(textStyle).color读出当前色值回显即可。进阶玩法背景色、组合标记与主题预设背景色和文本颜色是同一套思路实现在tiptap/extension-text-style包里命令换成setBackgroundColor/unsetBackgroundColorimport { 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考