by
A drop-in TipTap WYSIWYG editor for Strapi v5.
Rich text, tables, images, and more, configured in minutes.
- Table of Contents
- Rich text editing powered by TipTap - a modern, extensible WYSIWYG editor built on ProseMirror
- Headings (H1–H6), bold, italic, underline, strikethrough
- Ordered & unordered lists, task lists
- Links, tables
- Images from Strapi Media Library with alt text editing and alignment
- Code blocks with syntax highlighting
- Blockquotes, horizontal rules
- Full keyboard shortcut support
- Seamless integration with Strapi's content management system
This plugin is compatible with Strapi v5.x.x and has been tested on Strapi v5.34.0. We expect it should also work on older version of Strapi V5.
| Plugin version | Strapi Version | Full Support |
|---|---|---|
| 1.0.0 | 5.34.0 | ✅ |
# NPM
npm i @notum-cz/strapi-plugin-tiptap-editor
# Yarn
yarn add @notum-cz/strapi-plugin-tiptap-editor
yarn build
yarn startThe plugin uses a preset system. A preset is a named configuration that defines which editor tools are available. You define presets in your Strapi plugin config file, then assign them to individual fields via the Content-Type Builder.
Create or update the plugin configuration file at config/plugins.ts (or config/plugins.js):
// config/plugins.ts
export default () => ({
'tiptap-editor': {
config: {
presets: {
// Preset name -> feature configuration
minimal: {
bold: true,
italic: true,
link: true,
},
},
},
},
});Only features explicitly set to true (or an options object) will appear in the toolbar. Any feature not listed, or set to false, will be hidden.
- In the Strapi admin, open the Content-Type Builder.
- Add or edit a field and choose the Rich Text (Tiptap) custom field type.
- In the Advanced Settings tab, select a preset from the Editor Preset dropdown.
- Save the content type.
The editor for that field will now show only the tools defined in the selected preset.
You can define as many presets as you need. Different fields (even within the same content type) can use different presets:
// config/plugins.ts
export default () => ({
'tiptap-editor': {
config: {
presets: {
// A minimal preset for short-form content like titles or captions
minimal: {
bold: true,
italic: true,
underline: true,
},
// A standard preset for blog posts and articles
standard: {
bold: true,
italic: true,
underline: true,
strike: true,
heading: true,
bulletList: true,
orderedList: true,
blockquote: true,
link: true,
},
// A full preset with every feature enabled
full: {
bold: true,
italic: true,
underline: true,
strike: true,
code: true,
codeBlock: true,
heading: true,
blockquote: true,
bulletList: true,
orderedList: true,
link: true,
table: true,
textAlign: true,
superscript: true,
subscript: true,
mediaLibrary: true,
},
},
},
},
});| Key | Description | Toolbar | Keyboard Shortcut |
|---|---|---|---|
bold |
Bold text | B button | Ctrl/Cmd + B |
italic |
Italic text | I button | Ctrl/Cmd + I |
underline |
Underlined text | U button | Ctrl/Cmd + U |
strike |
Strikethrough text | Ctrl/Cmd + Shift + S |
|
code |
Inline code | <> button |
Ctrl/Cmd + E |
superscript |
Superscript text | x^2 button | Ctrl/Cmd + . |
subscript |
Subscript text | x_2 button | Ctrl/Cmd + , |
Usage: Set to true to enable with defaults.
{
bold: true,
italic: true,
underline: true,
strike: true,
code: true,
superscript: true,
subscript: true,
}| Key | Description | Toolbar |
|---|---|---|
blockquote |
Block quotes | Quote button |
codeBlock |
Fenced code blocks | (via keyboard or markdown input) |
bulletList |
Unordered lists | Bullet list button |
orderedList |
Numbered lists | Numbered list button |
Usage: Set to true to enable.
{
blockquote: true,
codeBlock: true,
bulletList: true,
orderedList: true,
}| Key | Description | Toolbar |
|---|---|---|
heading |
Heading levels (h1-h6) | Style dropdown + SEO tag dropdown |
The heading extension includes an SEO tag selector that lets content editors set the semantic HTML tag independently from the visual heading level. This allows for proper document outline without being constrained by visual styles.
Simple usage — enables all heading levels (h1-h6):
{
heading: true,
}Custom levels — restrict which heading levels are available:
{
// Only allow h1, h2, and h3 in the style dropdown
heading: {
levels: [1, 2, 3],
},
}The levels array accepts values from 1 to 6. The SEO tag dropdown always shows all six levels (h1-h6) regardless of this setting, since the semantic tag is independent of the visual heading level.
| Key | Description | Toolbar |
|---|---|---|
link |
Hyperlinks | Link button + link dialog |
Links open a dialog where editors can enter a URL. By default, links do not open on click in the editor (to allow editing).
Simple usage:
{
link: true,
}With options:
{
link: {
openOnClick: true, // Open links on click in the editor (default: false)
HTMLAttributes: {
rel: 'noopener noreferrer',
target: '_blank',
},
},
}| Key | Description | Toolbar |
|---|---|---|
table |
Insertable and editable tables | Table button + column/row controls |
Enables table insertion with controls for adding/removing columns and rows. Tables are resizable by default.
{
table: true,
}| Key | Description | Toolbar |
|---|---|---|
textAlign |
Text alignment controls | Left, Center, Right, Justify buttons |
Enables all four alignment buttons (left, center, right, justify).
{
textAlign: true,
}| Key | Description | Toolbar |
|---|---|---|
textColor |
Change the color of selected text | Font color picker |
highlightColor |
Apply a background highlight | Highlight color picker |
Both features use a color picker popover that displays the colors defined in the theme configuration. If no colors are configured, the buttons will not appear.
{
textColor: true,
highlightColor: true,
}| Key | Description | Toolbar |
|---|---|---|
mediaLibrary |
Images from Strapi Media Library | Image button + alt text popover + alignment + resize handle |
Enables image insertion from the Strapi Media Library. When enabled, the toolbar shows an image button that opens the Media Library picker. After selecting an image:
- The image appears in the editor at its natural size (constrained to editor width)
- Alt text is prefilled from the asset's
alternativeTextmetadata - Clicking a selected image opens a popover with:
- Three alignment buttons (left, center, right)
- Width and Height inputs (in pixels) for precise sizing
- A reset button to restore the original dimensions
- Alt text input and a delete button
- A resize handle (blue dot) appears at the bottom-right corner on hover — drag it to resize the image
The image stores the URL (src), Strapi asset ID (data-asset-id), alignment (data-align), and dimensions (width, height) in the Tiptap JSON output.
Content safety: If you remove mediaLibrary from a preset, existing images in content are preserved and rendered read-only — they are never silently deleted.
{
mediaLibrary: true,
}Resize is configured through the resize key inside mediaLibrary. The options match the standard @tiptap/extension-image resize configuration. When resize is omitted or set to false, the resize handle and dimension controls are hidden.
{
mediaLibrary: {
resize: {
enabled: true,
alwaysPreserveAspectRatio: true,
minWidth: 50,
minHeight: 50,
},
},
}| Option | Default | Description |
|---|---|---|
resize |
none | Set to false or omit to disable resize entirely |
resize.enabled |
true |
Enable or disable resize when the object is present |
resize.alwaysPreserveAspectRatio |
true |
Lock aspect ratio when resizing or editing dimensions |
resize.minWidth |
50 |
Minimum allowed width in pixels |
resize.minHeight |
50 |
Minimum allowed height in pixels |
The plugin stores content as Tiptap/ProseMirror JSON. The width, height, src, alt, and title attributes are standard and will render automatically with @tiptap/extension-image. However, the custom data-align and data-asset-id attributes require extending the Image extension on your frontend:
import { generateHTML } from '@tiptap/html';
import StarterKit from '@tiptap/starter-kit';
import Image from '@tiptap/extension-image';
// Extend with the custom attributes used by this plugin
const StrapiImage = Image.extend({
addAttributes() {
return {
...this.parent?.(),
'data-align': { default: null },
'data-asset-id': { default: null },
};
},
});
// Convert the JSON from the Strapi API to HTML
const html = generateHTML(apiResponse.content, [
StarterKit,
StrapiImage,
// ...other extensions you use
]);Then add CSS for alignment on your frontend:
img[data-align="center"] {
display: block;
margin-left: auto;
margin-right: auto;
}
img[data-align="right"] {
display: block;
margin-left: auto;
margin-right: 0;
}The theme key in the plugin config lets you define colors for the color pickers and inject custom CSS into the editor.
Define a colors array to populate the text color and highlight color pickers. Each entry needs a label (shown as a tooltip) and a color value (hex, rgb, rgba, hsl, hsla, or CSS variable).
// config/plugins.ts
export default () => ({
'tiptap-editor': {
config: {
theme: {
colors: [
{ label: 'Black', color: '#000000' },
{ label: 'Dark gray', color: '#4A4A4A' },
{ label: 'Red', color: '#E53E3E' },
{ label: 'Orange', color: '#DD6B20' },
{ label: 'Blue', color: '#3182CE' },
{ label: 'Green', color: '#38A169' },
{ label: 'Brand primary', color: 'var(--color-primary)' },
],
},
presets: {
blog: {
bold: true,
italic: true,
textColor: true,
highlightColor: true,
},
},
},
},
});You can inject custom CSS to style the editor content area. There are two options — use one or the other, not both.
Option 1: css — Inline CSS content (recommended for monorepos and production deployments)
Read the file at Strapi startup so the CSS is captured as a string. This works reliably across all environments (local dev, Docker, Azure Container Apps, etc.) because the file is resolved in your app's Node process at boot time.
// config/plugins.ts
import { readFileSync } from 'fs';
export default () => ({
'tiptap-editor': {
config: {
theme: {
css: readFileSync(require.resolve('@repo/design-system/strapi-styles.css'), 'utf-8'),
},
},
},
});Option 2: stylesheet — A URL the browser can fetch directly
Use this when the stylesheet is hosted at a known URL (CDN, public path, etc.).
// config/plugins.ts
export default () => ({
'tiptap-editor': {
config: {
theme: {
stylesheet: 'https://cdn.example.com/editor-styles.css',
},
},
},
});Each feature key in a preset accepts one of these values:
| Value | Meaning |
|---|---|
true |
Feature enabled with default options |
false |
Feature explicitly disabled |
| (key omitted) | Feature disabled (absent keys are treated as disabled) |
{ ... } |
Feature enabled with custom options (merged with defaults) |
Here is a single preset with every available feature enabled and annotated:
// config/plugins.ts
export default () => ({
'tiptap-editor': {
config: {
presets: {
everything: {
// Inline formatting
bold: true,
italic: true,
underline: true,
strike: true,
code: true,
superscript: true,
subscript: true,
// Block elements
blockquote: true,
codeBlock: true,
bulletList: true,
orderedList: true,
// Headings — all levels (same as heading: true)
heading: {
levels: [1, 2, 3, 4, 5, 6],
},
// Links — custom HTML attributes
link: {
HTMLAttributes: {
rel: 'noopener noreferrer',
},
},
// Tables
table: true,
// Text alignment (left, center, right, justify)
textAlign: true,
// Text and highlight colors (requires theme.colors)
textColor: true,
highlightColor: true,
// Images from Strapi Media Library with resize enabled
mediaLibrary: {
resize: { enabled: true },
},
},
},
},
},
});The plugin validates your configuration at startup. If a preset contains an invalid feature key, Strapi will throw an error with a message listing the invalid keys and all allowed keys. This prevents typos from silently disabling features.
// This will throw an error at startup:
{
presets: {
blog: {
bold: true,
boldd: true, // Typo! Not a valid feature key
},
},
}Maintained by Notum Technologies
Built and maintained by Notum Technologies, a Czech-based Strapi Enterprise Partner with a passion for open-source tooling.
Contributions of all kinds are welcome: code, documentation, bug reports, and feature ideas.
Browse the open issues to find something to work on, or open a new one to start a discussion. Pull requests are always appreciated!
If you'd like to directly contribute, check our Contributions document.