Интеграция с React

Подсказка

Убедитесь, что вы знакомы с базовыми концепциями и паттернами React. Для повторения см. документацию React.

DHTMLX RichText работает с React. Полный пример кода см. в демо на GitHub.

Создание проекта

К сведению

Перед созданием нового проекта установите Node.js и (опционально) Vite.

Создайте новый проект my-react-richtext-app с помощью Create React App:

npx create-react-app my-react-richtext-app

Установка зависимостей

Перейдите в директорию нового приложения:

cd my-react-richtext-app

Установите зависимости и запустите dev-сервер с помощью пакетного менеджера.

Для yarn выполните:

yarn
yarn start

Для npm выполните:

npm install
npm start

Приложение запустится на localhost (например, http://localhost:3000).

Создание RichText

Остановите приложение и установите пакет RichText.

Шаг 1. Установите пакет

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

Шаг 2. Создайте компонент

Создайте React-компонент для добавления RichText в приложение. В директории src/ создайте новый файл Richtext.jsx.

Импорт исходных файлов

Откройте Richtext.jsx и импортируйте исходные файлы RichText.

Для PRO-версии, установленной из локальной папки, используйте:

Richtext.jsx

import { Richtext } from 'dhx-richtext-package';
import 'dhx-richtext-package/dist/richtext.css';

Для ознакомительной версии используйте:

Richtext.jsx

import { Richtext } from '@dhx/trial-richtext';
import "@dhx/trial-richtext/dist/richtext.css";

В этом руководстве используется ознакомительная версия RichText.

Задание контейнера и инициализация RichText

Задайте контейнерный элемент для RichText и инициализируйте компонент с помощью конструктора Richtext внутри useEffect(). Вызовите метод destructor() в функции очистки для удаления RichText:

Richtext.jsx

import { useEffect, useRef } from "react";
import { Richtext } from '@dhx/trial-richtext';
import '@dhx/trial-richtext/dist/richtext.css'; // подключение стилей RichText

export default function RichTextComponent(props) {
    let richtext_container = useRef(); // контейнер для RichText

    useEffect(() => {
        // инициализация компонента RichText
        const editor = new Richtext(richtext_container.current, {});

        return () => {
            editor.destructor(); // уничтожение RichText
        };
    }, []);

    return  <div className="component_container">
                <div ref={richtext_container} className="widget"></div>
            </div>
}

Добавление стилей

Добавьте стили для RichText и его контейнера в главный CSS-файл проекта:

index.css

/* базовые стили страницы */
html,
body,
#root {
    height: 100%;
    padding: 0;
    margin: 0;
}

/* контейнер RichText */
.component_container {
    height: 100%; 
    margin: 0 auto;
}

/* виджет RichText */
.widget {
    height: calc(100% - 56px);
}

Загрузка данных

Подготовьте данные для RichText. Создайте файл data.js в директории src/:

data.js

export function getData() {
  const value = `
    <h2>RichText 2.0</h2>
    <p>Repository at <a href="https://git.webix.io/xbs/richtext">https://git.webix.io/xbs/richtext</a></p>
    <p><img src="https://placecats.com/500/300" style={{width: '500px', height: '300px'}}></p>`;
  return { value };
}

Откройте App.js и импортируйте данные. Передайте значение в компонент <RichText/> как проп:

App.js

import RichText from "./Richtext";
import { getData } from "./data";

function App() {
    const { value } = getData();
    return <RichText value={value} />;
}

export default App;

Откройте Richtext.jsx и передайте props.value в конфигурацию RichText:

Richtext.jsx

import { useEffect, useRef } from "react";
import { Richtext } from "@dhx/trial-richtext";
import "@dhx/trial-richtext/dist/richtext.css";

export default function RichTextComponent(props) {
    let richtext_container = useRef();

    useEffect(() => {
        const editor = new Richtext(richtext_container.current, {
            value: props.value, // применить значение
            // другие свойства конфигурации
        });

        return () => {
            editor.destructor();
        };
    }, []);

    return  <div className="component_container">
                <div ref={richtext_container} className="widget"></div>
            </div>
}

Либо вызовите метод setValue() внутри useEffect() для загрузки данных в RichText:

Richtext.jsx

import { useEffect, useRef } from "react";
import { Richtext } from "@dhx/trial-richtext";
import "@dhx/trial-richtext/dist/richtext.css";

export default function RichTextComponent(props) {
    let richtext_container = useRef();

    let value = props.value;

    useEffect(() => {
        const editor = new Richtext(richtext_container.current, {
            // свойства конфигурации
        });
    
        editor.setValue(value);

        return () => {
            editor.destructor();
        };
    }, []);

    return  <div className="component_container">
                <div ref={richtext_container} className="widget"></div>
            </div>
}

Компонент RichText готов к использованию. React отрисовывает редактор с данными при монтировании элемента <RichText/>. Полный список параметров конфигурации см. в обзоре API RichText.

Обработка событий

RichText генерирует события при действиях пользователя. Подпишитесь на события с помощью метода api.on(), чтобы реагировать на ввод пользователя. См. полный список событий.

Откройте Richtext.jsx и обновите хук useEffect(). Пример ниже выводит сообщение в консоль при каждом событии print:

Richtext.jsx

// ...
useEffect(() => {
    const editor = new Richtext(richtext_container.current, {});

    editor.api.on("print", () => {
        console.log("The document is printing");
    });
    
    return () => {
        editor.destructor();
    };
}, []);
// ...

Запустите приложение, чтобы увидеть RichText с данными на странице.

Теперь у вас есть рабочая интеграция RichText в React. Настройте код под свои нужды. Полный пример доступен на GitHub.