How to Configure Angular Rich Text Editor to Preserve Bold and Italic?

In this article, you can learn how to configure Angular Rich Text Editor to preserve bold and italic styles.
To ensure that bold and italic styles are preserved when using the Angular Rich Text Editor, it is essential to configure the pasteCleanupSettings appropriately. This involves setting the keepFormat property to true and specifying the allowed styles in the allowedStyleProps property.

Rich Text Editor Configuration Steps

1. Importing Necessary Modules and Services

First, ensure that you have all the necessary imports for using Syncfusion Rich Text Editor and related services in your Angular application.

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { RichTextEditorComponent, RichTextEditorModule, PasteCleanupSettingsModel } from '@syncfusion/ej2-angular-richtexteditor';
import { ToolbarService, LinkService, ImageService, HtmlEditorService, QuickToolbarService, PasteCleanupService, VideoService, AudioService, TableService } from '@syncfusion/ej2-angular-richtexteditor';

2. Component Metadata Definition

Define the component’s metadata, including the selector, template URL, styles, providers, and imports necessary for the application.

@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
encapsulation: ViewEncapsulation.None,
providers: [
 ToolbarService,
 LinkService,
 ImageService,
 HtmlEditorService,
 QuickToolbarService,
 PasteCleanupService,
 VideoService,
 AudioService,
 TableService,
],
standalone: true,
imports: [RichTextEditorModule],
})
export class AppComponent {
// Component class content follows
}

3. Instance and Paste Cleanup Settings

Define the Rich Text Editor instance and the paste cleanup settings to handle how the editor processes pasted text.

• allowedStyleProps: Specifies which CSS properties are allowed. In this case text-decoration is permitted.
• keepFormat: Set to true to retain the formatting of pasted content.

@ViewChild('pasteCleanupRTE')
public rteObj: RichTextEditorComponent;

public pasteCleanupSettings: PasteCleanupSettingsModel = {
  prompt: true,
  plainText: false,
  keepFormat: true,
  allowedStyleProps: ['text-decoration'],
};

4. Toolbar Configuration

Finally, configure the toolbar settings to specify which tools are available for the Rich Text Editor

public tools: ToolbarModule = {
  items: ['Bold', 'Italic', 'Underline', '|', 'Formats', 'Alignments', 'Blockquote', 'OrderedList', 'UnorderedList', '|', 'CreateLink'   'Image', 'Audio', 'Video', '|', 'SourceCode', 'Undo', 'Redo'
  ]
};

Additional References

• Angular Rich Text Editor Documentation
• Paste Cleanup Settings

Conclusion

I hope you enjoyed learning how to configure Angular Rich Text Editor to preserve Bold and Italic.

You can refer to our Angular Rich Text Editor feature tour page to learn about its other groundbreaking feature representations and documentation, as well as how to quickly get started with configuration specifications.

You can also explore our Angular Rich Text Example to understand how to create and manipulate data. For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to explore our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, BoldDesk Support, or feedback portal. We are always happy to assist you!