Syncfusion Angular Block Editor Component

Component Overview

• Block Management - Compose documents with various block types (paragraphs, headings, lists, tables, code, images)
• Text Formatting - Bold, italic, underline, strikethrough, colors, highlights, and inline styles
• Advanced Menus - Slash commands, context menus, inline toolbars, and block action menus
• Events & Interactions - Comprehensive event handling for content changes, selection, drag-drop, paste operations
• Content Management - Import/export as JSON, HTML, or Markdown with full serialization control
• Methods - Programmatically add, remove, move, and update blocks with full API access
• Security Features - Built-in HTML sanitization and XSS prevention for safe content
• Toolbar Configuration - Customizable slash commands and block action menus with grouping
• Templates - Custom templates for blocks, placeholders, and empty states
• Globalization - Multi-language support, RTL languages, and locale-based keyboard shortcuts
• Customizable UI - Themes, CSS variables, responsive sizing, read-only mode, and placeholder text

Quick Navigation Guide

Getting Started

• Setting up a new project with Block Editor
• Installing and importing dependencies
• Configuring CSS and basic properties
• Creating your first editor instance

Core Concepts

• Understanding block types and their purposes
• Learning about BlockModel and ContentModel
• Grasping how blocks are organized and related
• Understanding different content types within blocks

Block Management Methods

• Adding, removing, or moving blocks
• Updating block properties
• Querying block count and data
• Building dynamic document structures

Selection and Cursor Methods

• Setting cursor position programmatically
• Selecting text or blocks
• Implementing text selection features
• Managing ranges and selections
• Execute toolbar actions programmatically (executeToolbarAction)

Utility Methods

• Focusing or blurring the editor programmatically
• Enabling or disabling toolbar items dynamically
• Implementing conditional toolbar access
• Printing editor content
• Managing editor state based on user actions

Configuration Properties

• Applying custom CSS classes for theming
• Implementing dark mode or custom themes
• Configuring HTML encoding for security
• Setting up XSS prevention
• Integrating with CSS frameworks (Bootstrap, Tailwind, Material)
• Configuring users for multi-user editing
• Adding user avatars and identification
• Implementing @mentions functionality
• Creating label/tag systems (#tags)
• Setting up project management labels
• Tracking content by user or category

Editor Menus

• Customizing the slash command menu (/)
• Adding context menu items
• Configuring block action menus
• Creating inline toolbars
• Adding custom menu items

Events and Callbacks

• Implementing auto-save functionality
• Validating content changes
• Tracking user interactions
• Responding to selection changes
• Handling paste operations

Formatting and Styles

• Making text bold, italic, underlined
• Applying colors and backgrounds
• Using advanced text styles (superscript, code, etc.)
• Formatting block types (headings, quotes, etc.)
• Creating styled content

Data Structures and Lists

• Creating bullet or numbered lists
• Adding checklists with checkboxes
• Building tables with rows and columns
• Creating nested indented content
• Working with toggle/collapsible blocks

Advanced Features

• Configuring undo/redo stack size
• Customizing drag and drop behavior
• Adding code blocks with syntax highlighting
• Creating custom template blocks
• Building complex document layouts

Data Export and Import

• Exporting editor content as JSON
• Converting to HTML or Markdown
• Importing from JSON or HTML files
• Parsing external HTML content
• Printing documents
• Synchronizing with servers

Keyboard Shortcuts and Globalization

• Customizing keyboard shortcuts
• Setting up platform-specific shortcuts
• Implementing internationalization
• Supporting RTL languages
• Configuring language-specific settings

Security and Paste Handling

• Enabling HTML sanitization
• Preventing XSS attacks
• Configuring paste cleanup rules
• Managing allowed styles and tags
• Implementing read-only mode
• Validating user input

Appearance and Customization

• Setting custom width/height
• Applying themes (light, dark, high-contrast)
• Using CSS variables for styling
• Customizing fonts and typography
• Creating responsive editors
• Styling with custom CSS classes

Quick Start Example

1. Install Dependencies

npm install @syncfusion/ej2-angular-blockeditor
npm install @syncfusion/ej2-angular-buttons
npm install @syncfusion/ej2-base

2. Create Component

import { Component } from '@angular/core';
import { BlockEditorModule } from '@syncfusion/ej2-angular-blockeditor';

@Component({
  selector: 'app-editor',
  template: `<ejs-blockeditor [height]="'500px'" />`,
  standalone: true,
  imports: [BlockEditorModule]
})
export class EditorComponent {}

3. Import CSS

@import '../node_modules/@syncfusion/ej2-base/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-angular-blockeditor/styles/material3.css';

4. Add to Module/Bootstrap

// app.config.ts
import { importProvidersFrom } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

export const appConfig = {
  providers: [
    importProvidersFrom(BrowserModule)
  ]
};

// OR in app.module.ts
@NgModule({
  imports: [BlockEditorModule]
})
export class AppModule {}

Common Patterns

Pattern 1: Document Auto-Save

@Component({
  selector: 'app-autosave-editor',
  template: `
    <div>
      <span>Status: {{ saveStatus }}</span>
      <ejs-blockeditor #editor (blockChanged)="onContentChange()"></ejs-blockeditor>
    </div>
  `,
  standalone: true,
  imports: [BlockEditorModule]
})
export class AutosaveEditorComponent {
  @ViewChild('editor') editor!: BlockEditorComponent;
  public saveStatus = 'Saved';
  private saveTimeout: any;

  public onContentChange(): void {
    this.saveStatus = 'Unsaved';
    clearTimeout(this.saveTimeout);
    
    this.saveTimeout = setTimeout(() => {
      const content = this.editor.getDataAsJson();
      this.saveToServer(content);
    }, 1000);
  }

  private saveToServer(content: any): void {
    // Save to backend
    this.saveStatus = 'Saved';
  }
}

Pattern 2: Formatted Document Export

@Component({
  selector: 'app-document-exporter',
  template: `
    <div>
      <button (click)="exportJson()">Export JSON</button>
      <button (click)="exportHtml()">Export HTML</button>
      <button (click)="exportMarkdown()">Export Markdown</button>
      <ejs-blockeditor #editor></ejs-blockeditor>
    </div>
  `,
  standalone: true,
  imports: [BlockEditorModule]
})
export class DocumentExporterComponent {
  @ViewChild('editor') editor!: BlockEditorComponent;

  public exportJson(): void {
    const data = this.editor.getDataAsJson();
    this.downloadFile(JSON.stringify(data, null, 2), 'document.json', 'application/json');
  }

  public exportHtml(): void {
    const html = this.editor.getDataAsHtml();
    this.downloadFile(html, 'document.html', 'text/html');
  }

  public exportMarkdown(): void {
    // Convert to markdown format
    const data = this.editor.getDataAsJson();
    const markdown = this.convertToMarkdown(data);
    this.downloadFile(markdown, 'document.md', 'text/markdown');
  }

  private downloadFile(content: string, filename: string, type: string): void {
    const blob = new Blob([content], { type });
    const url = URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.download = filename;
    link.click();
  }

  private convertToMarkdown(blocks: any[]): string {
    // Implementation details in Data Export and Import reference
    return '';
  }
}

Troubleshooting Guide

Issue: Editor not displaying

@import '../node_modules/@syncfusion/ej2-base/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-angular-blockeditor/styles/material3.css';

Issue: Content not saving

getDataAsJson()

const content = this.blockEditor.getDataAsJson();

Issue: Events not firing

@Component({
  standalone: true,
  imports: [BlockEditorModule]
})