Tiptap 文字颜色扩展实战3步给选中文字上色【免费下载链接】tiptapThe headless rich text editor framework for web artisans.项目地址: https://gitcode.com/GitHub_Trending/ti/tiptapTiptap 是一个无头headless富文本编辑器框架它的文字颜色功能由tiptap/extension-color扩展提供选中一段文字调用setColor命令这段文字就带上你指定的颜色值再加一个BackgroundColor重点内容还能换底色。本文面向 Vue / React 开发者把 Tiptap 文字颜色扩展从零跑起来并把颜色设了但不生效这类常见坑一次讲清。三个扩展的关系先看懂再动手用 Tiptap 文字颜色扩展之前先记住这条依赖链后面所有配置都建立在它上面TextStyle标记渲染成span是底座。没有它颜色和底色就无处安放。Color / BackgroundColor把color、backgroundColor两个属性挂到 textStyle 标记上渲染时输出成内联 style解析时读回原始颜色值#958DF1不会被浏览器转成rgb(...)。tiptap/extension-color包本身只有一行代码把 TextStyle 包里的 Color 再导出一次方便单独安装和按需引入见 packages/extension-color/src/index.ts。setColor的实现本质上就是给 textStyle 标记设属性完整逻辑在 packages/extension-text-style/src/color/color.ts代码不长建议直接读一遍。5分钟完成集成最小可运行配置以 Vue 为例注册四个扩展就能用这是官方 demo 的真实写法import Document from tiptap/extension-document import Paragraph from tiptap/extension-paragraph import Text from tiptap/extension-text import { Color, TextStyle } from tiptap/extension-text-style import { Editor, EditorContent } from tiptap/vue-3 const editor new Editor({ extensions: [Document, Paragraph, Text, TextStyle, Color], content: pspan stylecolor: #958DF1紫色的文字/span普通文字/p, })React 项目把最后的 import 换成tiptap/react的useEditor扩展列表完全一样。特别注意别漏掉 TextStyle——只装 Color 不装它颜色写不进任何节点。常用命令速查上色、换色、清除工具栏按钮全部由这几个 API 驱动// 给当前选中的文字上色支持任意 CSS 颜色值 editor.chain().focus().setColor(#958DF1).run() // 取消颜色空的 textStyle 标记会被自动清掉 editor.chain().focus().unsetColor().run() // 读取当前选区的颜色值直接绑给 input typecolor 很方便 editor.getAttributes(textStyle).color // 判断某颜色是否激活常用来给工具栏按钮加高亮 editor.isActive(textStyle, { color: #958DF1 })背景色同理命令换成setBackgroundColor(#FBBC88)/unsetBackgroundColor()属性名换成backgroundColor其余用法一模一样。把颜色应用到段落和标题上 默认情况下颜色只作用于 textStyle 标记也就是选中的那段文字。想给整个标题或整段文字换色改types选项即可import { Color } from tiptap/extension-color Color.configure({ // 颜色作为节点属性挂到标题和段落上 types: [heading, paragraph], })配置后setColor把颜色写到节点属性上作用范围从选中文字变成整个节点。两种写法可以共存默认的 textStyle 管文字级颜色改过 types 的实例管节点级颜色标题一个颜色、强调一个颜色、引用块换底色都能做。颜色不生效先查这三处漏了 TextStyle。颜色值都写在 textStyle 标记里扩展列表里必须有 TextStyle这是最高频的原因。types 没对齐预期。颜色能设上但只改了选中的字说明默认的[textStyle]在生效要整节点变色按上一节改 types。外部内容进不来。TextStyle 只解析带style属性的spanfont color老写法不会被识别。从其他编辑器导入内容时嵌套 span 的样式合并由mergeNestedSpanStyles选项控制默认开启细节以官方文档为准。背景色 字体样式TextStyleKit 一次装齐如果除了 Tiptap 背景色还要字体、字号、行高可以不用逐个注册TextStyleKit 这个组合扩展一次装齐import { TextStyleKit } from tiptap/extension-text-style // 一个扩展装下文字颜色、背景色、字体、字号、行高 TextStyleKit.configure({ fontFamily: false, // 用不到的直接关掉 })到这里Tiptap 文字颜色扩展的最小配置、常用命令和避坑点就齐了。想看完整的色板工具栏和取色器实现直接读 demos/src/Extensions/Color/Vue/index.vue扩展的其余行为以官方文档为准。【免费下载链接】tiptapThe headless rich text editor framework for web artisans.项目地址: https://gitcode.com/GitHub_Trending/ti/tiptap创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考