Controlling Editor Access in Angular Block Editor component

18 Nov 20183 minutes to read

The Syncfusion Angular Block Editor provides read-only modes to control user interaction with the editor. This allows users to view formatted content without editing. This features are useful for displaying content without modifications or temporarily restricting input.

Read-only mode

Read-only mode prevents users from editing the content in the Block Editor while preserving the ability to view formatted text. This feature is particularly useful when you want to display formatted content without permitting modifications.

To enable the read-only mode, set the readonly property to true. The content remains viewable with its formatting intact, but editing is restricted.

The following example demonstrates how to enable read-only mode in the Block Editor:

import { Component, ViewChild } from '@angular/core';
import { BlockEditorModule } from "@syncfusion/ej2-angular-blockeditor";
import { BlockModel, ContentType } from "@syncfusion/ej2-blockeditor";

@Component({
    imports: [BlockEditorModule],
    standalone: true,
    selector: 'app-root',
    templateUrl: './app.component.html'
})


export class AppComponent {
    public blocksData: BlockModel[] = [
        {
            blockType: 'Paragraph',
            content: [
                {
                    contentType: ContentType.Text,
                    content: 'The Block Editor supports various content types. When the readOnly property is set to true, it prevents users from editing the content, making the editor display-only.'
                }
            ]
        }
    ];
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
<div id="container">
    <ejs-blockeditor id="blockeditor" [blocks]="blocksData" [readOnly]="true" />
</div>
/* You can add global styles to this file, and also import other style files */
@import "node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import 'node_modules/@syncfusion/ej2-dropdowns/styles/tailwind3.css';
@import 'node_modules/@syncfusion/ej2-popups/styles/tailwind3.css';
@import 'node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css';
@import 'node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css';
@import 'node_modules/@syncfusion/ej2-lists/styles/tailwind3.css';
@import 'node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css';
@import 'node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css';
@import 'node_modules/@syncfusion/ej2-angular-blockeditor/styles/tailwind3.css';