Localisation
On this page
The editor interface (toolbar, menus, dialogs, find and replace, table tools, status bar, slash menu, context menu and command palette) is English by default. @better-rich-text/locales adds 20 more languages. Your document content is never translated.
Choosing a language
Register a language, then pass its code as locale:
import { createRichTextEditor } from '@better-rich-text/core';
import { registerGerman } from '@better-rich-text/locales/de';
registerGerman();
const editor = createRichTextEditor('#editor', { locale: 'de' });Each language is its own module, so your bundle only contains the languages you import. A regional tag such as de-AT or pt-BR uses its language's table.
To load a language only when someone picks it, use loadLocale. Bundlers emit each language as a separate chunk:
import { loadLocale } from '@better-rich-text/locales';
await loadLocale('ja');
editor.setLocale('ja');setLocale switches the interface without recreating the editor. locales lists the built-in languages with their native names, for a language picker. @better-rich-text/locales/all registers every language at once with registerAllLocales().
With the script-tag build, load locales/<code>.js from the download's browser/ folder after the editor file instead.
Languages
| Code | Language | Register |
|---|---|---|
ar |
Arabic | registerArabic |
cs |
Czech | registerCzech |
da |
Danish | registerDanish |
de |
German | registerGerman |
es |
Spanish | registerSpanish |
fi |
Finnish | registerFinnish |
fr |
French | registerFrench |
he |
Hebrew | registerHebrew |
it |
Italian | registerItalian |
ja |
Japanese | registerJapanese |
ko |
Korean | registerKorean |
nb |
Norwegian Bokmål (also no) |
registerNorwegian |
nl |
Dutch | registerDutch |
pl |
Polish | registerPolish |
pt |
Portuguese (Brazilian wording) | registerPortuguese |
ru |
Russian | registerRussian |
sv |
Swedish | registerSwedish |
tr |
Turkish | registerTurkish |
uk |
Ukrainian | registerUkrainian |
zh |
Chinese, Simplified | registerChinese |
Import a language from @better-rich-text/locales/<code>. Plural forms follow each language's rules, so Polish, Russian, Ukrainian, Czech and Arabic get their several forms of "word" and "row".
Right-to-left languages
With ar or he the toolbar, menus, dialogs and status bar run right to left. The writing area keeps the direction it had, so a left-to-right document stays left to right. People set a paragraph's own direction with the ltr and rtl toolbar buttons.
Changing messages
Every label has a message id. Override any of them for one editor with messages:
createRichTextEditor('#editor', {
locale: 'de',
messages: { bold: 'Fettdruck', 'find.noResults': 'Nichts gefunden' },
});The English table is exported as en from @better-rich-text/ui; plugins that bring their own interface export theirs (for example imageMessages and mathMessages). Use them as the list of ids to translate.
Adding a language
Register a table for a code with registerMessages. Any id it leaves out falls back to English:
import { registerMessages } from '@better-rich-text/ui';
registerMessages('is', {
bold: 'Feitletrað',
italic: 'Skáletrað',
'status.words': '{count} {count, plural, one {orð} other {orð}}',
});Messages fill {name} placeholders and choose plural forms with {count, plural, one {...} other {...}}, using the categories Intl.PluralRules gives for the locale. The number stays outside the plural branches.
registerMessages adds to a code's existing table. Call it after registering a built-in language to correct a few of its strings.