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

npm install intlayer-editor --save-dev

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

В вашем файле конфигурации 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).

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

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

   

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

Отладка

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

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

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

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

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