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.

The NgStarter Angular Text Editor component lets you provide a full Tiptap-based WYSIWYG rich text editor for formatted HTML content. Use ngs-text-editor when users need to create or edit rich HTML content with headings, bold, italic, strike, lists, blockquotes, inline code, code blocks, horizontal rules, links, images, YouTube embeds, toolbar commands, bubble menus, or floating menus. It includes examples for Basic Text Editor, Text Editor with floating menu, and Text editor floating menu.

Basic Text Editor

Use the text editor for full rich text HTML editing, such as product descriptions, article bodies, release notes, knowledge base entries, or formatted admin content.

Text Editor with floating menu

Use a floating menu when formatting tools should appear near the current cursor instead of being permanently shown in a toolbar.