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

Начало работы

Это понятное и исчерпывающее руководство проведёт вас через шаги, необходимые для того, чтобы получить полностью рабочий RichText на странице.

WYSIWYG-редактор DHTMLX RichText на веб-странице

Шаг 1. Подключение исходных файлов​

Начните с создания HTML-файла и назовите его index.html. Затем подключите исходные файлы RichText в созданный файл.

Необходимы два файла:

  • JS-файл RichText
  • CSS-файл RichText
index.html
<!DOCTYPE html>
<html>
    <head>
        <title>How to Start with RichText</title>
        <script src="./codebase/richtext.js"></script>   
        <link href="./codebase/richtext.css" rel="stylesheet">
    </head>
    <body>
        <script>
        // ваш код будет здесь
        </script>
    </body>
</html>

Установка RichText через npm или yarn​

Вы можете импортировать JavaScript RichText в свой проект с помощью пакетного менеджера yarn или npm.

Установка ознакомительной версии RichText через npm или yarn​

К сведению

Если вы хотите использовать ознакомительную версию RichText, загрузите пакет ознакомительной версии RichText и следуйте инструкциям в файле README. Обратите внимание, что ознакомительная версия RichText доступна только 30 дней.

Установка PRO-версии RichText через npm или yarn​

К сведению

Вы можете получить доступ к приватному npm DHTMLX напрямую в Личном кабинете, сгенерировав логин и пароль для npm. Подробное руководство по установке также доступно там. Обратите внимание, что доступ к приватному npm предоставляется только при наличии действующей лицензии на RichText.

Шаг 2. Создание RichText​

Теперь вы готовы добавить RichText на страницу. Сначала создадим контейнер <div> для RichText. Выполните следующие шаги:

  • укажите DIV-контейнер в файле index.html
  • инициализируйте RichText с помощью конструктора richtext.Richtext

В качестве параметров конструктор принимает любой валидный CSS-селектор HTML-контейнера, в который будет помещён RichText, а также соответствующие объекты конфигурации.

index.html
<!DOCTYPE html>
<html>
    <head>
        <title>How to Start with RichText</title>
        <script src="./codebase/richtext.js"></script>   
        <link href="./codebase/richtext.css" rel="stylesheet">  
    </head>
    <body>
        <div id="root"></div>

        <script>
            const editor = new richtext.Richtext("#root", {
                // свойства конфигурации
            });
        </script>
    </body>
</html>

Шаг 3. Настройка RichText​

Далее вы можете указать свойства конфигурации, которые должен иметь компонент RichText при инициализации.

Чтобы начать работу с RichText, сначала нужно передать начальные данные в редактор через свойство value. Кроме того, вы можете включить menubar, настроить toolbar, указать режимы fullscreen и layout, применить новую locale, а также стили по умолчанию.

const editor = new richtext.Richtext("#root", {
    menubar: true,
    toolbar: false,
    fullscreenMode: true,
    layoutMode: "document",
    locale: richtext.locales.cn
    defaultStyles: {
        h4: {
            "font-family": "Roboto"
        },
        // другие настройки
    }
});

Что дальше​

Вот и всё. Всего три простых шага — и у вас есть удобный инструмент для редактирования контента. Теперь вы можете начать работать с контентом или продолжить изучение возможностей JavaScript RichText. Если вы разрабатываете с ИИ-ассистентом для написания кода, подключите его к актуальной документации через MCP-сервер DHTMLX.

Need more help?Contact Support