Документация по визуальному редактору Intlayer

Визуальный редактор Intlayer — это инструмент, который позволяет вам взаимодействовать с вашими файлами деклараций контента с помощью визуального редактора.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Установка

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

npm install intlayer-editor -D

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

1. Включите редактор в вашем файле intlayer.config.ts

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

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

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

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

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

   bash

   npx intlayer-editor start

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

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

   

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