Спросите свой вопрос и получите сводку документа, используя эту страницу и выбранного вами поставщика AI
Интеграция сервера MCP Intlayer в ваш любимый AI-ассистент позволяет получать все документы непосредственно из ChatGPT, DeepSeek, Cursor, VSCode и т.д.
Просмотр документации сервера MCPСодержимое этой страницы было переведено с помощью ИИ.
Смотреть последнюю версию оригинального контента на английскомЕсли у вас есть идея по улучшению этой документации, не стесняйтесь внести свой вклад, подав запрос на вытягивание на GitHub.
Ссылка на документацию GitHubКопировать Markdown документа в буфер обмена
Документация по 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;
Чтобы увидеть все доступные параметры, обратитесь к документации по конфигурации.
Использование редактора
После установки редактора вы можете запустить его с помощью следующей команды:
bashКопировать кодКопировать код в буфер обмена
npx intlayer-editor start
Обратите внимание, что ваше приложение должно работать параллельно. URL приложения должен совпадать с тем, который вы указали в конфигурации редактора (applicationURL).
Затем откройте предоставленный URL. По умолчанию http://localhost:8000.
Вы можете просмотреть каждое поле, индексированное Intlayer, наведя курсор на ваш контент.
Если ваш контент выделен, вы можете долго нажимать на него, чтобы отобразить панель редактирования.
Конфигурация окружения
Редактор можно настроить на использование конкретного файла окружения. Это полезно, когда вы хотите использовать один и тот же файл конфигурации для разработки и продакшена.
Чтобы использовать конкретный файл окружения, вы можете использовать флаг --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'). Проверьте консоль редактора на наличие ошибок.
История документа
- 5.5.10 - 2025-06-29: Инициализация истории