Copying and pasting content from other rich text editors, or desktop word processing applications like Microsoft Word, often comes with extra and overcomplicated HTML. Thankfully, the Angular Editor contains built-in functions around sanitizing content to make the pasted HTML as clean as possible. For maximum control, you can control which tags, attributes, styles, and other elements get removed.
The Kendo UI for Angular Editor is a Rich Text Editor component, alternatively called a What You See Is What You Get (WYSIWYG) component. The Angular Editor helps users create rich text within any Angular application. The Editor features a large set of available tools and functionality out of the box to help create and manipulate text. Beyond built-in functionality, the Angular Editor also features various extension points to help developers create their own custom tools and extend the behavior of the Editor itself.
Tools represent all the functionality available to the end-user to modify the text within the Kendo UI for Angular Editor. Many tools are included and you can add your own in the form of buttons, dialogs, dropdown lists, and color pickers. Below is a summary of built-in tools. See the complete list in the Angular Editor documentation. Out of the box, the tools that come built-in include:
Allow users to resize images in the content area with familiar drag handles. This feature can also be disabled.See the Angular Editor demo
The Kendo UI for Angular Editor allows developers to get and set the content of the Editor programmatically. Thanks to this, loading and saving content to a database, or even manipulating the content before or after users have edited the Angular Editor’s content, can be implemented with ease.
By default, the Angular Rich Text editor is not resizable, but there are cases where end-users would like to adjust their work area to be bigger or smaller. For that case, all you need to do is set the resizable option to true. You can restrict the dimensions to keep the Editor in a particular space or set no limits at all.
The Kendo UI for Angular Editor can easily be integrated with any existing Angular applications thanks to support for both Template-driven forms and Reactive forms.
For your convenience, the Angular Rich Text Editor includes a field, selectionText, that automatically populates with any text the user selects. This is very useful when integrating with other components.
The Angular Text Editor allows you to choose whether the application's styles will affect the content in the editor's text area. In encapsulated mode, the applications styles will not apply and in non-encapsulated made, the styles will apply. This is toggles by setting the iframe property to true or false respectively.
Then Angular Editor includes the ability to use custom stylesheets to format the content contained within it. This helps you match the style to the rest of your application or satisfy any other custom requirements you may face.
The Kendo UI for Angular Editor has many built-in strings, often served through tooltips, to provide users with more context for each tool of the Angular Editor. You can change these strings to be custom messages or to be translated to another language across the entire Angular Editor through configuration options or an external message file. Additionally, the Kendo UI for Angular Editor enables text to be rendered right to left.
Every aspect of the Kendo UI for Angular Editor can be navigated to, and interacted with, through keyboard navigation. This allows users to interact with the Angular Editor using just the keyboard.
The Kendo UI for Angular Editor is AAA rated for WCAG 2.0, and compliant with both WAI-ARIA and Section 508 standards.
The Editor component is also available for these web development frameworks: