Appearance in Angular Block Editor component
18 Nov 201814 minutes to read
The Block Editor component provides several properties to customize its visual appearance, allowing you to control its dimensions, styling, and behavior.
Setting width and height
You can specify the width and height for the Block Editor component using the width and height properties.
<ejs-blockeditor [width]="'100%'" [height]="'80vh'" />
// Or with specific pixel values
<ejs-blockeditor [width]="'800px'" [height]="'500px'" />Setting readonly mode
You can utilize the readOnly property to control whether the editor is in read-only mode. When set to true, users cannot edit the content but can still view it.
<ejs-blockeditor [readOnly]="true" />Customization using CSS Class
You can use the cssClass property to customize the appearance of the Block Editor control.
<ejs-blockeditor [width]="'600px'" [height]="'400px'" [cssClass]="'custom-editor-theme'" />The following example demonstrates the usage of readOnly and cssClass properties of the Block Editor.
import { Component, ViewChild } from '@angular/core';
import { BlockEditorModule, BlockEditorComponent } 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 {
@ViewChild('blockEditorComponent')
public blockEditorComponent!: BlockEditorComponent;
output = '';
statusMessage = '';
isReadonly = false;
currentTheme = 'default';
public blocksData: BlockModel[] = [
{
blockType: 'Heading',
properties: { level: 1 },
content: [
{
contentType: ContentType.Text,
content: 'Appearance Configuration Demo'
}
]
},
{
blockType: 'Paragraph',
content: [
{
contentType: ContentType.Text,
content: 'This demo showcases different appearance configurations including readonly mode and a custom CSS theme.'
}
]
},
{
blockType: 'Heading',
properties: { level: 2 },
content: [
{
contentType: ContentType.Text,
content: 'Configured Custom Theme'
}
]
},
{
blockType: 'BulletList',
content: [
{
contentType: ContentType.Text,
content: 'Gradient background with modern styling'
}
]
},
{
blockType: 'Paragraph',
content: [
{
contentType: ContentType.Text,
content: 'Use the readonly toggle to switch between editable and read-only modes. In readonly mode, you can view content but cannot make changes.'
}
]
}
];
// Toggle Readonly Mode
public toggleReadonly = () => {
this.isReadonly = !this.isReadonly;
this.blockEditorComponent.readOnly = this.isReadonly;
// Add visual indication for readonly mode
const editorElement = document.getElementById('blockeditor');
if (editorElement) {
if (this.isReadonly) {
editorElement.classList.add('readonly-mode');
} else {
editorElement.classList.remove('readonly-mode');
}
}
this.updateStatus();
this.displayOutput(`Readonly mode ${this.isReadonly ? 'enabled' : 'disabled'}. ${this.isReadonly ? 'Content is now view-only.' : 'Content is now editable.'}`);
}
// Apply Custom Theme
public applyCustomTheme = () => {
this.blockEditorComponent.cssClass = 'custom-theme';
this.currentTheme = 'custom';
this.updateStatus();
this.displayOutput('Custom theme applied. The editor now features a gradient background with modern styling and hover effects.');
}
// Add event listeners for editor interactions
public onEditorFocus = () => {
this.displayOutput('Editor focused. You can now type or edit content.');
}
public onEditorBlur = () => {
this.displayOutput('Editor lost focus.');
}
// Initialize status display
ngOnInit(): void {
this.updateStatus();
}
// Output helper function
displayOutput(msg: string): void {
this.output = msg;
}
// Update status display
updateStatus(): void {
const mode = this.isReadonly ? 'Readonly' : 'Editable';
const theme = this.currentTheme === 'default' ? 'Default' : 'Custom';
this.statusMessage = `${mode}, ${theme} Theme`;
}
}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" #blockEditorComponent [blocks]="blocksData" [cssClass]="currentTheme" [readOnly]="isReadonly" (focus)="onEditorFocus()" (blur)="onEditorBlur()" />
<div id="controls">
<h3>Appearance Configuration Demo</h3>
<div class="button-group">
<button (click)="toggleReadonly()">Toggle Readonly Mode</button>
<button (click)="applyCustomTheme()">Apply Custom Theme</button>
</div>
<div id="statusText" style="margin-top: 10px;">
<strong>Current Status: </strong>
</div>
</div>
<div id="output"></div>
</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';
#container {
margin: 50px;
gap: 20px;
display: flex;
flex-direction: column;
align-items: center;
}
#controls {
margin-bottom: 20px;
padding: 20px;
border: 1px solid #ddd;
border-radius: 5px;
background-color: #f8f9fa;
}
.button-group {
margin-bottom: 15px;
}
.button-group button {
margin: 5px;
padding: 8px 16px;
background-color: #17a2b8;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
.button-group button:hover {
background-color: #138496;
}
.status-info {
padding: 10px;
background-color: #d1ecf1;
border-left: 4px solid #17a2b8;
border-radius: 4px;
}
.status-info p {
margin: 0;
color: #0c5460;
}
#output {
margin-top: 15px;
padding: 10px;
background-color: #f8f9fa;
border-radius: 4px;
min-height: 50px;
font-family: monospace;
white-space: pre-wrap;
}
/* Custom Theme CSS Class */
.custom-theme {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 12px;
}
.custom-theme .e-block {
border-radius: 8px;
margin-bottom: 10px;
backdrop-filter: blur(10px);
}
.custom-theme .e-block:hover {
transform: translateY(-2px);
transition: all 0.3s ease;
}
.custom-theme .e-block-content, .custom-theme .e-floating-icon {
color: #fff;
font-weight: 500;
}
/* Readonly Mode Styling */
.readonly-mode {
opacity: 0.8;
cursor: not-allowed;
}
.readonly-mode .e-block-content {
color: #6c757d;
}
.custom-theme.readonly-mode .e-block-content {
color: #101111;
}