We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

How to disable richtextEditor except some toolbar items and scrollbar in content area

I want to disable everything(including custom toolbar item) except two toolbar items ("SourceCode" and "FullScreen") and vertical "scrollbar" in content area should also be enabled.

3 Replies

VY Vinothkumar Yuvaraj Syncfusion Team April 19, 2023 06:16 AM UTC

Hi Harshit,

Your requirement can be achieved by using the readonly property as true for the RichTextEditor, except for the "SourceCode" and "FullScreen" using the toolbarClick event. We have included a code snippet and a sample for your reference.






  public readonly = true;

public toolbarClick(e): void {

    const element = e.originalEvent.target.classList;

    if (

      element.contains('e-source-code') ||

      element.contains('e-maximize') ||

      element.contains('e-minimize') ||

      element.contains('FullScreen') ||


    ) {

      this.rteObj.readonly = false;

      setTimeout(() => {

        if (e.originalEvent.target.classList.contains('e-preview')) {

          (document.querySelector('.e-rte-srctextarea') as any).setAttribute(






        (document.querySelector('.e-rte-srctextarea') as any).setAttribute(




        this.rteObj.readonly = true;

      }, 200);

    } else {

      this.rteObj.readonly = true;



Sample : https://stackblitz.com/edit/angular-xz4qgn-vwitun?file=src%2Fapp.component.html,src%2Fapp.component.ts

API Link : https://ej2.syncfusion.com/angular/documentation/api/rich-text-editor/#toolbarclick



HG Harshit Goel April 19, 2023 03:24 PM UTC

It worked, thanks for your reply.

VY Vinothkumar Yuvaraj Syncfusion Team April 20, 2023 10:43 AM UTC

Hi Harshit,

We are glad to assist you.

Live Chat Icon For mobile
Up arrow icon