Background Color extension

This extension enables you to set the background color in the editor. It uses the TextStyle mark, which renders a <span> tag (and only that). The background color is applied as inline style then, for example <span style="background-color: #958DF1">.

Install

npm install @tiptap/extension-text-style

This extension requires the TextStyle mark.

import { Editor } from '@tiptap/core'
import { TextStyle, BackgroundColor } from '@tiptap/extension-text-style'

new Editor({
  extensions: [TextStyle, BackgroundColor],
})

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']

BackgroundColor.configure({
  types: ['textStyle'],
})

Commands

setBackgroundColor()

Applies the given background color as inline style.

editor.commands.setBackgroundColor('#ff0000')

unsetBackgroundColor()

Removes any background color.

editor.commands.unsetBackgroundColor()

Source code

packages/extension-text-style/src/background-color/

Minimal Install

import { Editor } from '@tiptap/core'
import { BackgroundColor } from '@tiptap/extension-text-style/background-color'

new Editor({
  extensions: [BackgroundColor],
})