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.


  <ejs-richtexteditor

    [readonly]="readonly"

    (toolbarClick)="toolbarClick($event)"

  >

  </ejs-richtexteditor>


  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') ||

      element.contains('e-preview')

    ) {

      this.rteObj.readonly = false;

      setTimeout(() => {

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

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

            'readonly',

            true

          );

        }

        e.originalEvent.target.click();

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

          'readonly',

          false

        );

        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


Regards,

Vinothkumar



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.


Loader.
Up arrow icon