快速上手流程
安装并启动编辑器
从官方安装包或 CDN 构建版本开始，然后将编辑器挂载到你的应用框架中。
npm install grapesjs加载起步区块
添加包含主视觉区、表单、定价和行动号召（CTA）的插件包，让用户能够快速构建页面。
editor.BlockManager.add('hero', { ... })接入持久化存储
将 StorageManager 接入你的 API，使项目能够按用户／工作区自动保存和加载。
storageManager: { type: 'remote' }带护栏交付
只向你的产品开放允许使用的组件和样式，从而保持输出干净并符合品牌调性。
editor.on('load', () => { ... })决策助手：框架方案 vs 托管式构建器
架构概览 — GrapesJS 如何建模 HTML 与 CSS
GrapesJS 围绕五个核心管理器构建，每一个都负责一项独立的职责：
画布上的每一个 HTML 元素都是一个 GrapesJS 组件 — 一个带有属性、特征（traits）和事件监听器的模型。你可以定义自定义组件类型，以控制特定元素的渲染和编辑方式。
区块（Blocks）是用户拖拽到画布上的拖放单元。每个区块定义了一段 HTML 片段或组件树。BlockManager 负责对左侧面板中的区块进行分类、渲染和管理。
StyleManager 将 CSS 属性以可交互的 UI 控件形式呈现出来。分组（Sectors）将相关属性（排版、尺寸、背景）归类，并与当前选中的组件进行可视化绑定。
负责编辑器状态的持久化。默认使用 localStorage，但可通过插件替换为任意 REST API、数据库或云存储后端。
管理图片、视频及其他媒体资源。支持自定义上传接口以及资源库集成。
核心 API 亮点
Components API
将每一个 HTML 元素都建模为 GrapesJS 组件。定义类型、特征（traits）和自定义渲染逻辑。组件是画布的基本构成单元。
Block Manager
注册用户可拖拽到画布上的拖放区块。区块可以包含任意 HTML 结构、组件树或内联样式。
Style Manager
通过可视化面板向最终用户开放 CSS 属性。将属性归入不同分组，并直接与选中的组件进行绑定。
代码示例 — 自定义区块定义
向 GrapesJS 添加一个自定义拖放区块只需寥寥数行代码：
editor.BlockManager.add('my-block', {
label: 'My Block',
category: 'Basic',
content: {
type: 'text',
content: 'Hello World',
style: { padding: '10px', 'font-size': '16px' }
},
attributes: { class: 'fa fa-text-height' }
});GJS.Market 上的插件分类
Blocks
预制的拖放区块：主视觉区、定价表、功能网格、用户评价等等。
RTE（富文本）
用 Quill、Tiptap 或 CKEditor 集成替换内置的富文本编辑器。
Storage
将编辑器内容持久化到 REST API、localStorage、Supabase、Firebase 或任意自定义后端。
Export
将干净的 HTML/CSS 导出为文件、复制到剪贴板、打包为 ZIP 压缩包，或导出为 MJML 模板。
UI
扩展并重新设计面板样式，为编辑器界面添加工具栏、模态框、提示框和自定义命令。
应用场景
白标构建器
在你的 SaaS 产品内嵌入一个完全自有品牌的页面编辑器。移除所有 GrapesJS 品牌标识，并加入你自己的主题。
无头 CMS 编辑器
将 GrapesJS 与 Strapi、Contentful 或 Directus 搭配使用，作为结构化内容的可视化编辑层。
邮件编辑器
使用 GrapesJS 的 MJML 预设构建一款响应式邮件设计器，输出可直接用于生产的 MJML。
页面编辑器
借助模板、版块和组件库，构建一款功能完整的拖拽式落地页或网站编辑器。
精选插件
Blocks Library Pro
超过 50 个预制版块与内容区块
Style Manager Pro
配备可视化属性编辑器的高级 CSS 控件
Storage REST API
将 GrapesJS 连接到任意 REST 后端以实现持久化
RTE Tiptap
基于 Tiptap 的富文本编辑器集成
Export ZIP
将整个项目导出为可下载的 ZIP 压缩包
Custom Panels UI
可配置的面板布局与工具栏系统
安装
npm
npm install grapesjsCDN
<!-- HTML -->
<link rel="stylesheet" href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" />
<script src="https://unpkg.com/grapesjs"></script>
<div id="gjs"></div>
<script>
const editor = grapesjs.init({
container: '#gjs',
fromElement: true,
height: '100vh',
storageManager: false,
});
</script>