如何将GrapesJS集成到Laravel应用中（2026年完整指南）

将GrapesJS拖放编辑器嵌入Laravel应用：在Blade视图中渲染，用CSRF将内容持久化到控制器，导出干净的HTML/CSS。

如何将GrapesJS集成到Laravel应用中（2026年完整指南）
#拉拉维尔#php#tutorial
DevFuture Development
DevFuture Development
2026年6月2日 • 1 个月前
阅读约 8 分钟7 次浏览

为什么GrapesJS适合Laravel

GrapesJS 是一款不受框架限制、受 MIT 许可的编辑器，完全运行于 浏览器，因此它与Laravel可以干净地配对：Laravel服务编辑器页面， 会暴露几条用于加载和存储内容的路由，而 GrapesJS 则处理 客户端上的拖放界面。本指南构建了一个可操作的设置——Blade视角 编辑器托管编辑器，一个控制器，能够持久化内容并保护CSRF， 以及 HTML/CSS 导出。

1. 在刀片视图中加载葡萄JS

最快的起点是加拿大货币。创作 resources/views/editor.blade.php 并添加CSRF元标签，以便保存请求能够进行认证。

<!doctype html>
<html>
<head>
  <meta name="csrf-token" content="{{ csrf_token() }}">
  <link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet">
</head>
<body>
  <div id="gjs"><h1>Edit me in GrapesJS</h1></div>
  <script src="https://unpkg.com/grapesjs"></script>
  <script src="/js/editor.js"></script>
</body>
</html>

更喜欢捆绑资产管道？ npm install grapesjs 并导入 通过 Vite 而非 CDN ——编辑器代码完全相同。

2. 初始化编辑器并使用远程存储

在 public/js/editor.js中，读取元标签中的CSRF令牌，并且 配置存储管理器为 POST 到 Laravel。

const csrf = document
  .querySelector('meta[name="csrf-token"]')
  .getAttribute('content');

const editor = grapesjs.init({
  container: '#gjs',
  height: '100vh',
  fromElement: true,
  storageManager: {
    type: 'remote',
    stepsBeforeSave: 3,
    options: {
      remote: {
        urlStore: '/editor/save',
        urlLoad: '/editor/load',
        headers: { 'X-CSRF-TOKEN': csrf },
      },
    },
  },
});

3. 添加Laravel路由和控制器

将页面及加载/存储端点注册为：routes/web.php

use App\Http\Controllers\EditorController;

Route::get('/editor', [EditorController::class, 'show']);
Route::get('/editor/load', [EditorController::class, 'load']);
Route::post('/editor/save', [EditorController::class, 'save']);

控制器存储GrapesJS项目JSON（以及可选的渲染版本） HTML/CSS）在模型上：

class EditorController extends Controller
{
    public function show()
    {
        return view('editor');
    }

    public function load()
    {
        $page = Page::firstOrCreate(['key' => 'home']);
        // GrapesJS expects the stored project data back as JSON.
        return response()->json($page->project ?? []);
    }

    public function save(Request $request)
    {
        $data = $request->all();
        Page::updateOrCreate(
            ['key' => 'home'],
            [
                'project' => $data,                 // full editable project
                'html'    => $data['gjs-html'] ?? null,
                'css'     => $data['gjs-css'] ?? null,
            ]
        );
        return response()->json(['status' => 'ok']);
    }
}

因为请求带有 X-CSRF-TOKEN 头部，Laravel 的 web 中间件组接受POST且未禁用CSRF 保护。 project 存储为 JSON/'json' 列，这样可以往返 干净利落。

4. 渲染导出的页面

发布时，请在 Blade 视图中读取存储的 HTML 和 CSS：

<style>{!! $page->css !!}</style>
{!! $page->html !!}

只有当编辑者值得信赖时，才将存储的标记视为可信;消毒 输出：如果终端用户可以编辑页面。

前提条件

你需要PHP 8.1+和一个Laravel 10或11的应用程序。Node.js是可选的—— 你可以在 Blade 视图中从 CDN 加载 GrapesJS，或者通过 Vite 捆绑 你更喜欢资产管道。无需 Laravel 专用的 GrapesJS 包; 编辑器是纯浏览器JavaScript，通过HTTP与你的路由通信。A 对Blade、路线、控制器和CSRF的基本理解足以发售 这种融合。

向编辑器添加自定义方块

通过注册块，给编辑们一个可以拖到画布上的东西 区块经理在 grapesjs.init：

editor.BlockManager.add('hero', {
  label: 'Hero section',
  category: 'Sections',
  content: '<section class="hero"><h1>Headline</h1><p>Copy</p></section>',
});

editor.BlockManager.add('cta', {
  label: 'Call to action',
  category: 'Sections',
  content: '<div class="cta"><a href="#">Get started</a></div>',
});

如果想要更丰富的生产准备模块、预设和存储辅助，可以拉取 GJS 的插件。用市场市场，而不是手工重建常见模式。

将项目存储在JSON列中

持久化整个可编辑项目，使页面在编辑器中重新打开时完全相同 并且将渲染出来的 HTML/CSS 放在各自的列中以便快速传递。A 迁徙：

Schema::create('pages', function (Blueprint $table) {
    $table->id();
    $table->string('key')->unique();
    $table->json('project')->nullable();   // full GrapesJS project
    $table->longText('html')->nullable();
    $table->longText('css')->nullable();
    $table->timestamps();
});
public function save(Request $request)
{
    $data = $request->all();
    Page::updateOrCreate(
        ['key' => 'home'],
        [
            'project' => $data,
            'html'    => $data['gjs-html'] ?? null,
            'css'     => $data['gjs-css'] ?? null,
        ]
    );
    Cache::forget('page:home');         // bust the published cache
    return response()->json(['status' => 'ok']);
}

授权存档路线

CSRF可以防止伪造请求，但你仍然需要授权，所以只需 合适的用户可以编辑页面。用策略或中间件对路由进行门禁：

Route::post('/editor/save', [EditorController::class, 'save'])
    ->middleware(['auth', 'can:edit-pages']);

渲染已发布页面（缓存）

从缓存中提供存储的HTML/CSS，这样访客就不用为编辑器的渲染付费 成本，并在存档时使其失效：

public function show()
{
    $page = Cache::remember('page:home', 3600, fn () =>
        Page::where('key', 'home')->first()
    );
    return view('page', ['page' => $page]);
}

表演技巧

只在编辑器界面加载GrapesJS，不要在全站范围内加载，并且推迟它的脚本，因此 它从来不会挡住第一层油漆。缓存渲染输出（Laravel缓存或CDN） 然后在存档时破解。如果导出或后期处理 HTML 很繁重，可以推到 排队作业，这样保存请求会立即返回。存储 project 为 真实 json的/jsonb 专栏，这样部分阅读会便宜。

安全考量

保持CSRF保护——在头部发送令牌 X-CSRF-TOKEN 而不是禁用 VerifyCsrfToken。授权每一次状态变更 路线。如果非管理员可以编辑页面，就把存储的标记当作不可信：进行净化 在输出（例如 mews/purifier）上，而不是回应原始 HTML。 验证接收的有效载荷大小，这样一个庞大的项目就不会耗尽内存。

排查常见问题

419页过期 表示CSRF令牌缺失——请确认 csrf-token Meta 标签存在并发送为 X-CSRF-TOKEN。 未样式的画布 意味着GrapesJS样式表没有加载。 空白编辑器 通常意味着容器选择器不匹配 页面上的一个元素。 413 有效载荷过大 意味着项目 JSON超过你的上传/正文限制——提高 post_max_size 或 框架限制。

什么时候用GrapesJS配合Laravel

当你的Laravel应用需要一个嵌入的可视化编辑器时，GrapesJS非常适合你的用户 Control——着陆页、邮件模板、白标页面构建器——支持 你自己的数据库，并由你自己的基础设施提供服务。对于简单的富文本 在形式场内，轻量级所见即所得（WYSIWYG）就足够了;用于整页作文 在布局、样式和干净的 HTML/CSS 导出方面，GrapesJS 更为强大， MIT授权的自托管选择。

制作技巧

Analytics dashboard on a screen
缓存导出的HTML，这样访客就不用等渲染。

几个选择让Laravel + GrapesJS的设备就适合生产。把编辑器项目存储在 json 列（或 jsonb PostgreSQL）中，这样它可以无损往返，渲染后的 html/css 则放在可以直接提供的不同列里。缓存渲染输出（Laravel缓存或CDN），保存时保存，这样访客就不用等编辑器了。保持CSRF保护——把令牌发送到头部 X-CSRF-TOKEN ，而不是禁用 VerifyCsrfToken。最后，如果编辑者不值得信任，可以在输出时删除存储的标记（例如 mews/purifier），而不是回应原始 HTML，因为 GrapesJS 忠实地存储了粘贴的内容。

下一步

添加模块和插件以匹配你的设计系统。参见相关内容 GrapesJS + React 和 GrapesJS + Vue 指南，浏览一下 存储适配器插件 及完整版 GrapesJS 市场，或者从那里开始 GJS。市场主页。

常见问题

我如何将GrapesJS的内容保存到Laravel后端？

配置存储管理器，节点为 type: 'remote' urlStore/urlLoad 在拉拉维尔线路。发送CSRF令牌 然后在 X-CSRF-TOKEN 头部存储HTML、CSS和项目 模型上的JSON。

GrapesJS 需要在 Laravel 里构建步骤吗？

不。最简单的设置是从CDN的刀片视图加载，或者通过以下方式导入 如果你喜欢捆绑流水线，可以用Vite/Laravel Mix。编辑器是普通浏览器 无论如何都要用JavaScript。

当GrapesJS发布到Laravel时，我该如何处理CSRF？

在你的布局中添加 csrf-token 一个元标签，并将其值传递为 X-CSRF-TOKEN 存储管理器 headers中的头部 选项。Laravel的网页中间件随后接受保存请求。

更多标签：
#葡萄
发布于 2026年6月2日
更新于 2026年6月27日
🔌 GJS.Market

在寻找 GrapesJS 插件吗？

超过 100 款精选插件、预设与模板 —— 由社区精挑细选并持续维护。

浏览市场 →
分享本文TwitterFacebookLinkedIn

相关 GrapesJS 问题

浏览全部 GrapesJS 问题 →
发布平台
DevFuture Development
DevFuture Development
访问店铺 →

更多来自 DevFuture Development

发现更多精彩文章，及时获取最新内容。

查看全部文章

来自 DevFuture Development 的付费插件

由该作者精心打造的精选付费插件。

访问店铺 →