How to Enable Angular Rich Text Editor Items in Read-Only Mode?

When using the Angular RichTextEditor component from Syncfusion in read-only mode, you might want to allow users to access certain toolbar items such as Print and Full Screen. This can be achieved by utilizing the toolbarClick and actionComplete events provided by the RichTextEditor API.

Enabling Toolbar Items in Read-Only Mode

To enable the Print and Full Screen toolbar items while the RichTextEditor is in read-only mode, you can follow the steps below:

1. Set the readonly property of the RichTextEditor to true.
2. Use the toolbarClick event to temporarily disable read-only mode when the Print or Full Screen buttons are clicked.
3. Use the actionComplete event to re-enable read-only mode after the action is completed.

Here is a code snippet that demonstrates how to implement this functionality:

<ejs-richtexteditor
    #toolsRTE
    id="alltoolRTE"
    readonly="true"
    (actionComplete)="actionCompleteHandler($event)"
    (toolbarClick)="toolbarClickHandler($event)"
>
</ejs-richtexteditor>

public toolbarClickHandler(args): void {
    if (
      args.item.subCommand === 'Minimize' ||
      args.item.subCommand === 'Maximize' ||
      args.item.subCommand === 'Print'
    ) {
      this.rteObj.setProperties({ readonly: false }, true);
      if (args.item.subCommand === 'Maximize') {
        this.rteObj.showFullScreen();
      } else if (args.item.subCommand === 'Minimize') {
        this.rteObj.fullScreenModule.hideFullScreen();
      } else if (args.item.subCommand === 'Print') {
        this.rteObj.print();
      }
    }
}

public actionCompleteHandler(args: any): void {
    if (
      args.requestType === 'Maximize' ||
      args.requestType === 'Minimize' ||
      args.requestType === 'print'
    ) {
      this.rteObj.setProperties({ readonly: true }, true);
    }
}

By following the above code, the RichTextEditor will allow users to interact with the Print and Full Screen options even in read-only mode.

Additional References

For more information on the RichTextEditor component and its events, you can refer to the following API documentation:

• RichTextEditor ToolbarClick Event
• RichTextEditor ActionComplete Event

These references provide detailed information on the available events and how to use them to customize the behavior of the RichTextEditor component.

Conclusion
I hope you enjoyed learning on how to enable Angular Rich Text Editor items in read-only Mode.
You can refer to our Angular Rich Text Editor feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Angular Rich Text Editor 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 check out 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, Direct-Trac, or feedback portal. We are always happy to assist you!