Globalization in Vue Block Editor component

17 Dec 202521 minutes to read

Localization

The Block Editor can be localized to any culture by defining the text of the Block Editor in the corresponding culture. The default locale of the Block Editor is en (English). The following table represents the default text of the Block Editor in en culture.

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)

<template>
  <div id='container'>
    <ejs-blockeditor :blocks="blocksData" locale="de"></ejs-blockeditor>
  </div>
</template>

<script setup>
import { BlockEditorComponent as EjsBlockeditor, ContentType } from "@syncfusion/ej2-vue-blockeditor";
import { L10n } from '@syncfusion/ej2-base';

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'
    }
];

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"
      }
  }
});

</script>

<style>
  @import '../node_modules/@syncfusion/ej2-base/styles/fluent2.css';
  @import '../node_modules/@syncfusion/ej2-popups/styles/fluent2.css';
  @import '../node_modules/@syncfusion/ej2-buttons/styles/fluent2.css';
  @import '../node_modules/@syncfusion/ej2-splitbuttons/styles/fluent2.css';
  @import '../node_modules/@syncfusion/ej2-navigations/styles/fluent2.css';
  @import '../node_modules/@syncfusion/ej2-dropdowns/styles/fluent2.css';
  @import '../node_modules/@syncfusion/ej2-inputs/styles/fluent2.css';
  @import '../node_modules/@syncfusion/ej2-blockeditor/styles/fluent2.css';
</style>
<template>
  <div id='container'>
    <ejs-blockeditor :blocks="blocksData" locale="de"></ejs-blockeditor>
  </div>
</template>

<script>
import { BlockEditorComponent, ContentType } from "@syncfusion/ej2-vue-blockeditor";
import { L10n } from '@syncfusion/ej2-base';

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"
      }
  }
});

export default {
  components: {
    'ejs-blockeditor': BlockEditorComponent,
  },
  data() {
    return {
      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'
          }
      ]
    };
  },
  methods: {
    created() {
      L10n.load({
        'de': {
          "blockeditor": {
            "paragraph": "Schreiben Sie etwas oder ‚/‘ für Befehle.",
            "heading1": "Überschrift 1",
            "heading2": "Überschrift 2",
            "heading3": "Überschrift 3",
            "heading4": "Überschrift 4",
            "toggleParagraph": "Umschaltbarer Absatz",
            "toggleHeading1": "Umschaltbare Überschrift 1",
            "toggleHeading2": "Umschaltbare Überschrift 2",
            "toggleHeading3": "Umschaltbare Überschrift 3",
            "toggleHeading4": "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"
          }
        }
      });
    }
  }
};
</script>

<style>
  @import '../node_modules/@syncfusion/ej2-base/styles/fluent2.css';
  @import '../node_modules/@syncfusion/ej2-popups/styles/fluent2.css';
  @import '../node_modules/@syncfusion/ej2-buttons/styles/fluent2.css';
  @import '../node_modules/@syncfusion/ej2-splitbuttons/styles/fluent2.css';
  @import '../node_modules/@syncfusion/ej2-navigations/styles/fluent2.css';
  @import '../node_modules/@syncfusion/ej2-dropdowns/styles/fluent2.css';
  @import '../node_modules/@syncfusion/ej2-inputs/styles/fluent2.css';
  @import '../node_modules/@syncfusion/ej2-blockeditor/styles/fluent2.css';
</style>

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.

<template>
  <div id='container'>
    <ejs-blockeditor :blocks="blocksData" :enableRtl= "true"></ejs-blockeditor>
  </div>
</template>

<script setup>
import { BlockEditorComponent as EjsBlockeditor, ContentType } from "@syncfusion/ej2-vue-blockeditor";

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'
    }
];

</script>

<style>
  @import '../node_modules/@syncfusion/ej2-base/styles/fluent2.css';
  @import '../node_modules/@syncfusion/ej2-popups/styles/fluent2.css';
  @import '../node_modules/@syncfusion/ej2-buttons/styles/fluent2.css';
  @import '../node_modules/@syncfusion/ej2-splitbuttons/styles/fluent2.css';
  @import '../node_modules/@syncfusion/ej2-navigations/styles/fluent2.css';
  @import '../node_modules/@syncfusion/ej2-dropdowns/styles/fluent2.css';
  @import '../node_modules/@syncfusion/ej2-inputs/styles/fluent2.css';
  @import '../node_modules/@syncfusion/ej2-blockeditor/styles/fluent2.css';
</style>
<template>
  <div id='container'>
    <ejs-blockeditor :blocks="blocksData" :enableRtl= "true"></ejs-blockeditor>
  </div>
</template>

<script>
import { BlockEditorComponent, ContentType } from "@syncfusion/ej2-vue-blockeditor";

export default {
  components: {
    'ejs-blockeditor': BlockEditorComponent,
  },
  data() {
    return {
      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'
          }
      ]
    };
  },
  methods: {
  }
};
</script>

<style>
  @import '../node_modules/@syncfusion/ej2-base/styles/fluent2.css';
  @import '../node_modules/@syncfusion/ej2-popups/styles/fluent2.css';
  @import '../node_modules/@syncfusion/ej2-buttons/styles/fluent2.css';
  @import '../node_modules/@syncfusion/ej2-splitbuttons/styles/fluent2.css';
  @import '../node_modules/@syncfusion/ej2-navigations/styles/fluent2.css';
  @import '../node_modules/@syncfusion/ej2-dropdowns/styles/fluent2.css';
  @import '../node_modules/@syncfusion/ej2-inputs/styles/fluent2.css';
  @import '../node_modules/@syncfusion/ej2-blockeditor/styles/fluent2.css';
</style>