Globalization in Angular Block Editor

Globalization is the process of designing and developing applications that can adapt to different cultures and languages. The Syncfusion Block Editor component provides support for globalization, enabling it to serve users from diverse linguistic and cultural backgrounds.

Localization

The Block Editor can be localized for any culture by translating its static text labels. The default locale is en-US (English). The following table lists the default text values for the en-US culture that you can override through the Syncfusion L10n loader:

KEY Text
paragraph Write something or ‘/’ for commands.
heading1 Heading 1
heading2 Heading 2
heading3 Heading 3
heading4 Heading 4
collapsibleParagraph Collapsible Paragraph
collapsibleHeading1 Collapsible Heading 1
collapsibleHeading2 Collapsible Heading 2
collapsibleHeading3 Collapsible Heading 3
collapsibleHeading4 Collapsible Heading 4
bulletList Add item
numberedList Add item
checklist Todo
callout Write a callout
addIconTooltip Click to insert below
dragIconTooltipActionMenu Click to open
dragIconTooltip (Hold to drag)
insertLink Insert Link
linkText Text
linkTextPlaceholder Link text
linkUrl URL
linkUrlPlaceholder https://example.com
linkTitle Title
linkTitlePlaceholder Link title
linkOpenInNewWindow Open in new window
linkInsert Insert
linkRemove Remove
linkCancel Cancel
codeCopyTooltip Copy code

The example below adds a German culture locale to the editor. The first argument to L10n.load is the culture key ('de') that the editor references through its locale property — for example de, de-DE, or fr, fr-FR. The same key you load with L10n.load must be assigned to [locale] on the component:

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

@Component({
    imports: [BlockEditorModule],
    standalone: true,
    selector: 'app-root',
    template: `<!-- To Render BlockEditor component. -->
    <div class="container" style="margin: 50px;">
        <ejs-blockeditor id="blockeditor" [locale]='locale' [blocks]="blocksData" />
    </div>`
})


export class AppComponent {
    public blocksData: BlockModel[] = [
        {
            blockType: 'Heading',
            properties: { level: 1},
            content: [
                {
                    contentType: ContentType.Text,
                    content: 'Sample Heading'
                }
            ]
        },
        {
            blockType: 'Paragraph',
            content: [
                {
                    contentType: ContentType.Text,
                    content: 'This is a sample paragraph block.'
                }
            ]
        },
        {
            blockType: 'Paragraph'
        }
    ];
    public locale?: string;
    public ngOnInit(): void {
        L10n.load({
            'de': {
                "blockeditor": {
	                "paragraph": "Schreiben Sie etwas oder ‚/‘ für Befehle.",
                    "heading1": "Überschrift 1",
                    "heading2": "Überschrift 2",
                    "heading3": "Überschrift 3",
                    "heading4": "Überschrift 4",
                    "collapsibleParagraph": "Umschaltbarer Absatz",
                    "collapsibleHeading1": "Umschaltbare Überschrift 1",
                    "collapsibleHeading2": "Umschaltbare Überschrift 2",
                    "collapsibleHeading3": "Umschaltbare Überschrift 3",
                    "collapsibleHeading4": "Umschaltbare Überschrift 4",
                    "bulletList": "Element hinzufügen",
                    "numberedList": "Element hinzufügen",
                    "checklist": "Zu erledigen",
                    "callout": "Schreiben Sie einen Hinweis",
                    "addIconTooltip": "Klicken Sie, um unten einzufügen",
                    "dragIconTooltipActionMenu": "Klicken Sie, um zu öffnen",
                    "dragIconTooltip": "(Halten zum Ziehen)",
                    "insertLink": "Link einfügen",
                    "linkText": "Text",
                    "linkTextPlaceholder": "Linktext",
                    "linkUrl": "URL",
                    "linkUrlPlaceholder": "https://example.com",
                    "linkTitle": "Titel",
                    "linkTitlePlaceholder": "Linktitel",
                    "linkOpenInNewWindow": "In neuem Fenster öffnen",
                    "linkInsert": "Einfügen",
                    "linkRemove": "Entfernen",
                    "linkCancel": "Abbrechen",
                    "codeCopyTooltip": "Code kopieren"
                }

            }
        });
        this.locale =  'de';
    };
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Right-to-left (RTL) support

The Block Editor supports right-to-left (RTL) mode, which reverses the layout of the component to accommodate languages read from right to left, such as Arabic, Hebrew, and Persian. Enable RTL by setting the enableRtl property on the editor to true. You can also enable RTL globally for the page through the enableRtl common setting, which is inherited by every Syncfusion component on the page.

import { Component } 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',
    template: `<!-- To Render BlockEditor component. -->
    <div class="container" style="margin: 50px;">
        <ejs-blockeditor id="blockeditor" [enableRtl]='true' [blocks]="blocksData" />
    </div>`
})


export class AppComponent {
    public blocksData: BlockModel[] = [
        {
            blockType: 'Heading',
            properties: { level: 1},
            content: [
                {
                    contentType: ContentType.Text,
                    content: 'Sample Heading'
                }
            ]
        },
        {
            blockType: 'Paragraph',
            content: [
                {
                    contentType: ContentType.Text,
                    content: 'This is a sample paragraph block.'
                }
            ]
        }
    ];
    
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
bootstrapApplication(AppComponent).catch((err) => console.error(err));