Globalization in React Block Editor component

29 Aug 202515 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)

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { BlockEditorComponent, ContentType } from '@syncfusion/ej2-react-blockeditor';
import { L10n } from '@syncfusion/ej2-base';

function App() {
  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"
        }
    }
})
  const blocksData = [
    {
      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'
    }
  ];

  return (
      <BlockEditorComponent id="blockeditor_locali" blocks={blocksData}  locale="de"></BlockEditorComponent>
  );
}
export default App;
ReactDOM.render(<App />, document.getElementById('container'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { BlockEditorComponent, BlockModel, ContentType } from '@syncfusion/ej2-react-blockeditor';
import { L10n } from '@syncfusion/ej2-base';

function App() {
  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"
        }
    }
})
// Initial blocks data
const 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'
  }
];
  return (
      <BlockEditorComponent id="blockeditor_locali"  locale="de" blocks={blocksData} ></BlockEditorComponent>
  );
}

export default App;
ReactDOM.render(<App />, document.getElementById('container'));

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.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { BlockEditorComponent, ContentType } from '@syncfusion/ej2-react-blockeditor';

function App() {
   
  const blocksData = [
    {
      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'
    }
  ];

  return (
      <BlockEditorComponent id="blockeditor_rtl" blocks={blocksData} enableRtl={true}></BlockEditorComponent>
  );
}
export default App;
ReactDOM.render(<App />, document.getElementById('container'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { BlockEditorComponent, BlockModel, ContentType } from '@syncfusion/ej2-react-blockeditor';

function App() {
// Initial blocks data
const 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'
  }
];
  return (
      <BlockEditorComponent id="blockeditor_locali" enableRtl={true} blocks={blocksData} ></BlockEditorComponent>
  );
}

export default App;
ReactDOM.render(<App />, document.getElementById('container'));