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

www.youtube.com

Open embedded page in fullscreen

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 как зависимость для разработки:

npm install intlayer-editor --save-dev

С флагом --with вы можете запустить редактор параллельно с другой командой:

{
  "scripts": {
    "start:editor": "npx intlayer-editor start --with 'next dev --turbopack'",
  },
}

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

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

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).

Учтите, что команда переэкспортируется пакетом intlayer. Вместо этого вы можете использовать npx intlayer editor start.

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

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

   

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

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

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

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

npx intlayer-editor start -f .env.development

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

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

npx intlayer-editor start -e development

Отладка

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

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

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

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

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

Часто задаваемые вопросы