Локализация Rich Text Editor

По умолчанию, все ярлыки Rich Text Editor заданы на английском языке, но вы можете добавить свой перевод.

В пакете Rich Text Editor присутствует только en-US локаль. Ознакомьтесь с нашим репозиторием. Здесь вы можете найти интересующую вас локаль или же создать свою.

Структура локали

Названия элементов Rich Text Editor хранятся в следующем объекте:

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",
    MD: "MD",
    TXT: "TXT",
    "Print...": "Print...",
    Edit: "Edit",
    Cut: "Cut",
    Copy: "Copy",
    "Copy as Markdown": "Copy as Markdown",
    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",
    "Select all": "Select all"
};

Как задать свою локаль

Чтобы изменить локаль по умолчанию, необходимо:

1. Создать локаль с переводами внутри объекта editor.locales следующим образом:

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

2. Задать текущую локаль для Rich Text Editor с помощью свойства locale внутри конструктора:

webix.ui({
  view: "editor",
  locale: {
    lang: "ru",
    webix: {
      // переключаем все виджеты в указанную локаль
      ru: "ru-RU"
    },
  },
  // другие настройки
});

Как переключать локали динамически

Вы можете менять языки динамически, например, при клике по соответствующим кнопкам на панели инструментов.

1. Создайте локали с переводом желаемых ярлыков:

// русский
editor.locales.ru = {
    Copy: "Копировать",
    Paste: "Вставить",
};
 
// итальянский
editor.locales.it = {
    Copy: "Copia",
    Paste: "Incolla",
}

2. Переключайтесь между языками с помощью метода setLang() сервиса "locale":

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

Как синхронизировать локали Rich Text Editor и Webix

Маркеры Webix компонентов внутри Rich Text Editor зависят от текущей локали Webix. Чтобы синхронизировать локализацию Rich Text Editor и Webix, создайте объект webix внутри свойства locale:

{
    view:"editor",
    ...
    locale: {
      lang: "en",
      webix: {
        // переключение Webix на текущую локаль 
        en: "en-US",
        it: "it-IT"
      }
    }
}

Наверх