Angular Rich Text Editor - A WYSIWYG Markdown Editor
- Edit WYSIWYG HTML and Markdown content with a rich set of tools for modern web and mobile applications.
- Easily incorporate into blog editor, message, HTML email composer, and discussion forum-like applications.
- Customize styles using a quick toolbar.
Trusted by the world’s leading companies
Overview
The Angular Rich Text Editor is a feature-rich WYSIWYG HTML and Markdown editor. It is widely used to create blogs, forum posts, notes sections, support tickets (incidents), comment sections, messaging applications, and more. The control provides an efficient user interface for a better editing experience with mobile support. It has various tools to edit and format rich content and return valid HTML markup or Markdown (MD) content and also allows users to insert images, links, tables, and lists with modular architectures.
Why choose the Syncfusion Essential Studio® Angular Rich Text Editor?
WYSIWYG editor
The Angular Rich Text Editor component can be used as a WYSIWYG HTML editor or a Markdown editor, and it also supports Iframe editing with configurable Iframe characteristics.
Easy interaction
Users can easily format the text and paragraphs by setting the editor’s foreground and background colors, font type, italicization, adding ordered and unordered custom lists, underlining, strikethrough, and bolding.
Flexible editing
For a better editing experience, the Angular Rich Text Editor component offers a variety of tools and choices. Users can quickly insert images, videos, hyperlinks, and tables; merge table cells; and configure keys.
Preview the HTML code
Examine and edit the HTML code directly in the source code and view the preview result in the (HTML live editor).
Toolbar with rich set of tools
The WYSIWYG Rich Text Editor for Angular offers a variety of toolbar options that are fully customizable, such as multirow, expanding, quick, and floating toolbars. The tool commands are grouped based on related functionality.
Adapts to any resolution
The Rich Text Editor has a highly responsive layout and an optimized design for desktops, tablets, and smartphones. It works well on all mobile phones that use iOS, Android, or Windows OS.
Integrate with third-party libraries
It’s easy to integrate third-party libraries, like a spell checker, code mirror, etc., with the Rich Text Editor to improve the content.
Globalization and localization
Enable users from different locales to use the Rich Text Editor by formatting dates, currency, and numbering to suit preferences.
AI-Ready Rich Text Editor for smarter productivity
Write smarter with the AI-ready Angular Rich Text Editor. Instantly fix grammar, rewrite content, translate across languages, and generate summaries without leaving the editor.
Angular Rich Text Editor code example
Get started with the Angular Rich Text Editor using a few simple lines of HTML and TS code, as demonstrated below. Also, explore this Angular Rich Text Editor example, which shows how to render and configure the component in Angular.
<div class="control-section">
<ejs-richtexteditor id='defaultRTE' [(value)]="rteValue">
</ejs-richtexteditor>
</div>import { Component } from '@angular/core';
import { ToolbarService, LinkService, ImageService, HtmlEditorService } from '@syncfusion/ej2-angular-richtexteditor';
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
providers: [ToolbarService, LinkService, ImageService, HtmlEditorService]
})
export class AppComponent {
private rteValue: string = `<p>The Rich Text Editor component is a WYSIWYG ("what you see is what you get") editor that provides the best user experience to create and update content. Users can format their content using standard toolbar commands.</p>
<p><b>Key features:</b></p>
<ul>
<li>
<p>Provides <IFRAME> and <DIV> modes</p>
</li>
<li>
<p>Capable of handling markdown editing.</p>
</li>
</ul>`;
}HTML editor toolbar
The Angular WYSIWYG text editor toolbar provides a variety of commands for editing and formatting the content. Use the toolbar to format text and paragraphs and insert images, hyperlinks, tables, lists, etc. The tool commands are grouped based on related functionality.
Multi-row toolbar
The toolbar commands that overflow are wrapped in the following rows within the toolbar.
Expand toolbar
The overflow toolbar commands hidden in the next row become visible when the toolbar is expanded using the expand icon.
Quick toolbar
This toolbar contains frequently used commands related to text, image, tables, and links. It helps access and format the elements (text, image, tables, links) quickly, and also customize them.
Floating the toolbar
The Angular WYSIWYG HTML editor toolbar does not stick to the top of the editor, but floats within the editor area when scrolling the current page.
Fully customizable
The toolbar buttons of the Angular Rich Text Editor component are fully customizable. Add or remove buttons and group commands based on category. This helps users design the toolbar based on application needs, like an HTML blog editor or HTML email composer.
Custom tool
Add your own commands (tools) with actions to the toolbar along with built-in commands.
Inline mode
The Angular Rich Text Editor displays an inline HTML editor when the content in an editable area is clicked or selected.
Mention and hashtag
When composing content in the Angular Rich Text Editor, users or groups can be tagged or selected from the suggestion list.
Editing experience
The Angular Rich Text Editor component provides a wide range of tools and options for a better editing experience.
Insert images
Insert images in the content from a local path or server path with image captions and then link URLs to the images. Upload images to a server with drag-and-drop or file upload. Additionally, the editor offers options to insert images in BLOB or Base64 formats.
Insert hyperlinks
Insert or change hyperlinks with customization options such as display text, tooltips, and links to be opened in a new window.
Insert tables
Insert and edit HTML tables to display grid-like tabular data in WYSIWYG Rich Text Editor. Manipulate the table and its elements dynamically (insert/remove rows and columns, resize whole table or rows or columns, and remove a table).
Table cell merge and split
Merge two or more row and column cells into a single cell with its contents. Also, a single cell can be split both horizontally and vertically.
Text alignment
Built-in settings are available to align your content to the left, center, or right, or justify it.
Enter and Shift+Enter key configuration
The Angular Rich Text Editor allows tags to be inserted when pressing the Enter key and Shift+Enter keys. The following tags can be configured:
- P: When ‘P’ is configured, pressing Enter or Shift+Enter will create a ‘p’ tag.
- DIV: When ‘DIV’ is configured, pressing Enter or Shift+Enter will create a ‘div’ tag.
- BR: When ‘BR’ is configured, pressing Enter or Shift+Enter will create a ‘br’ tag.
Formatting text
- Format the selected content, whole paragraphs, or specific words or characters.
- Format headings, quotations, code, paragraphs, etc.
- Bold, italicize, underline, strikethrough, or capitalize letters and words.
- Change paragraph indentation and spacing.
- Select fonts and font sizes.
- Use subscripts and superscripts.
- Select font color and the background color for the content.
Auto formatting for Markdown syntax
Autoformat enables quick content formatting using Markdown-like shortcodes. This eliminates the need for toolbar buttons or dropdowns for common formatting. As Markdown syntax such as # for headings, ** for bold, and * for italics are typed, the editor automatically converts it into HTML elements.
Checklists
Checklists (to-do lists) can be created directly within the Rich Text 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 organize content in the Editor. It supports changing the bullet appearance for the unordered lists to circles or squares. It also supports different numbering formats for ordered lists such as lowercase Greek or uppercase Roman.
Quick insert for table rows and columns
Users can insert rows and columns into a table quickly. When hovering the mouse near the table edges, a “+” icon appears, enabling users to add rows or columns with a single click.
Line height
Users can adjust vertical spacing between lines of text, giving them control over how tightly or loosely the text is packed within paragraphs. This helps improve readability and visual balance in the content layout.
Full-screen text editor
The built-in option makes the WYSIWYG HTML editor full screen size (full page editor) for editing the content.
Paste from Microsoft Word and Excel
The Angular Rich Text Editor offers built-in options to paste content with images from Microsoft Word, Microsoft Outlook, and Microsoft Excel by filtering out tags, attributes, and styles. Additionally, choose whether the content should be pasted as plain text, with cleaned styles, or with source formatting styles.
Auto-hyperlink of URL
The Angular Rich Text Editor is configured to turn text into a hyperlink automatically when a URL is typed as a plain text.
Angular form validations
The RTE supports forms and obtains values on form submission actions. The two types of validation are:
- Required validation
- Maximum length validation
Limit content length
Users can restrict the number of characters in a particular section.
Resizable editor
The Angular Rich Text Editor can be resized, allowing users to widen or shrink the content area.
Insert an image through the file manager
The integrated file manager in the editor inserts and uploads images from cloud storage or a server.
Format painter
Use the format painter to effortlessly copy formatting and apply it to your content, eliminating the need for manual reformatting and saving you valuable time. Access the format painter through the toolbar or convenient keyboard shortcuts for quick and easy application. Take advantage of the sticky mode by double-clicking the toolbar button, which allows you to apply formats to multiple locations seamlessly.
Additional features
Cut, copy, and paste
The Angular WYSIWYG Text Editor typically allows users to use clipboard operations (cut, copy, and paste).
Undo and redo manager
The Angular Rich Text Editor manages the history of undo and redo actions, enabling users to experiment with editing.
Print text editor content
Print the WYSIWYG Rich Text Editor content with applied formatting either by using the print option from the toolbar or programmatically.
Touch-friendly and responsive WYSIWYG editor
The Angular Rich Text Editor (mobile HTML editor) recognizes touch gestures, allowing users to swipe left or right to move the toolbar. The responsive, mobile-friendly design provides the best user experience on all mobile, tablet, and desktop form factors.
Built-in and customizable themes
The Angular Rich Text Editor ships with several built-in themes: Tailwind CSS, Bootstrap 5, Bootstrap 4, Bootstrap, Material, Fabric, Fluent, and high contrast.
Developer-friendly APIs
There are sufficient client-side APIs available to enhance the process of content editing.
HTML editor accessibility
Keyboard navigation
The RTE ensures that every cell is accessible using the keyboard. Major features like sort, select, and edit can be performed using keyboard commands alone; no mouse interaction is required. This helps in creating highly accessible applications using this component.
Screen reader
The RTE view has complete WAI-ARIA accessibility support. Its UI includes high-contrast visual elements that help visually impaired people to have the best viewing experience. Also, valid UI descriptions are easily accessible through assistive technologies such as screen readers.
Right to left (RTL)
The RTE supports right-to-left rendering, allowing the text and layout of the text editor to be displayed from right to left. This improves the user experience and accessibility for users of RTL languages such as Arabic, Farsi, and Hebrew.
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.
Other supported frameworks
The Rich Text Editor is also available for the Blazor, React, Angular, and JavaScript frameworks. Explore its platform-specific options through the following links:
Supported browsers
The Angular Rich Text Editor works well with all modern web browsers, including Chrome, Firefox, Edge, Safari, and Opera.
Not sure how to create your first Angular Rich Text Editor? Our tutorial videos and documentation can help.
I’d love to watch it now I’d love to read it now145+ ANGULAR UI COMPONENTS
ALL COMPONENTS
SMART COMPONENTS
GRIDS
DATA VISUALIZATION
DROPDOWNS
FILE VIEWERS & EDITORS
BUTTONS
INTERACTIVE CHAT
INPUTS
NAVIGATION
FORMS
NOTIFICATION
Frequently Asked Questions
Why should you choose the Syncfusion® Essential Studio Angular Rich Text Editor?
The Syncfusion Angular WYSIWYG text editor offers the following features:
Edit WYSIWYG HTML and Markdown content with a rich set of tools for modern web and mobile applications.
Easily incorporate into blog editor, message, HTML email composer, and discussion forum-like applications.
Make a floating toolbar or inline editor that allows you to select any editable element on the page and edit in place.
- Enjoy simple configuration and APIs.
- Renders in all modern browsers with ease.
- Use a mobile-friendly and responsive UI.
Take advantage of expansive learning resources such as demos and documentation to get started quickly with the component.
Where can I find the Syncfusion Angular Rich Text Editor demo?
You can find our Angular Rich Text Editor demo here.
Can I download and utilize the Syncfusion Angular Rich Text Editor for free?
No, this is a commercial product and requires a paid license. However, a free community license is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue, 5 or fewer developers, and 10 or fewer total employees.
How do I get started with the Syncfusion Angular Rich Text Editor?
A good place to start would be our comprehensive getting started documentation.
Our Customers Love Us
Having an excellent set of tools and a great support team, Syncfusion® reduces customers’ development time.Here are some of their experiences.
Document Editor For Angular
Great features, amazing package for start-ups / small businesses with the free license plan, excellent support. We use document editor component for angular. We also like the documentation.
Călin C,
Technology Consultant
Perfect for any developer
The Syncfusion Essential Studio has excellent features that are updated or added constantly on a regular basis. The support is exceptional—fast and professional responses. The support team provides you with code samples. As for the bugs, they always try to include the fix in the next release.
Dejan D.
Chief Executive Officer
See Real Success Stories
Developers around the world trust Syncfusion’s Essential Studio to simplify complex projects and speed up delivery. With a vast library of UI controls, powerful SDKs, and reliable support, Essential Studio helps teams build enterprise-ready applications with confidence.
Read Our Customer StoriesIndustry
Software development
75% Cost reduction
50% Faster development
Industry
Utilities (oil and gas)
450+ hours saved
Streamlined processes and hours of development effort saved.
Advanced, flexible features
Empowered users through robust and versatile functionality.
Industry
Software and technology
1000+ of hours saved
Accelerated development with enterprise-ready UI components.
Efficient file management
Streamlined workflows with document libraries without building them from scratch.
Industry
Software and technology
2 Years of delay avoided
Two years of delays prevented with proactive planning.
On-time delivery
Projects delivered on schedule using trusted controls.
Industry
IT services and IT consulting
Improved performance
Large datasets handled with easy customization and quick debugging.
Highly customizable
Plug-and-play controls with quick template integration.
Industry
Professional services
Instant access
Quick availability of features and resources.
Reduced dependencies
Fewer dependencies for faster development.
Rated by users across the globe
Syncfusion Angular Rich Text Editor resources
UI Kits
Figma download
Figma download
Awards
Greatness—it’s one thing to say you have it, but it means more when others recognize it. Syncfusion® is proud to hold the following industry awards.
Recent activities in Angular Rich Text Editor tutorial and blogs
The Angular Rich Text Editor tutorial videos and blog posts will guide you in building your first app with this Angular components. They provide problem-solving strategies, describe features and functionalities, announce new feature releases, explain best practices, and showcase example scenarios. Explore our latest posts on our blog and tutorial video channels for Angular Rich Text Editor updates.
BLOG
Customize the Enter and Shift+Enter Keys in Angular Rich Text Editor for Better Productivity
NOVEMBER 20, 2024
