Payload Visual Editor 项目使用教程-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00533/article/details/147344102

Payload Visual Editor 项目使用教程

payload-visual-editor Payload CMS plugin which provides a visual live editor directly in the Admin UI. Works for collections and globals. Compatible with any kind of JS/TS based frontend technology. 项目地址: https://gitcode.com/gh_mirrors/pa/payload-visual-editor

1. 项目的目录结构及介绍

Payload Visual Editor 是一个为 Payload CMS 提供可视化实时编辑器的插件。以下是项目的目录结构及其介绍：

src: 源代码目录，包含了插件的全部 TypeScript 和 SCSS 文件。
dist: 构建目录，用于存放编译后的文件。
example: 示例项目目录，包含了使用 Payload Visual Editor 的演示项目。
docker-compose.yml: Docker 编排文件，用于定义和运行多容器 Docker 应用。
Dockerfile: Dockerfile 文件，用于构建 Docker 容器镜像。
package.json: npm 包配置文件，定义了项目的依赖、脚本和元数据。
tsconfig.json: TypeScript 配置文件，定义了 TypeScript 编译器的选项。
.gitignore: Git 忽略文件，指定哪些文件和目录应该被 Git 忽略。
CHANGELOG.md: 更新日志文件，记录了项目的版本更新和变更历史。
LICENSE: 许可证文件，本项目使用 MIT 许可证。
README.md: 项目自述文件，提供了项目的基本信息和使用说明。

2. 项目的启动文件介绍

项目的启动主要是通过 example 目录下的示例项目来展示如何集成 Payload Visual Editor。以下是启动示例项目的基本步骤：

在 example 目录下运行 docker-compose up 来启动 Docker 容器。
等待容器启动完成后，在浏览器中访问前端演示项目的地址，通常是 http://localhost:3000。

在前端项目中，通过以下代码片段来接收来自 Payload CMS 的实时预观数据：

const [page, setPage] = useState<Page | null>(null);

useEffect(() => {
  const listener = (event: MessageEvent) => {
    if (event.data.cmsLivePreviewData) {
      setPage(event.data.cmsLivePreviewData);
    }
  };
  window.addEventListener("message", listener, false);
  return () => {
    window.removeEventListener("message", listener);
  };
}, []);

3. 项目的配置文件介绍

项目的配置主要通过 package.json 和 tsconfig.json 文件进行。

package.json 文件中定义了项目的名称、版本、描述、依赖、脚本等。其中 scripts 字段定义了一系列的 npm 脚本，用于执行不同的构建和开发任务。
tsconfig.json 文件中定义了 TypeScript 编译器的选项，包括编译的文件、模块系统、编译选项等。这是 TypeScript 项目的核心配置文件，确保了源代码能够正确地被编译成 JavaScript。

在集成 Payload Visual Editor 到你的 Payload CMS 项目时，你需要在 Payload 的配置文件中添加插件，并配置预览 URL 和其他选项，如下所示：

import { visualEditor } from "payload-visual-editor";

const config = buildConfig({
  collections: [
    // ...
  ],
  plugins: [
    visualEditor({
      previewUrl: ({ locale }) => `http://localhost:3001/pages/preview`,
      // ...
    }),
  ],
  // ...
});

这样，你就可以在 Payload CMS 的管理界面中享受到可视化实时编辑功能了。

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考