Localizing Rich Text Editor

By default, all labels in Rich Text Editor are defined in English, but you can provide custom translations.

The Rich Text Editor widget package includes only the en-US locale. Check our Locales repository for the language you need or create your own locale. Feel free to contribute your successful translation.

Locale Structure

Rich Text Editor titles are stored in the following object:

export default {
    Undo: "Undo",
    Redo: "Redo",
    Print: "Print",
    "Full screen": "Full screen",
    Style: "Style",
    "Text style": "Text style",
    "Font family": "Font family",
    "Font size": "Font size",
    Bold: "Bold",
    Italic: "Italic",
    Underline: "Underline",
    Strikethrough: "Strikethrough",
    Superscript: "Superscript",
    Subscript: "Subscript",
    "Text color": "Text color",
    "Background color": "Background color",
    "Paint format": "Paint format",
    "Left align": "Left align",
    "Center align": "Center align",
    "Right align": "Right align",
    Justify: "Justify",
    "Line height": "Line height",
    Indent: "Indent",
    Outdent: "Outdent",
    "Insert link": "Insert link",
    "Insert image": "Insert image",
    "Bulleted list": "Bulleted list",
    "Numbered list": "Numbered list",
    "Clear formatting": "Clear formatting",
    File: "File",
    New: "New",
    Import: "Import",
    Export: "Export",
    PDF: "PDF",
    DOCX: "DOCX",
    "Print...": "Print...",
    Edit: "Edit",
    Cut: "Cut",
    Copy: "Copy",
    Paste: "Paste",
    View: "View",
    Fullscreen: "Fullscreen",
    "Layout mode": "Layout mode",
    "Classic mode": "Classic mode",
    "Document mode": "Document mode",
    Insert: "Insert",
    Link: "Link",
    Image: "Image",
    Format: "Format",
    Text: "Text",
    Paragraph: "Paragraph",
    Quote: "Quote",
    "Heading 1": "Heading 1",
    "Heading 2": "Heading 2",
    "Heading 3": "Heading 3",
    "Heading 4": "Heading 4",
    "Heading 5": "Heading 5",
    "Heading 6": "Heading 6",
    Default: "Default",
    Align: "Align",
    Left: "Left",
    Center: "Center",
    Right: "Right",
    Justified: "Justified",
    Lists: "Lists",
    Help: "Help",
    Hotkeys: "Hotkeys",
    "Edit image": "Edit image",
    "Delete image": "Delete image",
    "Image options": "Image options",
    Width: "Width",
    Height: "Height",
    "Lock aspect ratio": "Lock aspect ratio",
    Source: "Source",
    "Alternative description": "Alternative description",
    Alignment: "Alignment",
    "Select an image to see image options":
        "Select an image to see image options",
    "Edit link": "Edit link",
    "Copy link": "Copy link",
    Unlink: "Unlink",
    Apply: "Apply",
    Cancel: "Cancel",
    "Enter text to display": "Enter text to display",
    "Paste link": "Paste link",
    "Link copied to clipboard": "Link copied to clipboard",
    "The operation failed! Please check your browser's clipboard permissions.":
        "The operation failed! Please check your browser's clipboard permissions.",
    "Horizontal line": "Horizontal line",
    Search: "Search",
    "Smileys & People": "Smileys & People",
    "Animals & Nature": "Animals & Nature",
    Activity: "Activity",
    "Travel & Places": "Travel & Places",
    "Food & Drink": "Food & Drink",
    Objects: "Objects",
    "Search results": "Search results",
    Symbols: "Symbols",
    Basic: "Basic",
    Currency: "Currency",
    Quotations: "Quotations",
    Mathematical: "Mathematical",
    "Extended Latin": "Extended Latin",
    Arrows: "Arrows",
    Emoji: "Emoji",
    "Special characters": "Special characters",
    "Continuous painting": "Continuous painting",
    Document: "Document",
    "New line": "New line",
    Action: "Action",
    Hotkey: "Hotkey",
};

Specifying Custom Locale

To change the default locale, you need to perform the following steps:

1. Set custom translations by creating the needed locale (below it is "ru") within the editor.locales object:

// Russian translations
editor.locales.ru = {
    Copy: "Копировать",
    Paste: "Вставить",
};

2. Define the current locale for Rich Text Editor. For these purposes, set the locale property of Rich Text Editor in its constructor:

webix.ui({
  view: "editor",
  locale: {
    lang: "ru",
    webix: {
      // switch all webix widgets to the selected locale
      ru: "ru-RU"
    },
  },
  // other configuration options
});

How to Switch Locales at Runtime

You can change languages dynamically, e.g. by clicking related switch buttons in the toolbar.

1. First, set custom translations for the desired labels:

// Russian
editor.locales.ru = {
    Copy: "Копировать",
    Paste: "Вставить",
};
 
// Italian
editor.locales.it = {
    Copy: "Copia",
    Paste: "Incolla",
}

2. Switch between languages using the Rich Text Editor "locale" service and its setLang method:

{
  view: "segmented",
  options: ["en", "ru", "it"],
  width: 250,
  click: function() {
    const locale = $$("richtext").getService("locale");
    locale.setLang(this.getValue());
  }
}

How to Synchronize Rich Text Editor and Webix Locale

The built-in labels of Webix components within the Rich Text Editor, as well as date and number localization depend on the current Webix locale in use. To synchronize localizations of Rich Text Editor and Webix, define the webix parameter in the locale setting of the Rich Text Editor constructor:

{
    view:"editor",
    ...
    locale: {
      lang: "en",
      webix: {
        // switch Webix to the selected locale
        en: "en-US",
        it: "it-IT"
      }
    }
}