As you may have noticed, major improvements have been made in Essential JS 2 for Angular in our 2018 Vol. 2 release. In this post, I am glad to introduce our WYSWIG Angular rich text editor (preview), which was one of the most requested components.
The WYSWIG editor feature helps to format content and show an instant preview. The key features of rich text editor are the HTML editor, markdown editor, quick toolbar, inline mode, and formatting styles. It has been built to be lightweight, modular, and responsive. It is available for JavaScript, Angular, React, Vue, ASP.NET MVC, and ASP.NET Core platforms.
This blog post will showcase some key features of the rich text editor component in Angular.
The rich text editor (RTE) has built-in support for an HTML editor, which is used to create, edit, and format content and returns valid HTML markup. Adding RTE to your application is very easy as most of the common features are enabled by default and configured as follows:
import { Component } from '@angular/core';
import { ToolbarService, HtmlEditorService } from '@syncfusion/ej2-ng-richtexteditor';
@Component({
selector: 'my-app',
template: `<ejs-richtexteditor id='defaultRTE' [(value)]='value'></ejs-richtexteditor>`,
providers: [ToolbarService, HtmlEditorService]
})
export class AppComponent {
name = 'Angular';
public value: string = `<h3>Essential JS 2</h3>
<p>Essential JS 2 for Angular is a modern JavaScript UI toolkit that has been built from the ground up to be lightweight, responsive, modular and touch friendly. It is written in TypeScript and has no external dependencies. It comes with full documentation and support and is available under commercial and community licenses - please visit <a href="http://www.syncfusion.com/" rel="nofollow" target="_blank">www.syncfusion.com</a> to get started.</p>`;
}
For more information, please visit our documentation page.
The rich text editor component has markdown editing support that helps you display markdown content and format it. If you want to have an instant preview of the formatting, integrate third-party libraries like marked, which converts markdown into HTML to achieve the preview functionality. You can also easily configure custom tags for markdown formatting (e.g., add ‘+’ tags instead of “-“).
The following tags are allowed with markdown editor:
The markdown editor can be configured in Angular as follows:
import { Component } from '@angular/core';
import { ToolbarService, MarkdownEditorService } from '@syncfusion/ej2-ng-richtexteditor';
@Component({
selector: 'my-app',
template: `<ejs-richtexteditor id='defaultRTE' [(value)]='value' editorMode='Markdown' [toolbarSettings]='tools'></ejs-richtexteditor>`,
providers: [ToolbarService,MarkdownEditorService]
})
export class AppComponent {
name = 'Angular';
public tools: object = {
items: ['Bold', 'Italic', 'StrikeThrough', '|',
'Formats', 'OrderedList', 'UnorderedList', '|',
'CreateLink', 'Image', '|','Undo', 'Redo']
};
public value: string = `# Essential JS 2
Essential JS 2 for Angular is a modern JavaScript UI toolkit that has been built from the ground up to be lightweight, responsive, modular and touch friendly. It is written in TypeScript and has no external dependencies. It comes with full documentation and support and is available under commercial and community licenses - please visit [www.syncfusion.com](http://www.syncfusion.com/) to get started.`;
} For a complete list of markdown functionality and its configuration, see this documentation section.
By default, the rich text editor’s toolbar has standard toolbar commands for the most common actions. It also allows you to customize commands for changing the display order, adding or removing built-in commands, and adding custom commands. The overflowing toolbar items can be controlled by multirow or expand mode.
More information about how to use this toolbar can be found in this documentation page.
When selecting content, images, or links, the quick toolbar will be displayed with configured options. This feature helps developers show the contextual actions right on top of the content. Also, it is possible to customize whether the quick toolbar displays when scrolling the content.
The editor is capable of handling editing content in place, which helps you edit content on the same page, such as in content management-related applications. The editor’s toolbar becomes visible on editing the content dynamically. It can be customized to display on selection of content or when content is clicked.
The editor provides the following options to edit and format the content:
Along with content, you are able to insert images from local and remote server locations with captions. The upload feature supports uploading new images as blobs and inserting them into the content. The quick toolbar can be shown on selecting an image with preconfigured commands, which helps you manage images. The editor provides the following options to manage images:
For more information about how to manage images, refer to this documentation section.
The editor has necessary options to insert or remove hyperlinks within content. The following options are available to work with hyperlinks:
Quick toolbar also can be applied to links with custom commands. The editor automatically converts hyperlinks when entering the URL.
The editor has support to insert ordered (numbered) or unordered (bulleted) lists.
Built-in support available to display HTML source code of content being editing. This helps advanced users update the source code directly.
There are several other helpful features in this rich text editor component:
We have included most of the common requirements and have implemented them with modular architecture in this RTE. So the rich set of features should not hinder you, as you can configure just the features you need and maintain the size of rich text editor to a high degree.
We look forward to you trying RTE out and providing your feedback. If you don’t have a license, try our rich text editor component’s features by downloading our free trial. You can also explore our online demo and our documentation.
You can check out the source of our Angular rich text editor on GitHub, too, at https://github.com/syncfusion/ej2-angular-ui-components/tree/master/components/richtexteditor. If you have any questions or feedback, please let us know in the comments below. You can also contact us through our support forum or Direct-Trac.
If you like this blog post, we think you’ll also like the following free e-books: