Перейти к основному содержимому
Версия: 26.1.0 (в разработке)

Интеграция редактора на базе API

Перед стартом​

Проверьте:

  • Docker-контейнер запущен по адресу http://localhost:9002.
  • Установлен npm-пакет @nct/web-editor-api.

Если что-то не сделано — сначала выполните «Установка API и запуск редактора»

Шаг 1. Импортируем класс​

Для ES6-модулей:

import { EditorBuilder } from '@nct/web-editor-api';

Для CommonJS:

const { EditorBuilder } = require('@nct/web-editor-api');

Шаг 2. Готовим HTML​

Добавьте два элемента: контейнер для редактора и форму загрузки файла.

<div id="webEditorContainer"></div>
<input type="file" id="fileInput" accept="*/*">

Можно просто скопировать пример разметки — в нем уже всё готово:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web Editor Example</title>
</head>
<body>
    <!-- Поле для выбора файла -->
    <input type="file" id="fileInput" accept="*/*">

    <!-- Контейнер для отображения редактора -->
    <div id="webEditorContainer"></div>

    <!-- Скрипт приложения -->
    <script src="app.js"></script>
</body>
</html>

Шаг 3. Запускаем редактор​

Ждём загрузки DOM — инициализируем редактор:

// Ждем полную загрузку DOM
document.addEventListener('DOMContentLoaded', () => {
    // Получаем элементы интерфейса
    const container = document.getElementById('webEditorContainer'); // Контейнер для отрисовки редактора
    const fileInput = document.getElementById('fileInput');          // Элемент ввода файла

    // Проверяем наличие элементов
    if (!container || !fileInput) {
        console.error('Нет нужных контейнеров.');
        return;
    }

    // Создаем экземпляр EditorBuilder и встраиваем редактор в указанный контейнер
    const openDocumentApi = await new EditorBuilder()
        .mount(container, 'http://localhost:9002/'); // В качестве второго параметра передается адрес, по которому доступен веб редактор.
                                                     // В данном случае указан адрес локально запущенного редактора.

    // Добавляем обработчик для открытия файла
    fileInput.addEventListener('change', (event) => {
        const file = event.target.files[0]; // Выбираем первый выбранный файл

        if (!file) return;

        // Читаем файл как массив байтов (ArrayBuffer)
        const reader = new FileReader();

        reader.onload = async (e) => {
            const arrayBuffer = e.target.result; // Преобразуем файл в буфер
            
            // Передаем файл в редактор
            await openDocumentApi.openDocument({
                content: arrayBuffer,
                filename: 'Hello World'
            });

            console.log('Файл открыт.');
        };

        reader.onerror = (err) => {
            console.error('Ошибка при чтении файла.', err);
        };

        reader.readAsArrayBuffer(file); // Начинаем чтение файла
    });

    console.log('Редактор готов.');
});

Как это работает?​

  • Страница загрузилась: проверяется наличие контейнеров.

  • Создаётся редактор — сразу монтируется в контейнер.

  • При выборе файла: читается содержимое, файл попадает в редактор через openDocument.

После — редактор готов работать с вашим файлом.

Дополнительные настройки​

Перед запуском задайте параметры — только то, что важно:

1. Создайте объект редактора:​

const editorBuilder = new EditorBuilder();

2. Установите режим работы:​

.withMode(OpenMode.edit)

3. Укажите язык, имя пользователя:​

.withLocale('ru-RU')     // Устанавливаем русский интерфейс
.withUserName('Test user') // Имя текущего пользователя

4. Запустите редактор в выбранном контейнере:​

.mount(container, `http://localhost:9002/`)

Всё вместе:

const openDocumentApi = await new EditorBuilder()
    .withMode(OpenMode.edit)        // Режим работы
    .withLocale('ru-RU')            // Язык интерфейса
    .withUserName('Test user')      // Имя пользователя
    .mount(container, `http://localhost:9002/`); // Запускаем!

Самое важное​

  • Установите редактор как npm-пакет.
  • Подготовьте контейнер в HTML.
  • Импортируйте EditorBuilder, задайте параметры, запустите редактор.

Интеграция прошла успешно — редактор готов к работе.