Intlayer 可视化编辑器文档

Intlayer 可视化编辑器是一种工具，可以将您的网站包装起来，通过可视化编辑器与您的内容声明文件进行交互。

intlayer-editor 包基于 Intlayer，可用于 JavaScript 应用程序，例如 React (Create React App)、Vite + React 和 Next.js。

可视化编辑器 vs 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 --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 应与您在编辑器配置中设置的 URL (applicationURL) 匹配。

2. 然后，打开提供的 URL。默认值为 http://localhost:8000。

   您可以通过将光标悬停在内容上查看每个由 Intlayer 索引的字段。

   

3. 如果您的内容被标出，您可以长按它以显示编辑抽屉。

调试

如果您在使用可视化编辑器时遇到任何问题，请检查以下内容：

• 可视化编辑器和应用程序是否正在运行。

• editor 配置是否正确设置在您的 Intlayer 配置文件中。

  • 必需字段：
    • 应用程序 URL 应与您在编辑器配置中设置的 URL (applicationURL) 匹配。

• 可视化编辑器使用 iframe 显示您的网站。确保您的网站的内容安全策略 (CSP) 允许 CMS URL 作为 frame-ancestors（默认值为 'http://localhost:8000'）。检查编辑器控制台是否有任何错误。