Интеграция со Svelte

Подсказка

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

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

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

К сведению

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

В этом руководстве используется проект Svelte на основе Vite. Для SvelteKit и других вариантов см. руководство по проектам Svelte.

Создайте новый проект Vite:

npm create vite@latest

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

Когда мастер создания проекта запросит имя, укажите my-svelte-richtext-app. Затем перейдите в новую директорию:

cd my-svelte-richtext-app

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

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

yarn
yarn dev

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

npm install
npm run dev

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

Создание RichText

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

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

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

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

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

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

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

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

Richtext.svelte

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

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

Richtext.svelte

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

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

Настройка контейнера и инициализация RichText

Задайте контейнерный элемент для RichText и инициализируйте компонент внутри onMount(). Вызовите метод destructor() внутри onDestroy(), чтобы удалить RichText:

Richtext.svelte

<script>
import { onMount, onDestroy } from "svelte";
import { Richtext } from "@dhx/trial-richtext";
import "@dhx/trial-richtext/dist/richtext.css";

let richtext_container; // контейнер для RichText
let editor;

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

onDestroy(() => {
    editor?.destructor(); // уничтожение RichText
});
</script>

<div class="component_container">
    <div bind:this={richtext_container} class="widget"></div>
</div>

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

Добавьте стили для RichText и его контейнера в основной CSS-файл проекта (например, src/app.css):

app.css

/* базовые стили страницы */
html,
body {
    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.svelte, импортируйте данные и передайте значение компоненту <RichText/> в виде пропса:

App.svelte

<script>
import RichText from "./Richtext.svelte";
import { getData } from "./data.js";

const { value } = getData();
</script>

<RichText value={value} />

Откройте Richtext.svelte и передайте значение пропса в конфигурацию RichText:

Richtext.svelte

<script>
import { onMount, onDestroy } from "svelte";
import { Richtext } from "@dhx/trial-richtext";
import "@dhx/trial-richtext/dist/richtext.css";

export let value;

let richtext_container;
let editor;

onMount(() => {
    editor = new Richtext(richtext_container, {
        value
        // другие свойства конфигурации
    });
});

onDestroy(() => {
    editor?.destructor(); 
});
</script>

<div class="component_container">
    <div bind:this={richtext_container} class="widget"></div>
</div>

Также можно вызвать метод setValue() внутри onMount() для загрузки данных в RichText:

Richtext.svelte

<script>
import { onMount, onDestroy } from "svelte";
import { Richtext } from "@dhx/trial-richtext";
import "@dhx/trial-richtext/dist/richtext.css";

export let value;

let richtext_container; 
let editor;

onMount(() => {
    editor = new Richtext(richtext_container, {
        // другие свойства конфигурации
    });

    editor.setValue(value);
});

onDestroy(() => {
    editor?.destructor(); 
});
</script>

<div class="component_container">
    <div bind:this={richtext_container} class="widget"></div>
</div>

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

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

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

Откройте Richtext.svelte и обновите хук onMount(). В примере ниже выводится сообщение при каждом событии print:

Richtext.svelte

<script>
// ...
let editor;

onMount(() => {
    editor = new Richtext(richtext_container, {});

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

onDestroy(() => {
    editor?.destructor();
});
</script>

// ...

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

Интеграция RichText со Svelte готова. Настройте код под свои нужды. Полный пример доступен на GitHub.