Angular Rich Text Editor - A WYSIWYG Markdown Editor

Inline mode

The Angular Rich Text Editor displays an inline HTML editor when content within an editable area is selected.

• Inline HTML editor example
• Inline Mode documentation

Mention and hashtag

While composing content in the Angular Rich Text Editor, users or groups can be tagged or selected from a suggestion list.

Formatting text

• Apply formatting to selected content, entire paragraphs, or specific words and characters.
• Style headings, quotations, code blocks, paragraphs, and more.
• Use bold, italics, underline, or strikethrough, or adjust letter casing.
• Modify paragraph indentation and spacing.
• Choose fonts and set font sizes.
• Apply subscript and superscript formatting.
• Customize the font color and background color of the content.

Auto formatting for Markdown syntax

Autoformatting allows users to style content quickly using Markdown-style shortcuts, removing the need for toolbar buttons or dropdowns for common formatting. When users type syntax such as # for headings, ** for bold, or * for italics, the editor automatically converts it into corresponding HTML elements.

Checklists

Checklists (to-do lists) can be created directly within the editor. Users can easily add interactive checkbox items to their content, enabling task tracking and management within documents.

Adding custom lists

Create ordered (numbered) or unordered (bulleted) lists to structure content effectively. The editor supports customizing bullet styles such as circles or squares, as well as different numbering formats like lowercase Greek and uppercase Roman.

Quick insert for table rows and columns

Rows and columns can be added quickly to a table. When the cursor hovers near table edges, a “+” icon appears, allowing users to insert rows or columns with a single click.

Line height

Users can adjust the vertical spacing between lines of text, controlling how compact or spaced the content appears, which improves readability and visual balance.

Full-screen text editor

A built-in option enables the editor to expand into full-screen mode for a more focused and distraction-free content editing experience.

Paste from Microsoft Word and Excel

Provides built-in options to paste content, including images, from Microsoft Word, Outlook, and Excel while filtering unnecessary tags and styles. Content can be pasted as plain text, cleaned format, or with original formatting.

• Paste documentation

Auto-hyperlink of URL

Automatically converts plain text URLs into clickable hyperlinks as they are typed.

Angular form validations

The Rich Text Editor supports form integration and can capture values during form submission. It provides the following validation types:

• Required validation
• Maximum length validation

• Template-driven form example
• Reactive form example

Limit content length

Users can set limits on the number of characters for a specific section, ensuring controlled content input.

• Maximum character count limit documentation

Resizable editor

The Angular Rich Text Editor is resizable, enabling users to expand or reduce the content area based on their needs.

Insert an image through the file manager

The built-in file manager allows users to upload and insert images directly from cloud storage or a server.

Format painter

The format painter lets users quickly copy formatting and apply it to other content, avoiding manual reformatting. It can be accessed via the toolbar or keyboard shortcuts. The sticky mode, activated by double-clicking the toolbar button, enables users to apply formatting across multiple areas continuously.

Angular version compatibility

With continuous improvement in Angular versions, the Angular Rich Text Editor is kept up to date to make it compatible with versions starting from 4 to the latest version.

• More details on Angular Rich Text Editor version compatibility