何时将GrapesJS与WordPress结合使用
GrapesJS 是一个独立的、获得麻省理工学院授权的编辑器——不是古腾堡版块。嵌入 在WordPress中，当你需要完全自定义、不依赖框架的拖放时 编辑器里有自己的存储和导出流程。本指南构建了一个小型 插件：托管编辑器的管理页面，保存内容的 REST 端点 用一个 nonce，还有一个在前端渲染的短代码。
1. 创建插件并排队 GrapesJS
在 wp-content/plugins/gjs-editor/gjs-editor.php中注册管理员
只在那个屏幕上排队GrapesJS。把 REST nonce 传递给脚本。
<?php
/* Plugin Name: GJS Editor */
add_action('admin_menu', function () {
add_menu_page('GrapesJS', 'GrapesJS', 'edit_pages', 'gjs-editor', function () {
echo '<div id="gjs"><h1>Edit me</h1></div>';
});
});
add_action('admin_enqueue_scripts', function ($hook) {
if ($hook !== 'toplevel_page_gjs-editor') {
return;
}
wp_enqueue_style('grapesjs', 'https://unpkg.com/grapesjs/dist/css/grapes.min.css');
wp_enqueue_script('grapesjs', 'https://unpkg.com/grapesjs', [], null, true);
wp_enqueue_script('gjs-init', plugins_url('editor.js', __FILE__), ['grapesjs'], null, true);
wp_localize_script('gjs-init', 'GJS', [
'root' => esc_url_raw(rest_url('gjs/v1/page')),
'nonce' => wp_create_nonce('wp_rest'),
]);
});2. 带远程存储初始化 GrapesJS
在 editor.js中，将存储管理器指向 REST 路由并发送
nonce 作为头部 X-WP-Nonce 。
const editor = grapesjs.init({
container: '#gjs',
height: '100vh',
fromElement: true,
storageManager: {
type: 'remote',
stepsBeforeSave: 3,
options: {
remote: {
urlStore: GJS.root,
urlLoad: GJS.root,
headers: { 'X-WP-Nonce': GJS.nonce },
},
},
},
});3. 注册 REST 端点
将项目（以及渲染后的 html/css）存储为 update_option。A
如果你需要很多页面，自定义帖子类型也可以。
add_action('rest_api_init', function () {
register_rest_route('gjs/v1', '/page', [
[
'methods' => 'GET',
'permission_callback' => '__return_true',
'callback' => function () {
return get_option('gjs_project', []);
},
],
[
'methods' => 'POST',
'permission_callback' => function () {
return current_user_can('edit_pages');
},
'callback' => function (WP_REST_Request $req) {
$data = $req->get_json_params();
update_option('gjs_project', $data);
update_option('gjs_html', $data['gjs-html'] ?? '');
update_option('gjs_css', $data['gjs-css'] ?? '');
return ['status' => 'ok'];
},
],
]);
});头部 X-WP-Nonce 允许WordPress认证登录用户
用户，并 permission_callback 强制执行能力检查。
4. 在前端用短代码渲染
add_shortcode('gjs_page', function () {
$css = get_option('gjs_css', '');
$html = get_option('gjs_html', '');
return '<style>' . $css . '</style>' . $html;
});随意进入 [gjs_page] 任何帖子或页面。对存储的标记进行净化处理
如果非管理员可以编辑，输出即可。
安全与性能提示
保持集成精简且安全。只在编辑器界面admin_enqueue_scripts（钩子检查）上排队 GrapesJS，绝不覆盖全站，这样前端保持快速。用调用current_user_can('edit_pages')的 REST 保存路由permission_callback锁定，并且始终发送X-WP-Nonce头部——nonce 会过期（~24小时），所以长时间会话时要刷新或重新发放 nonce。通过渲染短码输出wp_kses_post()，而不是直接回应。对于许多页面，将每个页面存储为自定义帖子类型，而不是选项，这样修订和功能是免费的。
前提条件
你需要 WordPress 6+ 和 PHP 7.4+。这个指南构建了一个很基础的小型插件 熟悉插件API（钩子、队列脚本、REST API、nonces， 以及能力）就足够了。无需构建步骤——GrapesJS是从CDN加载的 或者捆绑成资产。
向编辑器添加自定义方块
在以下 grapesjs.init情况下，用块管理器注册可拖拽的块：
editor.BlockManager.add('hero', {
label: 'Hero section',
category: 'Sections',
content: '<section class="hero"><h1>Headline</h1><p>Copy</p></section>',
});从GJS拉取现成的块库和预设。市场要买更丰富的套装。
以自定义帖子类型的存储页面
选项适用于单页，但自定义帖子类型能让你获得更多页面 免费提供修订和功能。注册并后期存储项目 然后再在之前展示的 REST 回调中读取它。保留这个项目， 将HTML和CSS一起渲染，这样页面重新打开时会完全按保存时的状态。
表演技巧
只在编辑器界面排队 GrapesJS（该 admin_enqueue_scripts
钩子检查），从不覆盖整个场地，这样前端才能保持快速。缓存短码
输出并存档时破灭。推迟编辑器脚本，这样它就不会阻挡管理员
UI。
安全考量
用调用的 REST 存档路由 permission_callback 锁定
current_user_can('edit_pages') 并且总是发送
X-WP-Nonce 头部 — nonce 过期（~24小时），请刷新或重新发布
长时间的治疗。通过以下方式渲染前端输出 wp_kses_post()
而不是像原始加价那样回应。
排查常见问题
403（rest_cookie_invalid_nonce） 表示无用词缺失，或 过期了。 未样式的画布 表示样式表没有被排队。 空白编辑器 意味着容器元素不在管理员上 侍从。如果保存无声失败，请确认当前能力检查是否通过 用户。
何时将GrapesJS与WordPress结合使用
GrapesJS 适合嵌入在你 拥有管理员或产品——当你需要自己的存储和HTML输出时，而不是 延伸古腾堡。如果你只需要在WordPress内部编辑内容，那就用它 块模型，古腾堡是本地选择;对于一个自有、可嵌入的页面 开发商GrapesJS更合适。
下一步
添加模块和插件以匹配你的主题。参见相关内容 GrapesJS + Laravel 指南， 比较 GrapesJS和 Builder.io 的编辑， 浏览 GrapesJS市场，或者从 GJS。市场主页。
常见问题
我如何在WordPress中保存GrapesJS的内容？
注册一个REST路由，发送带有 X-WP-Nonce 首部的请求，
并用（或自定义帖子）存储项目/HTML/CSS update_option
类型）。
GrapesJS 能取代 WordPress 的块编辑器吗？
GrapesJS 是一个独立编辑器，你自己嵌入，而不是一个古腾堡模块。用它 当你需要一个完全自定义、不受框架限制的编辑器，拥有自己的存储和 出口而非推广古腾堡。
我该如何验证存档请求？
从via 传递nonce wp_create_nonce('wp_rest')
wp_localize_script然后发送为 X-WP-Nonce
因此 REST permission_callback 成功。