Contents
- How to Disable the Editor
- See Also
Having trouble getting help?
Contact Support
Contact Support
Disabling the Editor in the Angular Rich Text Editor Component
24 Jan 20252 minutes to read
The Angular Rich Text Editor component offers a feature to disable the editor, preventing any user interaction.This functionality is particularly useful when you need to display content without allowing modifications or when you want to temporarily restrict user input.
How to Disable the Editor
To disable the editor, set the enabled
property to false
.
When disabled, the editor becomes non-interactive, ensuring that users cannot edit or modify the content.
Below are examples and code snippets demonstrating how to disable the Rich Text Editor by setting the enabled
property to false
.
import { Component } from '@angular/core';
import { RichTextEditorModule, ToolbarSettingsModel, ToolbarService, HtmlEditorService, QuickToolbarService, LinkService, ImageService, TableService, PasteCleanupService} from '@syncfusion/ej2-angular-richtexteditor';
@Component({
imports: [RichTextEditorModule],
standalone: true,
selector: 'app-root',
template: `<ejs-richtexteditor id='editor' [toolbarSettings]='tools' [enabled]='false'></ejs-richtexteditor>`,
providers: [ToolbarService, HtmlEditorService, QuickToolbarService, LinkService, ImageService, TableService, PasteCleanupService]
})
export class AppComponent {
public tools: ToolbarSettingsModel = {
items: ['Bold', 'Italic', 'Underline', 'StrikeThrough', 'SuperScript', 'SubScript', '|',
'FontName', 'FontSize', 'FontColor', 'BackgroundColor', '|',
'LowerCase', 'UpperCase', '|',
'Formats', 'Alignments', 'Blockquote', '|', 'NumberFormatList', 'BulletFormatList', '|',
'Outdent', 'Indent', '|', 'FormatPainter', 'ClearFormat',
'|', 'FullScreen']
};
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));