Color extension
This extension enables you to set the font color in the editor. It uses the TextStyle
mark, which renders a <span>
tag (and only that). The font color is applied as inline style then, for example <span style="color: #958DF1">
.
Install
npm install @tiptap/extension-text-style
This extension requires the TextStyle
mark.
import { Editor } from '@tiptap/core'
import { TextStyle, Color } from '@tiptap/extension-text-style'
new Editor({
extensions: [TextStyle, Color],
})
This extension is installed by default with the TextStyleKit
extension, so you don’t need to install it separately.
import { Editor } from '@tiptap/core'
import { TextStyleKit } from '@tiptap/extension-text-style'
new Editor({
extensions: [TextStyleKit],
})
Settings
types
A list of marks to which the color attribute should be applied to.
Default: ['textStyle']
Color.configure({
types: ['textStyle'],
})
Commands
setColor()
Applies the given font color as inline style.
editor.commands.setColor('#ff0000')
unsetColor()
Removes any font color.
editor.commands.unsetColor()
Source code
packages/extension-text-style/src/color/
Minimal Install
import { Editor } from '@tiptap/core'
import { Color } from '@tiptap/extension-text-style/color'
new Editor({
extensions: [Color],
})