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

将 GrapesJS 嵌入 Django 项目：将编辑器渲染成模板，用 CSRF 将内容持久化到视图，存储项目 JSON，并导出 HTML/CSS。

如何将GrapesJS集成到Django应用中（完整指南2026）
#django#python#tutorial
DevFuture Development
DevFuture Development
2026年6月14日 • 14 天前
阅读约 6 分钟10 次浏览

为什么GrapesJS适合Django

GrapesJS 是一个仅限浏览器、MIT许可的编辑器，因此Django的作用很简单 提供编辑器模板并暴露两个端点——一个用于加载已保存的 一个项目，一个用于存储。本指南构建了一个可行的设置：一个模板 托管编辑器，该视图保留内容并保护CSRF，且 HTML/CSS 导出。

1. 用模板渲染编辑器

创造 templates/editor.html。Django 设置了 csrftoken 饼干自动反应;我们用JavaScript读过存档请求。

{% load static %}
<!doctype html>
<html>
<head>
  <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="{% static 'js/editor.js' %}"></script>
</body>
</html>

2. 带远程存储初始化 GrapesJS

在 static/js/editor.js中，读取CSRF cookie并配置 存储管理器转为 POST 到 Django。

function getCookie(name) {
  const match = document.cookie.match('(^|;)\\s*' + name + '\\s*=\\s*([^;]+)');
  return match ? match.pop() : '';
}

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-CSRFToken': getCookie('csrftoken') },
      },
    },
  },
});

3. 添加模型、视图和网址

在模型上以 JSON 格式存储项目：

# models.py
from django.db import models

class Page(models.Model):
    key = models.SlugField(unique=True, default="home")
    project = models.JSONField(default=dict)   # full editable project
    html = models.TextField(blank=True)
    css = models.TextField(blank=True)
# views.py
import json
from django.http import JsonResponse
from django.shortcuts import render
from .models import Page

def editor(request):
    return render(request, "editor.html")

def load(request):
    page, _ = Page.objects.get_or_create(key="home")
    return JsonResponse(page.project, safe=False)

def save(request):
    data = json.loads(request.body or "{}")
    Page.objects.update_or_create(
        key="home",
        defaults={
            "project": data,
            "html": data.get("gjs-html", ""),
            "css": data.get("gjs-css", ""),
        },
    )
    return JsonResponse({"status": "ok"})
# urls.py
from django.urls import path
from . import views

urlpatterns = [
    path("editor/", views.editor),
    path("editor/load/", views.load),
    path("editor/save/", views.save),
]

由于请求携带 X-CSRFToken 头部， CsrfViewMiddleware 无需你禁用CSRF即可接受POST。

4. 渲染导出的页面

<style>{{ page.css|safe }}</style>
{{ page.html|safe }}

只有在编辑者值得信赖时才标记存储的标记 |safe ; 否则就消毒输出。

Django 常见的陷阱

Python code on a monitor
CSRF cookie 和 JSONField 是两个常见的卡壳。

大多数Django集成都会遇到两个问题。第一种是CSRF：如果你设置 CSRF_COOKIE_HTTPONLY = True了，JavaScript无法读取cookie， csrftoken 所以 X-CSRFToken 头部是空的，POST会被拒绝——保持可读性，或者将令牌渲染到模板中。第二个是存储类型：整个项目用 a JSONField ，而不是 TextField 手动解析，这样数据才能准确地重新加载到编辑器里。在生产环境中，编辑器的静态 editor.js 数据也必须通过白噪声或CDN收集 collectstatic 并提供，否则页面加载GrapesJS但从未初始化。

前提条件

你需要Python 3.10+和Django 4或5的项目。Node.js是可选的——装载 GrapesJS 是从 CDN 模板中提取，或者和你的资产工具链捆绑。在那里 不是针对Django的GrapesJS包;编辑器在浏览器中运行并进行对话 通过HTTP进行视角，因此熟悉模板、视图、URL和Django的相关内容 CSRF cookie 就足够了。

向编辑器添加自定义方块

在以下 grapesjs.init情况下，用块管理器注册可拖拽的构建块：

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

可以从GJS获取现成的块库和预设。市场需要更丰富的起始套装。

存储深度潜入：定制适配器

远程预设是最快的路径，但自定义存储适配器也能提供 完全控制项目的加载和保存方式——对 UI 的积极性非常实用 或非标准商店：

function getCookie(name) {
  const m = document.cookie.match('(^|;)\\s*' + name + '\\s*=\\s*([^;]+)');
  return m ? m.pop() : '';
}
editor.Storage.add('django-store', {
  async load() {
    const res = await fetch('/editor/load/');
    return res.ok ? res.json() : {};
  },
  async store(data) {
    await fetch('/editor/save/', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json', 'X-CSRFToken': getCookie('csrftoken') },
      body: JSON.stringify(data),
    });
  },
});
// then: storageManager: { type: 'django-store' }

把项目存储在一个 JSONField 文件夹里，这样它就能准确地重新加载到编辑器里。

表演技巧

只在编辑器页面上提供编辑器的JavaScript，并延迟它，这样它就永远不会 块先涂漆。缓存已发布页面（Django 的缓存框架或 CDN） 并且在保存时无效。在生产环境中，编辑者的静态文件必须被收集 由 collectstatic WhiteNoise或CDN服务，或者页面加载 GrapesJS，但从不初始化。

安全考量

保持CSRF保护，并在头部发送令牌 X-CSRFToken 。 保护保存视图并 login_required 进行权限检查 只有授权用户才能覆盖页面。标记存储标记 |safe 只有在编辑值得信赖的情况下——否则就在输出时进行净化。限制请求 体型，所以超大项目不会耗尽记忆。

排查常见问题

403 禁止（CSRF） 意味着 csrftoken Cookie 是 不可读取（通常 CSRF_COOKIE_HTTPONLY = True为），或头部为 失踪。 没有样式的画布 意味着GrapesJS样式表没有 装填。 空白编辑器 意味着容器选择器没有匹配。 413 意味着项目负载超过了服务器的体力限制。

什么时候使用 GrapesJS 搭配 Django

当你的Django应用需要嵌入可视化页面或邮件构建器时，GrapesJS就很适合你 你的用户控制，由你自己的模型支持，并由你的基础设施提供服务。 对于单一字段的内嵌富文本，较轻的所见即所得（WYSIWYG）就足够了;全页 包含布局、样式和干净的 HTML/CSS 导出的 composition ，GrapesJS 是 更强大、获得麻省理工学院许可、自托管的选择。

下一步

用模块和插件扩展编辑器。参见相关内容 GrapesJS + React 指南，浏览一下 存储适配器插件 及完整版 GrapesJS 市场，或者从那里开始 GJS。市场主页。

常见问题

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

配置存储管理器，节点为 type: 'remote' urlStore/urlLoad 在Django URLs。发送CSRF令牌 X-CSRFToken 然后将项目 JSON 存储在模型字段中。

我应该把项目数据存储在哪里？

用a JSONField 来完成整个项目，这样它会重新加载到编辑器里 没错，还有可选的 html/css 文本字段用于发布。

我该如何将 GrapesJS 的 CSRF 令牌发送到 Django？

用JavaScript读取 csrftoken cookie，然后传递给 X-CSRFToken 存储管理器 headers 选项中的 header。

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

在寻找 GrapesJS 插件吗？

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

浏览市场 →
分享本文TwitterFacebookLinkedIn

相关 GrapesJS 问题

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

更多来自 DevFuture Development

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

查看全部文章

来自 DevFuture Development 的付费插件

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

访问店铺 →