Перейти к основному содержимому

Конфигурация

Вы можете настроить внешний вид и поведение RichText с помощью следующих свойств:

  • menubar — показать или скрыть верхнюю строку меню
  • toolbar — настроить видимость панели инструментов и её кнопки
  • fullscreenMode — открыть редактор в полноэкранном режиме
  • layoutMode — переключиться между макетами "classic" и "document"
  • value — задать начальное HTML-содержимое
  • locale — применить объект локализации при инициализации
  • defaultStyles — задать стили по умолчанию для конкретных типов блоков
  • imageUploadUrl — задать конечную точку для загрузки изображений
  • triggers — включить @упоминания, #теги и пользовательские триггеры выпадающих списков (см. руководство Упоминания и теги)

Режимы макета​

RichText поддерживает два режима макета для области редактирования:

  • "classic" — область редактирования занимает всю страницу

Редактор DHTMLX RichText в классическом режиме разметки

  • "document" — область редактирования имитирует страницу документа

Редактор DHTMLX RichText в режиме документа

Задайте свойство layoutMode при инициализации, чтобы выбрать режим:

const editor = new richtext.Richtext("#root", {
    layoutMode: "document"
});

Связанный пример: RichText. Режимы документа и классический

Панель инструментов​

Панель инструментов RichText группирует элементы управления в несколько блоков, которые можно настраивать.

Стандартные элементы управления панели инструментов​

В панель инструментов RichText можно включить следующие кнопки и элементы управления:

КнопкаОписание
undoОтменяет последнее действие пользователя
redoПовторяет ранее отменённое действие
styleВыбирает стиль текста (например, заголовок, абзац, цитата)
font-familyИзменяет шрифт выделенного текста
font-sizeИзменяет размер выделенного текста
boldПрименяет полужирное форматирование к выделенному тексту
italicПрименяет курсивное форматирование к выделенному тексту
underlineПодчёркивает выделенный текст
strikeПрименяет зачёркивание
subscriptФорматирует текст как подстрочный
superscriptФорматирует текст как надстрочный
text-colorИзменяет цвет текста
background-colorИзменяет цвет фона (выделения) текста
alignЗадаёт выравнивание текста (по левому краю, по центру, по правому краю, по ширине)
indentУвеличивает отступ абзаца
outdentУменьшает отступ абзаца
line-heightИзменяет межстрочный интервал
quoteФорматирует текст как цитату
bulleted-listСоздаёт маркированный список
numbered-listСоздаёт нумерованный список
linkВставляет или редактирует гиперссылку
imageВставляет изображение
lineВставляет горизонтальную линию
clearУдаляет всё форматирование выделенного текста
printОткрывает диалог печати
fullscreenПереключает полноэкранный режим
modeПереключает между двумя режимами макета: classic и document
shortcutsОтображает список доступных сочетаний клавиш
separatorДобавляет визуальный разделитель между элементами управления

Используйте свойство toolbar, чтобы задать панель инструментов в виде массива строк с именами элементов управления:

new richtext.Richtext("#root", {
    toolbar: [
        "undo",
        "redo",
        "separator",
        "style",
        "separator",
        "font-family",
        "font-size",
        "separator",
        "bold",
        "italic",
        "underline",
        "strike",
        "separator",
        "text-color",
        "background-color",
        "separator",
        "align",
        "line-height",
        "outdent",
        "indent",
        "separator",
        "bulleted-list",
        "numbered-list",
        "quote",
        "separator",
        "link",
        "image",
        "separator",
        "clear",
        "separator",
        "fullscreen",
        "mode"
        // другие кнопки
    ],
    // другие свойства конфигурации
});

Связанный пример: RichText. Полная панель инструментов

Добавление пользовательских элементов управления панели инструментов​

Передайте объект в массив toolbar с одним из следующих полей:

  • type: string — обязательное. Тип элемента управления: "button", "richselect" или "colorpicker"
  • id: string — необязательное. Идентификатор пользовательского элемента управления; не должен совпадать с существующими идентификаторами
  • icon: string — необязательное. Имя CSS-класса иконки; используется совместно с меткой
  • label: string — необязательное. Метка кнопки; используется совместно с иконкой
  • tooltip: string — необязательное. Всплывающая подсказка при наведении; по умолчанию равна label, если не задана
  • css: string — необязательное. CSS-класс для элемента управления. Встроенные классы: wx-primary, wx-secondary
  • handler: () => void — необязательное. Калбэк, выполняемый при нажатии

В приведённом ниже примере сочетаются встроенные кнопки, предустановленный элемент управления типа richselect и две пользовательские кнопки:

new richtext.Richtext("#root", {
    toolbar: [
        // строковые записи соответствуют встроенным кнопкам
        "bold",
        "italic",
        // предустановленные кнопки принимают только { type: "button", id: string }
        {
            type: "button",
            id: "fullscreen",
        },
        // для предустановленных элементов richselect/colorpicker задайте соответствующий тип
        // записи с несовпадающим типом игнорируются
        {
            type: "richselect", // type: "button" здесь будет проигнорирован
            id: "mode",
        },
        // пользовательские кнопки (richselect/colorpicker не поддерживаются для пользовательских элементов)
        {
            type: "button",
            id: "some",
            label: "Some",
            handler: () => {/* пользовательская логика */}
        },
        {
            type: "button",
            id: "other",
            icon: "wxo-help",
            label: "Other",
            tooltip: "Some tooltip",
            handler: () => {/* пользовательская логика */}
        }
    ],
    // другие свойства конфигурации
});

Связанный пример: RichText. Пользовательский элемент управления и упрощённая панель инструментов

Скрытие панели инструментов​

Задайте свойству toolbar значение false, чтобы скрыть панель инструментов:

new richtext.Richtext("#root", {
    toolbar: false,
    // другие свойства конфигурации
});

Отображение строки меню​

Включите свойство menubar, чтобы отобразить верхнюю строку меню над панелью инструментов. Значение по умолчанию — false.

new richtext.Richtext("#root", {
    menubar: true
    // другие свойства конфигурации
});

Связанный пример: RichText. Инициализация со строкой меню

Задание начального содержимого​

Используйте свойство value, чтобы передать начальное HTML-содержимое в редактор при инициализации:

new richtext.Richtext("#root", {
    value: "<h1>some value</h1>"
    // другие свойства конфигурации
});

Чтобы заменить содержимое после инициализации или загрузить его в формате, отличном от HTML, с использованием пользовательского энкодера, вызовите метод setValue().

Связанный пример: RichText. Работа с различными форматами (Markdown, HTML, текст)

Задание начальной локали​

Используйте свойство locale, чтобы применить объект локализации при инициализации:

new richtext.Richtext("#root", {
    locale: richtext.locales.cn
    // другие свойства конфигурации
});

Подробности и динамическое переключение локали с помощью setLocale() см. в руководстве Локализация.

Запуск в полноэкранном режиме​

Задайте свойству fullscreenMode значение true, чтобы редактор открывался в полноэкранном режиме при инициализации. Значение по умолчанию — false.

new richtext.Richtext("#root", {
    fullscreenMode: true
    // другие свойства конфигурации
});

Настройка вставки изображений​

RichText поддерживает два режима вставки изображений через панель инструментов, строку меню, вставку из буфера или перетаскивание. Режим выбирается автоматически на основе свойства imageUploadUrl.

Загрузка изображений на сервер​

Передайте URL в свойство imageUploadUrl, чтобы загружать каждое вставляемое изображение на ваш сервер. RichText отправляет файл в формате multipart/form-data (имя поля upload) и вставляет URL, возвращённый сервером:

new richtext.Richtext("#root", {
    imageUploadUrl: "https://example.com/upload"
    // другие свойства конфигурации
});

Вставка изображений в строку как base64​

Не задавайте imageUploadUrl (или задайте ему пустую строку), чтобы встраивать изображения непосредственно в содержимое документа в виде data URL в формате base64. Сервер при этом не требуется:

new richtext.Richtext("#root", {
    // imageUploadUrl не задан, изображения вставляются в строку
    // другие свойства конфигурации
});

Встроенные изображения размером больше 1024×800 отображаются в уменьшенном виде (атрибуты width/height ограничены, чтобы вписаться в эти пределы), однако встроенные байты представляют собой исходный файл в полном разрешении — клиент не уменьшает и не перекодирует его.

Примечание

Встроенные (base64) изображения не сохраняются при встроенном экспорте в форматы DOCX / PDF. Если вы используете экспорт, укажите imageUploadUrl, чтобы изображения ссылались на внешний ресурс.

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

Настройка стилей по умолчанию​

Используйте свойство defaultStyles, чтобы задать стили по умолчанию для каждого типа блока.

Свойство defaultStyles имеет следующую сигнатуру типа:

defaultStyles?: boolean | {
    "*"?: { // применяется ко всем блокам; задаёт общие свойства для каждого блока
        "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana"
        "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px"
        color?: string;
        background?: string;
    },
    p?: {
        "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana"
        "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px"
        color?: string;
        background?: string;
    },
    blockquote?: {
        "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana"
        "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px"
        color?: string;
        background?: string;
    },
    h1?: {
        "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana"
        "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px"
        color?: string;
        background?: string;
    },
    h2?: {
        "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana"
        "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px"
        color?: string;
        background?: string;
    },
    h3?: {
        "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana"
        "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px"
        color?: string;
        background?: string;
    },
    h4?: {
        "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana"
        "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px"
        color?: string;
        background?: string;
    },
    h5?: {
        "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana"
        "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px"
        color?: string;
        background?: string;
    },
    h6?: {
        "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana"
        "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px"
        color?: string;
        background?: string;
    }
};

Свойство defaultStyles не применяет CSS к затронутым блокам. Применяйте соответствующие CSS-стили отдельно:

index.html
<div id="root"></div>
index.js
const editor = new richtext.Richtext("#root", {
    defaultStyles: {
        h2: { 
            "font-family": "Roboto",
            "font-size": "28px",
            color: "purple",
            background: "#FFC0CB"
        }
    }
});
index.css
#root h2 {
    font-family: Roboto;
    font-size: 28px;
    color: purple;
    background: #FFC0CB;
}

В этом примере все блоки h2 используют семейство шрифтов "Roboto" размером 28px с фиолетовым текстом на розовом фоне. Соответствующее CSS-правило применяет те же значения к отображаемым элементам h2.

Связанный пример: RichText. Изменение значения по умолчанию для типографики (шрифт, размер шрифта и т.д.)

Need more help?Contact Support