Internationalization

Since version 2.18 Editor.js provides an API for Internationalization that allows localizing all UI texts of editor's core and plugins.

To enable your own localization you should pass a messages dictionary with the i18n option of Editor Config. This dictionary should contain four sections:

- ui — translations of internal UI texts

- toolNames — translations of names for tools you use.

- tools — translations of UI texts for tools you use.

- blockTunes — translations of Block Tunes you use.

At the ui section there are translations for the internal editor.js UI elements. You can create or find/download a dictionary for your language.

As long as tools list is a user-specific thing (we do not know which tools you use and under which names), so we can't provide a ready-to-use tool names dictionary. There is a toolNames section for that reason. Put translations for the names of your tools there.

Also, the UI of the tools you use is also invisible to editor.js core. To pass translations for specific tools (which supports I18n API), there are tools and blockTunes section. Pass dictionaries for specific plugins through them.

Example

const editor = new EditorJS({ /** * Tools list */ tools: { header: Header, image: SimpleImage, list: List, checklist: Checklist, quote: Quote, warning: Warning, marker: Marker, code: CodeTool, delimiter: Delimiter, inlineCode: InlineCode, linkTool: LinkTool, embed: Embed, table: Table }, /** * Internationalzation config */ i18n: { /** * @type {I18nDictionary} */ messages: { /** * Other below: translation of different UI components of the editor.js core */ ui: { "blockTunes": { "toggler": { "Click to tune": "Нажмите, чтобы настроить", "or drag to move": "или перетащите" }, }, "inlineToolbar": { "converter": { "Convert to": "Конвертировать в" } }, "toolbar": { "toolbox": { "Add": "Добавить" } } }, /** * Section for translation Tool Names: both block and inline tools */ toolNames: { "Text": "Параграф", "Heading": "Заголовок", "List": "Список", "Warning": "Примечание", "Checklist": "Чеклист", "Quote": "Цитата", "Code": "Код", "Delimiter": "Разделитель", "Raw HTML": "HTML-фрагмент", "Table": "Таблица", "Link": "Ссылка", "Marker": "Маркер", "Bold": "Полужирный", "Italic": "Курсив", "InlineCode": "Моноширинный", }, /** * Section for passing translations to the external tools classes */ tools: { /** * Each subsection is the i18n dictionary that will be passed to the corresponded plugin * The name of a plugin should be equal the name you specify in the 'tool' section for that plugin */ "warning": { // <-- 'Warning' tool will accept this dictionary section "Title": "Название", "Message": "Сообщение", }, /** * Link is the internal Inline Tool */ "link": { "Add a link": "Вставьте ссылку" }, /** * The "stub" is an internal block tool, used to fit blocks that does not have the corresponded plugin */ "stub": { 'The block can not be displayed correctly.': 'Блок не может быть отображен' } }, /** * Section allows to translate Block Tunes */ blockTunes: { /** * Each subsection is the i18n dictionary that will be passed to the corresponded Block Tune plugin * The name of a plugin should be equal the name you specify in the 'tunes' section for that plugin * * Also, there are few internal block tunes: "delete", "moveUp" and "moveDown" */ "delete": { "Delete": "Удалить" }, "moveUp": { "Move up": "Переместить вверх" }, "moveDown": { "Move down": "Переместить вниз" } }, } }, });

RTL support

Editor.js also provides a support of right-to-left mode. It could be enabled by passing the direction rule to the i18n config.

const editor = new EditorJS({ i18n: { /** * Text direction */ direction: 'rtl', }, });

In this mode all Texts will be directed with RTL and all the UI elements orders will be mirrored as well as arrow navigation rules.