为什么GrapesJS适合Express / Node
GrapesJS 运行在浏览器中，所以 Express 只需提供编辑器页面和两个 JSON 路由——一个用于加载已保存的项目，一个用于存储。本指南服务于 编辑器，通过 Node 持久化内容，并导出 HTML/CSS。
1. 快递服务器
import express from 'express';
const app = express();
app.use(express.json());
app.use(express.static('public')); // serves public/index.html
let page = {}; // swap for a real DB
app.get('/load', (req, res) => res.json(page));
app.post('/save', (req, res) => {
page = req.body; // full GrapesJS project
res.json({ status: 'ok' });
});
app.listen(3000, () => console.log('http://localhost:3000'));2. 编辑页面
创作 public/index.html：
<link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet">
<div id="gjs"><h1>Edit me</h1></div>
<script src="https://unpkg.com/grapesjs"></script>
<script>
grapesjs.init({
container: '#gjs',
height: '100vh',
fromElement: true,
storageManager: {
type: 'remote',
stepsBeforeSave: 3,
options: { remote: { urlStore: '/save', urlLoad: '/load' } },
},
});
</script>由于页面和API共享相同的Express来源，请求 同源配置，完全避免使用CORS配置。
3. 持久化到真实数据库
app.post('/save', async (req, res) => {
await db.pages.updateOne(
{ key: 'home' },
{ $set: { project: req.body, html: req.body['gjs-html'], css: req.body['gjs-css'] } },
{ upsert: true }
);
res.json({ status: 'ok' });
});制作技巧
将页面存储在变量中的原型无法经得起重启——它会持久存在到一个数据库（JSON/JSONB列或Mongo文档），并按页面键入。GrapesJS的项目可以很大，比如提高Express的人数上限（），express.json({ limit: '5mb' })或者用413的存档默默失败。用认证保护商店路由，防止任何人覆盖页面，同时从同一个Express来源提供编辑器和API，完全避免CORS。如果必须不同，请为编辑器原点启用 CORS，并允许该头。Content-Type
前提条件
你需要Node.js 18+和Express 4或5。GrapesJS 运行在浏览器中，所以 Express 服务编辑器页面和两个 JSON 路由——加载和存储。熟悉度 中间件、路由和JSON体解析就足够了。
向编辑器添加自定义方块
在以下 grapesjs.init情况下，用块管理器注册可拖拽的块：
editor.BlockManager.add('hero', {
label: 'Hero section',
category: 'Sections',
content: '<section class="hero"><h1>Headline</h1><p>Copy</p></section>',
});从GJS拉取现成的块库和预设。市场要买更丰富的套装。
持久化到真实数据库
一个将页面存储在变量中的原型无法经受重启。持久化到按页面键的数据库：
app.post('/save', async (req, res) => {
await db.pages.updateOne(
{ key: 'home' },
{ $set: { project: req.body, html: req.body['gjs-html'], css: req.body['gjs-css'] } },
{ upsert: true }
);
res.json({ status: 'ok' });
});
app.get('/load', async (req, res) => {
const page = await db.pages.findOne({ key: 'home' });
res.json(page?.project ?? {});
});表演技巧
GrapesJS的项目可以很大，所以提高Express的人员数量上限
（express.json({ limit: '5mb' })）或者413级的豁免失败。服务
编辑器和API来自同一来源，以避免CORS。缓存渲染后的输出，并且
开档保存，这样访客就不用支付渲染费用。
安全考量
用认证保护商店路由，防止任何人覆盖页面。如果
编辑器和API存在于不同的起点，仅对编辑起点启用CORS且
允许该标题。 Content-Type 如果
非管理员可以编辑。验证有效载荷大小。
排查常见问题
413 有效载荷过大 意味着 JSON 超过了正体限制——提升 它。 CORS 错误 意味着编辑器和 API 在不同的源头上 没有配置 CORS。 未样式化或空白画布 意味着 样式表无法加载，或者容器不存在。
何时使用 GrapesJS 搭配 Express / Node
GrapesJS 适合需要嵌入式可视化编辑器的自定义 Node 应用和你自己的编辑器 存储——SaaS页面构建器、电子邮件编写器、CMS Surface。对于直列富裕 文本，轻量版编辑器就足够了;用于全页构图，包括版面和样式， 而GrapesJS则是更强的MIT授权选择。
下一步
参见相关的 GrapesJS + React 和 GrapesJS + Laravel 指南， 浏览 存储适配器插件 和 GrapesJS 市场，或者从那里开始 GJS。市场主页。
常见问题
GrapesJS 是如何与 Express 后端通信的？
将存储管理器 type: 'remote' 设置为
urlStore/urlLoad 指向快线;添加
express.json() 并阅读 req.body。
Node 应该把项目存储在哪里？
JSON 列、MongoDB 文档或原型文件——完整存储 项目加上可选的HTML/CSS。
我该如何避免CORS问题？
从同一个Express来源提供编辑器和API，所以请求是 同源;否则启用编辑器原点的 CORS。