Globalization in Angular Block Editor component

18 Dec 202514 minutes to read

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 (English). The following table lists the default text values for the en culture that can be translated.

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 below example shows adding the German culture locale(de-DE)

app.component.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
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: [FormsModule, ReactiveFormsModule, 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';
    };
}

main.ts

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

RTL

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. This feature can be enabled by setting the enableRtl property to true.

app.component.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { Component } from '@angular/core';
import { BlockEditorModule } from "@syncfusion/ej2-angular-blockeditor";
import { BlockModel, ContentType } from "@syncfusion/ej2-blockeditor";

@Component({
    imports: [FormsModule, ReactiveFormsModule, 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.'
                }
            ]
        }
    ];
    
}

main.ts

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