Ecme - The Ultimate Next & TypeScript Web Template

RichTextEditor

RichTextEditor component is a customizable rich text editor utilized with Tiptap editor framework. It comes with a predefined toolbar that includes common formatting options like bold, italic, lists, and more.

Basic

Basic usage.

Custom toolbar

You can customize the editor toolbar with customToolBar prop

Custom config

You can customize the entire configuration with customToolBar prop. Note: Documentation & Text extension is required if not using StarterKit as extension.

With form

Example with form

API

RichTextEditor

Prop	Description	Type	Default
content	The initial content of the editor. This can be an HTML string or plain text.	`string`	-
invalid	Applies styles to indicate the editor content is invalid, typically used for form validation.	`boolean`	-
customToolBar	A function to customize the toolbar by providing your own buttons. It receives the current `editor` instance and an object containing the default toolbar components.	(editor: Editor, components: { ToolButtonBold: ({ editor }: BaseToolButtonProps) => JSX.Element, ToolButtonItalic: ({ editor }: BaseToolButtonProps) => JSX.Element, ToolButtonStrike: ({ editor }: BaseToolButtonProps) => JSX.Element, ToolButtonCode: ({ editor }: BaseToolButtonProps) => JSX.Element, ToolButtonBlockquote: ({ editor }: BaseToolButtonProps) => JSX.Element, ToolButtonHeading: ({ editor }: BaseToolButtonProps & { headingLevel?: HeadingLevel[] }) => JSX.Element, ToolButtonBulletList: ({ editor }: BaseToolButtonProps) => JSX.Element, ToolButtonOrderedList: ({ editor }: BaseToolButtonProps) => JSX.Element, ToolButtonCodeBlock: ({ editor }: BaseToolButtonProps) => JSX.Element, ToolButtonHorizontalRule: ({ editor }: BaseToolButtonProps) => JSX.Element, ToolButtonParagraph: ({ editor }: BaseToolButtonProps) => JSX.Element, ToolButtonUndo: ({ editor }: BaseToolButtonProps) => JSX.Element, ToolButtonRedo: ({ editor }: BaseToolButtonProps) => JSX.Element, }) => ReactNode	-
onChange	Callback function that is triggered whenever the content of the editor changes. It provides the updated content in three formats: plain text, HTML, and JSON.	`(content: {text: string, html: string, json: JSONContent}) => void`	-
editorContentClass	Additional CSS classes to apply to the editor's content area.	`string`	-
customEditor	A custom Tiptap `Editor` instance. If provided, this instance will be used instead of creating a new one.	`Editor \| null`	-

Dependencies

tiptap

For futher usage of tiptap, you could refer theofficial docs for the complete api list.

Prop

Description

Type

Default

content

The initial content of the editor. This can be an HTML string or plain text.

string

invalid

Applies styles to indicate the editor content is invalid, typically used for form validation.

boolean

customToolBar

A function to customize the toolbar by providing your own buttons. It receives the current `editor` instance and an object containing the default toolbar components.

(editor: Editor, components: {
                    ToolButtonBold: ({ editor }: BaseToolButtonProps) => JSX.Element,
                    ToolButtonItalic: ({ editor }: BaseToolButtonProps) => JSX.Element,
                    ToolButtonStrike: ({ editor }: BaseToolButtonProps) => JSX.Element,
                    ToolButtonCode: ({ editor }: BaseToolButtonProps) => JSX.Element,
                    ToolButtonBlockquote:  ({ editor }: BaseToolButtonProps) => JSX.Element,
                    ToolButtonHeading: ({ editor }: BaseToolButtonProps & { headingLevel?: HeadingLevel[] }) => JSX.Element,
                    ToolButtonBulletList: ({ editor }: BaseToolButtonProps) => JSX.Element,
                    ToolButtonOrderedList: ({ editor }: BaseToolButtonProps) => JSX.Element,
                    ToolButtonCodeBlock:  ({ editor }: BaseToolButtonProps) => JSX.Element,
                    ToolButtonHorizontalRule: ({ editor }: BaseToolButtonProps) => JSX.Element,
                    ToolButtonParagraph: ({ editor }: BaseToolButtonProps) => JSX.Element,
                    ToolButtonUndo: ({ editor }: BaseToolButtonProps) => JSX.Element,
                    ToolButtonRedo: ({ editor }: BaseToolButtonProps) => JSX.Element,
                }) => ReactNode

onChange

Callback function that is triggered whenever the content of the editor changes. It provides the updated content in three formats: plain text, HTML, and JSON.

(content: {text: string, html: string, json: JSONContent}) => void

editorContentClass

Additional CSS classes to apply to the editor's content area.

string

customEditor

A custom Tiptap `Editor` instance. If provided, this instance will be used instead of creating a new one.

Editor | null