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

Intlayer Visual Editor — це інструмент, який обгортає ваш вебсайт для взаємодії з файлами декларації контенту за допомогою візуального редактора.

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

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

Intlayer Visual editor — це інструмент, який дозволяє керувати вашим контентом у візуальному редакторі для локальних словників. Після внесення зміни вміст буде замінено в code-base. Це означає, що застосунок буде перебудований, а сторінка перезавантажена для відображення нового контенту.

На відміну від цього, Intlayer CMS — це інструмент, який дозволяє керувати вашим контентом у візуальному редакторі для віддалених словників. Після внесення змін, контент не впливає на ваш code-base. А вебсайт автоматично відобразить змінений контент.

Інтегруйте Intlayer у ваш застосунок

Для детальнішої інформації про те, як інтегрувати intlayer, див. відповідний розділ нижче:

Інтеграція з Next.js

Для інтеграції з Next.js зверніться до інструкції з налаштування.

Інтеграція з Create React App

Для інтеграції з Create React App зверніться до керівництва з налаштування.

Інтеграція з Vite + React

Для інтеграції з Vite + React зверніться до керівництва з налаштування.

Як працює Intlayer Editor

Візуальний редактор у застосунку складається з двох частин:

• Фронтенд-додаток, який відображає ваш вебсайт у iframe. Якщо ваш сайт використовує Intlayer, візуальний редактор автоматично виявить ваш контент і дозволить взаємодіяти з ним. Після внесення змін ви зможете завантажити свої зміни.

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

Зауважте, що Intlayer Editor запише ваші файли декларацій вмісту як JSON, якщо розширення файлу — .json. Якщо розширення файлу — .ts, .tsx, .js, .jsx, .mjs, .cjs, він запише файл як JavaScript-файл, використовуючи babel-трансформер.

Встановлення

Після того як 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`, редактор неактивний і до нього неможливо отримати доступ.     * Може використовуватися для відключення редактора в певних середовищах з міркувань безпеки, таких як production.     */    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. Якщо ваш контент має контур, ви можете натиснути і утримувати його, щоб відобразити панель редагування.

Конфігурація середовища

Редактор можна налаштувати на використання конкретного файлу середовища. Це корисно, коли ви хочете використовувати той самий файл конфігурації для development та production.

Щоб використовувати конкретний файл середовища, ви можете вказати прапорець --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' за замовчуванням). Перевірте консоль редактора на наявність помилок.