Получайте уведомления о предстоящих релизах Intlayer
    Создание:2025-08-23Последнее обновление:2025-08-23

    Документация по Intlayer Visual Editor

    Intlayer Visual Editor - это инструмент, который оборачивает ваш веб-сайт для взаимодействия с файлами декларации контента с использованием визуального редактора.

    Интерфейс Intlayer Visual Editor

    Пакет intlayer-editor основан на Intlayer и доступен для JavaScript-приложений, таких как React (Create React App), Vite + React и Next.js.

    Визуальный редактор vs CMS

    Intlayer Visual Editor - это инструмент, который позволяет управлять вашим контентом в визуальном редакторе для локальных словарей. После внесения изменений контент будет заменён в кодовой базе. Это означает, что приложение будет пересобрано, и страница будет перезагружена для отображения нового контента.

    В отличие от этого, Intlayer CMS - это инструмент, который позволяет управлять вашим контентом в визуальном редакторе для удалённых словарей. После внесения изменений контент не повлияет на вашу кодовую базу. И веб-сайт автоматически отобразит изменённый контент.

    Интеграция Intlayer в ваше приложение

    Для получения более подробной информации о том, как интегрировать Intlayer, см. соответствующий раздел ниже:

    Интеграция с Next.js

    Для интеграции с Next.js обратитесь к руководству по настройке.

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

    Для интеграции с Create React App обратитесь к руководству по настройке.

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

    Для интеграции с Vite + React обратитесь к руководству по настройке.

    Как работает Intlayer Editor

    Визуальный редактор в приложении включает в себя две вещи:

    • Фронтенд-приложение, которое отображает ваш веб-сайт в iframe. Если ваш веб-сайт использует Intlayer, визуальный редактор автоматически обнаружит ваш контент и позволит вам взаимодействовать с ним. После внесения изменений вы сможете скачать изменения.

    • После нажатия кнопки загрузки визуальный редактор отправит запрос на сервер для замены ваших файлов декларации контента новым контентом (где бы эти файлы ни были объявлены в вашем проекте).

    Обратите внимание, что на данный момент Intlayer Editor записывает ваши файлы декларации контента в формате JSON.

    Установка

    После настройки Intlayer в вашем проекте просто установите intlayer-editor как зависимость для разработки:

    bash
    npm install intlayer-editor --save-dev

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

    В вашем файле конфигурации Intlayer вы можете настроить параметры редактора:

    intlayer.config.ts
    import type { IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  // ... другие настройки конфигурации  editor: {    /**     * Обязательно     * URL приложения.     * Это URL, на который нацелен визуальный редактор.     * Пример: 'http://localhost:3000'     */    applicationURL: process.env.INTLAYER_APPLICATION_URL,    /**     * Необязательно     * По умолчанию `true`. Если `false`, редактор неактивен и недоступен.     * Может использоваться для отключения редактора в определённых средах по соображениям безопасности, например, в продакшене.     */    enabled: process.env.INTLAYER_ENABLED,    /**     * Необязательно     * По умолчанию `8000`.     * Порт сервера редактора.     */    port: process.env.INTLAYER_PORT,    /**     * Необязательно     * По умолчанию "http://localhost:8000"     * URL сервера редактора.     */    editorURL: process.env.INTLAYER_EDITOR_URL,  },};export default config;

    Чтобы увидеть все доступные параметры, обратитесь к документации по конфигурации.

    Использование редактора

    1. После установки редактора вы можете запустить его с помощью следующей команды:

      bash
      npx intlayer-editor start

      Обратите внимание, что ваше приложение должно работать параллельно. URL приложения должен совпадать с тем, который вы указали в конфигурации редактора (applicationURL).

    2. Затем откройте предоставленный URL. По умолчанию http://localhost:8000.

      Вы можете просмотреть каждое поле, индексированное Intlayer, наведя курсор на ваш контент.

      Наведение на контент

    3. Если ваш контент выделен, вы можете долго нажимать на него, чтобы отобразить панель редактирования.

    Конфигурация окружения

    Редактор можно настроить на использование конкретного файла окружения. Это полезно, когда вы хотите использовать один и тот же файл конфигурации для разработки и продакшена.

    Чтобы использовать конкретный файл окружения, вы можете использовать флаг --env-file или -f при запуске редактора:

    bash
    npx intlayer-editor start -f .env.development

    Обратите внимание, что файл окружения должен находиться в корневой директории вашего проекта.

    Или вы можете использовать флаг --env или -e, чтобы указать окружение:

    bash
    npx intlayer-editor start -e development

    Отладка

    Если вы столкнулись с какими-либо проблемами с визуальным редактором, проверьте следующее:

    • Визуальный редактор и приложение работают.

    • Конфигурация editor правильно настроена в вашем файле конфигурации Intlayer.

      • Обязательные поля:
        • URL приложения должен совпадать с тем, который вы указали в конфигурации редактора (applicationURL).
    • Визуальный редактор использует iframe для отображения вашего сайта. Убедитесь, что политика безопасности контента (Content Security Policy, CSP) вашего сайта разрешает URL CMS в качестве frame-ancestors (по умолчанию 'http://localhost:8000'). Проверьте консоль редактора на наличие ошибок.

    История документа

    • 5.5.10 - 2025-06-29: Инициализация истории
    Получайте уведомления о предстоящих релизах Intlayer