Text Editor

The ngs-text-editor component is a full WYSIWYG rich text editor based on Tiptap for editing formatted HTML content. Use it for long descriptions, articles, notes, changelog entries, knowledge base content, and admin fields that need headings, lists, links, images, embeds, code, and rich formatting.

Key Features:

Rich formatting: Supports headings, bold, italic, strike, lists, blockquotes, inline code, code blocks, and horizontal rules.
Media and links: Add links, upload images with imageUploadFn, and insert YouTube embeds.
Editor menus: Compose toolbars, bubble menus, floating menus, and command buttons around the editor.
HTML output: Listen to contentChange when the editor content changes.

Prop	Type	Default
content Initial HTML content rendered inside the editor	string	''
extensions Additional Tiptap extensions to register before the built-in editor extensions	any[]	[]
contentMaxHeight Maximum height of the content area	number	–
placeholder Placeholder text	string	Write something …
imageUploadFn Function to handle image uploads	(file: Blob) => Promise<string>	–

Event	Description	Type
contentChange	Emitted with the current HTML content whenever the editor updates	OutputEmitterRef<string>

Editor API

Method	Description	Returns
api.isCommandDisabled(command, options?)	Returns whether a command cannot run in the current editor state	boolean \| null
api.isActive(command, options?)	Returns whether a mark, node, or command state is active	boolean
api.runCommand(command, options?)	Runs a Tiptap chain command with focus	void
api.editor()	Returns the underlying Tiptap editor instance	Editor

Using this component in production?

Source code, templates, and commercial support

NgStarter includes source code, admin dashboard templates, and commercial support.

View pricing →Explore admin templates

Text Editor

Editor API

Source code, templates, and commercial support

Build the surrounding workflow