HTML 拖放构建器

构建 HTML 拖放式编辑器，就用GrapesJS

用拖拽组件可视化构建HTML页面，编辑样式而不用手写CSS，并且控制你的应用生成的HTML和CSS。

开始构建 试用 HTML 编辑器
开源自托管HTML + CSS 输出可扩展性可嵌入

26k+

GitHub 星

1.4M+

每月 npm 下载量

100+

GJS.Market 上的插件

BSD-3-Clause

核心许可

可视化 ·HTML ·CSS

一区三景

这就是页面的全部论点，包含在一个组件中。「Visual」标签页里就是用户拖动和编辑的画布。另外两个标签页是编辑器交还给代码的——没有隐藏的，没有专有的，只是标记和样式表文本，你可以随意存储、转换和发布。

<div id="editor">

用户看到的内容：左侧是区块，中间是页面，右侧是样式控制。

方块

  • Hero
  • 文本
  • 图片
  • 按钮
  • 柱子
  • 表单
your-app.com/editor
section.hero

Build faster

Launch your next project.

Get started

两个代码窗格都是 GrapesJS 0.23.6 的真实返回值，只是为了便于阅读重新做了缩进——实际每次调用返回的都是一整行。在你基于它们开发之前，有两个细节值得先知道：getHtml() 序列化的是外层 wrapper，所以结果被包在 <body>…</body> 里；getCss() 会把简写声明展开成一条条独立属性，并把颜色统一写成 rgb()。样式表开头还有一小段 GrapesJS 注入的重置样式；getCss({ avoidProtected: true }) 不会输出它。

理念

用可视化的方式构建HTML，而不是手写每个布局

HTML拖放构建器允许用户可视化地组装页面结构，同时你的应用仍掌控底层内容、样式和发布工作流程。

拖放

用户将块和组件移动到画布上，而不是编辑模板文件。你可以决定哪些块存在、可以放置的位置以及它们可能包含什么。

视觉编辑

内容、布局和样式通过面板编辑，而不是手写每条 CSS 规则。编辑器将这些选择转化为普通样式表规则。

HTML + CSS 输出

将最终的HTML和CSS作为两个普通字符串检索，带到你自己的应用程序、自己的存储和发布流程中。

定义

什么是HTML拖放构建器？

它是一款编辑器，用户可以通过将部分拖到画布上，通过控件而非代码进行调整，然后输出真正的HTML和CSS来组装网页。要做到这一点，它必须将以下所有要素整合成一个连贯的软件：

  • HTML组件——画布上的每个元素都被建模为编辑器可以推理的对象
  • 一个画布，能像浏览器一样渲染页面，同时保持可编辑性
  • 拖放，使用有效的投放目标，而非自由漂浮的方框
  • 用户可反复拉取的可重复使用方块
  • 编写真实 CSS 规则的样式控件
  • 每个断点的响应式编辑
  • 图像和媒体资产管理
  • 坚持，让半成品的页面能在关闭的标签页中存活下来
  • 导出和发布完成的 HTML 和 CSS

可视化HTML编辑器与简单的拖放库的区别在于，编辑器将整个编辑状态——选择、组件、样式、命令、存储和输出——作为一个系统管理。库会在屏幕上移动一个框;编辑器知道该框是什么，可能包含什么，哪个CSS规则属于它，以及如何序列化结果。

实时编辑器

试试真正的HTML编辑器

三台公开的GrapesJS组装。只有点击才加载——帧保持不被请求，所以这部分到达时不额外付费。

在新标签页中打开

原版GrapesJS演示版。拖入一个块，选中它，更改样式——然后打开工具栏中的代码视图，看着HTML和CSS随着你的变化。

grapesjs.com/demo.html免费

在iframe中加载第三方演示。点击之前不会请求任何内容。

工作流程

从拖放到生产 HTML

  1. 1
    01

    选择一个区块

    用户从你定义的调色板中选择。块是一个有名字、可重复使用的起点——一个英雄、一个定价表、一个表单——而不是任意的空 div。

  2. 2
    02

    把它拖进画布里

    编辑器会确定块可以合法落在哪里，插入组件并选择它。放置规则由你根据组件类型自行设置。

  3. 3
    03

    编辑内容和风格

    文本在原地编辑;布局、间距、排版和颜色来自 Style Manager。每一次更改都成为编辑器跟踪的 CSS 规则。

  4. 4
    04

    保存项目

    Storage Manager 会把编辑器状态发送到你指向的端点。这是继续编辑所需的状态，而不是完成页面。

  5. 5
    05

    导出或发布 HTML + CSS

    调用 getHtml() 和 getCss()，然后按你的产品需要处理：做安全过滤、套进你自己的布局、保存版本、写缓存、部署上线。

编辑表面

用户可以编辑什么？

完全取决于你允许的程度。这些内容都是编辑器可以公开的——而且你可以按组件类型锁定，这样营销人员就不会破坏工程师设计的布局。

内容

文本、标题、链接以及你标记为可编辑的内容。你想保留的组件可以直接保持不可编辑。

布局

通过Style Manager的Dimension和Flex控制，可以确定截面、列、容器之间的间距。

排版

字体族、大小、粗细、行高和对齐，以普通 CSS 声明的形式书写出来。

颜色

文本、背景、边框以及其他视觉属性。在输出的样式表里，颜色值会被序列化成 rgb()。

图像与媒体

通过Asset Manager处理，你可以指向自己的上传端点或存储提供商。

响应式样式

规则以设备为作用域。在断点激活时进行样式处理会发出匹配的媒体查询，而不是覆盖基础规则。

组成部分

由你定义的结构化、可重复使用的元素——一个区块一旦放置后变成的单位，以及你的应用以后能识别的对象。

属性与特征

特征会变成设置面板中的字段，所以自定义组件只能暴露标题和链接目标，别的什么都不行。

其中一些是配置而非默认配置。GrapesJS 出厂时带有通用、弹性、维度、排版、装饰和额外扇区;资产上传、富文本行为和每个组件权限是你自己布线或安装插件的。

输出

你控制HTML和CSS

可视化编辑器只有在结果能够融入你的应用时才有用。GrapesJS 区分了两点，这种区别比任何功能列表都重要：它需要的状态以持续编辑，以及用户实际获得的标记。

从画布到线上页面

  1. 可视化编辑器
  2. 项目状态
  3. HTML + CSS
  4. 你的后台
  5. 你的发布
publish.jsJS
// What the editor needs to keep editing — components, styles,
// pages, assets and symbols. Store this to resume a session.
const projectState = editor.getProjectData();

// What your users actually receive. Two plain strings.
const html = editor.getHtml();  // <body>…</body>
const css = editor.getCss();    // one line of CSS

// From here it is your application's decision: sanitize it, wrap it
// in your own layout, version it, cache it, put it behind your CDN.
await fetch(`/api/pages/${pageId}/publish`, {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ html, css }),
});
  • getProjectData() 返回可编辑状态——页面、样式、资产、符号和数据源。存储它以恢复会话；它不是你向访客提供的内容。
  • getHtml() 和 getCss() 返回字符串。在已发布页面上无需安装运行时，循环中也没有渲染服务。
  • 安全过滤、模板套用、版本管理、缓存和部署都留在你这一侧。这是边界，不是缺口——正是它让输出能装进你已有的产品里。

关于预期的说明：输出的样式表是忠实的，不是手工调优过的。简写属性会被展开成一条条独立属性，颜色写成 rgb()，并且除非你关掉它，样式表前面还会加上一小段重置样式。把这份输出当作一个可靠的、需要你再做一道后处理的来源，就像对待任何构建步骤的产物一样。

构建与从核心开始

为什么要从零开始构建一个HTML编辑器？

每个可视化HTML编辑器都需要同样的子系统，才能做出有趣的工作。问题不是你是否需要它们——而是写这些子系统是否值得你团队接下来六个月投入。

HTML 编辑器在编辑任何内容之前需要了解

  • 可编辑画布
  • 拖放
  • 组件模型
  • 选择
  • 块形调色板
  • 样式控制
  • 断点
  • 资产库
  • 撤销/重做
  • 序列化
  • 存储
  • HTML 输出
  • CSS 输出
  • 插件 API
自己组装吧

你拥有全部十四个

而且是永久拥有：那个既要像浏览器一样渲染、又要始终可编辑的画布，放置目标的判定逻辑，要能挺过其他所有操作的撤销栈，把内存里的组件树重新变回标记的序列化器——外加产品存续期间针对它们的每一条缺陷报告。

从GrapesJS开始

你得从那些已经有效的地方开始

画布、拖放、组件模型、Block Manager、Style Manager、Device Manager、Asset Manager、撤销历史、Storage Manager以及HTML/CSS输出API都包含在核心中。你写的内容是针对你产品特有的部分。

这并不是说GrapesJS就是你的全部产品。存储、认证、权限、发布、安全过滤以及所有产品特定的工作流程都归你负责——请参见下方架构图，了解界限的具体位置。

看看界限在哪里
子系统逐系统

你写的东西，以及已经存在的东西

右侧列并不是承诺某个子系统已经为你的用例完成——它指的是你扩展的GrapesJS部分，而不是你原本会从空白文件开始的部分。

编辑器子系统自己构建从GrapesJS开始
画布建造编辑器基础
拖放建造编辑器基础
组件模型建造DomComponents
方块建造Block Manager
样式控制建造Style Manager
响应式剪辑建造Device Manager
资产建造Asset Manager
撤销/重做建造命令与历史记录
存储建造Storage Manager
HTML 输出建造editor.getHtml()
CSS 输出建造editor.getCss()
自定义组件建造DomComponents.addType
插件架构建造现有插件API
授权与权限建造你的申请
内容净化建造你的申请
发布建造你的申请

最后三行是诚实的。嵌入编辑并不意味着你对谁可以编辑什么、哪些内容被存储、哪些内容能被公众看到的责任。

建筑

HTML拖放构建器如何融入你的应用

编辑器是你产品的一层——不是产品本身。你的应用保留用户、权限、数据以及对哪些内容上线的决定权。

你的申请

你拥有这片表面

  • 用户
  • 授权与权限
  • 布线
  • 账单
  • 导航

嵌入层

GrapesJS 可视化编辑器

用插件扩展它
  • 画布
  • 方块
  • 组成部分
  • 风格
  • 资产
  • 设备

  • 持久性

    你的API

    • Storage Manager
    • 自动保存
    • 版本

  • 数据

    你的数据库

    • 项目
    • 页面
    • 资产

  • 交付

    你的发布

    • 预览
    • 批准
    • 实时 HTML
GrapesJS 提供了可视化的 HTML 编辑层。其上和下的所有内容——谁在编辑、存储了什么、发布了什么——都保留在你已有的应用中。
引擎盖下

编辑背后的基石

五位经理承担大部分工作。你将在开始工作一小时内见到他们，因此了解每个经理的职责是值得的。

组成部分

HTML元素以可编辑组件表示，包含内容、是否可拖拽以及暴露哪些属性，有自己的规则。

Block Manager

调色板。方块是用户拖动的;每个方块都命名它成为的组件。核心会附带一个空调色板，所以显示什么完全由你决定。

Style Manager

Visual CSS 属性控件，默认分为扇区——通用、灵活、维度、排版、装饰和额外。扇区和属性是可配置的。

Storage Manager

将项目状态持久化到本地存储、远程终端或你自己编写的存储适配器。自动保存是一个配置标志。

Asset Manager

图片和媒体：用户看到的选择器及其后方的上传路径，你可以指向自己的端点或提供者插件。

阅读GrapesJS文档
自定义组件

创建您自己的HTML组件

这时，HTML构建器就不再是通用的了。定义一个组件类型，决定它渲染什么，只展示用户应控制的属性——其余的标记保持工程师写的原样。

hero-block.jsJS
// A block is what the user drags out of the panel.
editor.BlockManager.add('hero', {
  label: 'Hero',
  category: 'Sections',
  content: { type: 'hero' },
});

// A component type is what that block becomes on the canvas — and the
// only place you decide what the user may change about it.
editor.DomComponents.addType('hero', {
  model: {
    defaults: {
      tagName: 'section',
      attributes: { class: 'hero' },
      components: '<h1 class="hero__title">Build faster</h1>',
      // Traits become the fields in the settings panel.
      traits: [{ type: 'text', name: 'headline', label: 'Headline' }],
      droppable: false,
    },
  },
});
阅读组件API
分→分量→输出

块不是组件

在大多数教程中，有四个东西是同名的，而且它们确实不同。把它们分开，就是你能维护的构建器和一堆HTML字符串的区别。

  1. 区块
  2. 组成部分
  3. 特征
  4. 加价
  5. 你的申请

区块

用户拖拽的内容

面板里的一个条目：一个标签、一个分类，以及它插入的内容。它纯粹是一个起点——放置完成之后它就不再存在了。

组成部分

它将成为什么

DomComponents 注册的类型。它决定标签、默认子节点、该项目是否可放置，以及编辑器之后如何处理它。

特征

用户可能的变化

设置面板中的字段。特征是本应封闭组件中的一个故意漏洞——标题、链接目标、计划ID。

加价

结果

组件序列化回HTML，包含你定义的类和属性，准备好后端下一步做什么。

有意设计这条链条，非技术用户在你选择的边界内获得真正的自由。跳过它，你就发布了一个能输出 div 的文本编辑器。

方块

从现成的HTML块开始

这些是几乎每个构建者在第一天就需要的剖面类型，通过它们发出的标记来描述，而不是外观。可以用 Block Manager API 构建它们，或者安装一个块插件，从完整的调色板开始。

  • 英雄

    一个带有标题、辅助段落和一个按钮样式的链接的部分。

  • 头部

    一个带有标志元素的标题和一个窄宽度的导航列表。

  • 特色

    一个装有重复卡片的容器，每张卡片都有图标槽、标题和正文。

  • 定价

    计划卡包含价格元素、功能列表和行动号召链接。

  • 推荐

    用引用元素加上引用和可选的头像图片。

  • 画廊

    一个图像网格，其光源由Asset Manager填充。

  • CTA

    一个中心区段，只有一个航向和一个主连接。

  • 形式

    一个带有标签输入和动作的表单元素，你可以指向任何你想要的位置。

  • 页脚

    链接栏、法律文本和辅助导航，并用页脚元素。

浏览块插件

值得精确说明的是：这些是块类型的示例，而不是GrapesJS内置的列表。核心是故意从空的Block Manager开始——用户获得哪个调色板取决于你自己，要么写代码块，要么安装本页后面的某个模块插件。

使用场景

你能建造什么？

同一个编辑核心，针对六个不同的问题。每个问题都需要HTML级别的控制，原因各不相同。

HTML页面编辑器

为用户提供一个可视化的方式来编辑已经存在的HTML页面。由于编辑器会进行往返标记，你是在扩展当前页面，而不是迁移到别人的专有格式。

所见即所得页面构建器

着陆页构建器

让营销人员从团队设计的模块中组装活动页面，同时保留设计系统期望的类别和结构，输出中依然完整。

着陆页构建器

SaaS页面构建器

将可视化编辑嵌入为产品功能。客户在你的应用内、域名内构建页面，存储在数据库中。

SaaS页面构建器

CMS 可视化编辑器

在内容平台中添加一个视觉图层，但不替换它。编辑器生成的HTML，而CMS已经知道如何存储和渲染。

无头CMS编辑器

电子邮件生成器

电子邮件HTML本身就是一门学科——表格、内联样式、客户端特性。GrapesJS通过MJML和通讯预设来处理，而不是网页路径。

React 邮件构建器

可嵌入编辑器

将编辑器部署在现有的仪表盘中，置于你自己的认证和导航之后，不重定向到第三方网站。

可嵌入页面构建器
受众

谁会使用HTML可视化编辑器？

不同团队因为不同的理由来到这里，但要求是一样的：要可视化编辑，又不想因此失去对标记的控制权。

开发者

在已有应用中添加视觉编辑功能，无需采用平台或围绕他人运行时重写前端。

SaaS团队

将页面创建变成客户付费的功能，编辑器存在于你的域名上，数据则保留在你的数据库中。

CMS团队

给内容团队视觉编辑，但不替换下面的CMS，因为输出出来的其实是系统已经处理的HTML。

代理机构

用自己的模块和组件构建一个页面编辑系统，然后在客户项目间重复使用，而不是每次项目都重建。

营销平台

让用户以可视化方式撰写着陆页，同时你的平台保持模板、追踪和发布流程的一致性。

嵌入

将HTML构建器嵌入你的产品中

你不必让用户去其他网站编辑页面。将编辑器安装在你自己的应用中，保留现有的认证、导航和后端。

编辑的位置

  1. 你的应用
  2. 认证
  3. HTML编辑器
  4. 你的API
  5. 数据库

实际上，这是你应用中的一条路由，渲染一个容器并初始化编辑器。用户永远不会离开你的域，会话是他们已有的，项目通过你编写的端点加载和保存。

请参阅可嵌入页面构建器指南
存储

将HTML构建器项目保存到您自己的后端

将Storage Manager指向你的API，每个页面都会成为数据库中的一行，置于你自己的认证之后。GrapesJS不托管任何东西，GJS.Market也不会——用户内容永远不会送到我们那里。

两样东西要存放，不是一样

  1. 编辑状态
  2. 你的存储API
  3. 你的数据库
  4. HTML + CSS
  5. 实时页面
editor-storage.jsJS
const editor = grapesjs.init({
  container: '#editor',

  // Editor state goes to your API, behind your own authentication.
  storageManager: {
    type: 'remote',
    autosave: true,
    options: {
      remote: {
        urlStore: `/api/pages/${pageId}`,
        urlLoad: `/api/pages/${pageId}`,
        fetchOptions: { credentials: 'include' },
      },
    },
  },
});

保持区分清晰。编辑器状态是编辑者重新打开页面以便进一步编辑所需的状态。发布的输出是访客收到的HTML和CSS。它们有不同的生命周期、不同的访问规则，通常还有不同的表格——插件可以帮忙处理布线，但架构完全由你决定。

发布

你决定HTML如何发布

  1. 1
    01

    编辑

    用户在画布上工作。目前还没有公开内容;编辑器只触碰项目状态。

  2. 2
    02

    保存草稿

    自动保存或显式保存会通过你的存储端点，按照你的权限规则写入状态。

  3. 3
    03

    预览

    在预览路径上渲染当前的HTML和CSS，让作者看到的是真实页面，而不是画布。

  4. 4
    04

    批准

    如果你的产品需要审核，这就是你的工作流程——编辑对谁签字没有意见。

  5. 5
    05

    发布

    取出 getHtml() 和 getCss() 的结果，做安全过滤，套进你自己的布局，为结果保存版本，然后写到你真正对外提供页面的地方。

  6. 6
    06

    实时 HTML

    发布页面在你的基础设施上是纯HTML和CSS。访客查看不需要编辑运行时间。

这是与托管页面构建器最明显的区别。没有供应商决定你的页面何时上线、服务于哪个域名，或者如果你停止付费会怎样。

响应式

可视化构建响应式HTML

Device Manager 在宽度之间切换画布，设备激活时设置的样式会以该宽度为范围的媒体查询，而不会覆盖基础规则。GrapesJS 包含桌面、平板、移动横向和移动竖屏;列表及其宽度是配置，而非固定集。

桌面默认
平板770像素
移动肖像320像素

用户在每个断点可以更改的内容

  • 间距
  • 排版
  • 布局
  • 能见度
  • 对齐
  • 背景

显示的宽度是 GrapesJS 默认设置。值得直说的是：编辑器定义了 CSS 规则——发布页面最终如何渲染仍然取决于你发布的标记和样式表以及浏览器读取它们。

生态系统

用插件扩展你的HTML构建器

以下内容都是GJS.Market上的真实列表，目录中实时显示了名称、价格和缩略图。按照本页对问题的思考方式进行分组：先代码和输出，然后是周围的面板。

代码与HTML编辑

让用户——或你的开发者——在不离开编辑器的情况下阅读和编辑组件背后的标记和样式。

浏览此类别
Grapesjs Component Code Editor代码视图

Grapesjs Component Code Editor

打开所选组件的HTML和CSS进行直接编辑——这是让视觉与代码关系对持怀疑态度的开发者显而易见的方式。

免费查看插件
Code Editor代码编辑

Code Editor

构建器内的代码编辑表面，供想在某一部分使用标记、其他部分保持视觉化的用户使用。

免费查看插件

导出与发布

把HTML和CSS导出来：作为可下载的捆绑包，转换到服务器端，或者直接推送到主机。

浏览此类别
Export Zip出口

Export Zip

将项目的 HTML、CSS 和资源打包成可下载的归档，以便交接静态网站。

免费查看插件
GrapesJS NodeJS JSON Converter to HTML/CSS服务器端输出

GrapesJS NodeJS JSON Converter to HTML/CSS

将存储的项目 JSON 转换为服务器上的 HTML 和 CSS，因此发布无需浏览器会话。

免费查看插件
Grapesjs Netlify部署

Grapesjs Netlify

对于需要一键发布的产品，它会直接从编辑器推送生成的输出到主机。

免费查看插件

HTML 块

现成的调色板，这样空的Block Manager就能被各个部分填满，而不是空白面板。

浏览此类别
Plugin Basic Blocks基础调色板

Plugin Basic Blocks

一个常见结构块的起始调色板，这样第一天就不用花时间写Block Manager调用。

免费查看插件
Plugin Blocky for Tailwind CSSTailwind 模块

Plugin Blocky for Tailwind CSS

这些模块会输出Tailwind实用类，适用于输出必须匹配现有Tailwind设计系统的团队。

¥424.80查看插件

样式控制

更好的 CSS 编辑体验：输入时提示已有的类名，以及更完善的颜色和渐变选择器。

浏览此类别
Ui Suggest Classes职业建议

Ui Suggest Classes

在输入 Selector Manager 时建议现有的 CSS 类，这样生成的标记始终保持一致，而不是显得冗长。

免费查看插件
Grapesjs Style Gpickr梯度选择器

Grapesjs Style Gpickr

Style Manager 的渐变选择器，覆盖默认色彩控制不覆盖的情况。

免费查看插件

自定义组件

可重复使用、同步的元素和工具，将自己的标记转化为编辑器组件。

浏览此类别
Symbols可重复使用组件

Symbols

可复用且保持同步的组件实例，也就是说，编辑过的头部在出现的地方都会更新。

免费查看插件

富文本

扩展内联文本编辑器，让内容编辑感觉像文档而不是代码字段。

浏览此类别
Grapesjs RTE Extensions富文本

Grapesjs RTE Extensions

扩展了内置的富文本编辑器，并实现了大多数内容团队期望的格式控制。

免费查看插件

资产与媒体

把Asset Manager连接到真实存储，这样图像就有地方可以存放。

浏览此类别
Grapesjs Cloudinary媒体存储

Grapesjs Cloudinary

把Asset Manager接到Cloudinary，这样上传和转换就在服务器外部处理。

免费查看插件

存储

为那些宁愿配置后端而不是编写后端的团队提供的持久化适配器。

浏览此类别
Grapesjs Firebase Storage远程存储

Grapesjs Firebase Storage

一个现成的远程存储适配器，适用于Firebase上的原型和产品。

免费查看插件
IndexedDB Storage本地存储

IndexedDB Storage

它能将项目状态保持在浏览器中——对于离线草稿和没有后端演示非常有用。

免费查看插件

模板与预设

预配置的设置和模板管理，方便从一个正常运行的编辑器开始，而不是从空编辑器开始。

浏览此类别
Webpage Preset网页预设

Webpage Preset

一个配置好的网页编辑设置，更接近一个可用的构建器，而不是纯的初始化调用。

免费查看插件
Templates Manager模板

Templates Manager

适用于用户从选定布局而非空白画布开始的产品模板管理。

¥280.80查看插件

电子邮件

电子邮件HTML有自己的规则。MJML路径正是为了这个原因而存在。

浏览此类别
MJML Preset电子邮件预设

MJML Preset

MJML的邮件路径，输出必须通过Outlook而非现代浏览器保存。

免费查看插件
浏览HTML构建插件
书库

构建你的HTML构建器栈

三种起始配置，仅从实际存在的商品中组装而成。把它们当作需要适应的形状，而不是购买的捆绑包。

价格会实时从目录中显示。

方法

HTML 拖放构建器与其他方法

这不是四个产品争夺同一任务——而是四个不同的行业。表格的目的是明确交易，而不是宣布赢家。

考量GrapesJS拖放库托管页面构建器从零开始构建
包含可视化编辑器是的部分——仅手势是的无论你建造什么
对HTML和CSS的控制高——输出由你自己处理高——你写了加价具体情况因供应商而异总计
自托管是的是的通常不会是的
可以嵌入到你的应用里是的是的这取决于供应商是的
组件模型与特征内置你写供应商模型你写
样式控制和断点内置你写内置你写
成为工作编辑的时间日子月份分钟从几个月到几年
产品定制高高受供应商限制无界
持续维护你的集成，加上一个上游核心所有编辑供应商所有的一切，永远
许可与费用BSD-3-Clause 核心，$0 用于通常比较宽容订阅工程时间

已对照 GrapesJS 核心（BSD-3-Clause，v0.23.6）于 2026-09-03 核实。托管建站工具那几行刻意写得笼统，因为各家厂商的能力差别很大而且经常变化——请去核实你正在考虑的那个具体产品，而不是相信一句类别层面的结论。

比较一下GrapesJS和其他替代品
常见错误

拖放库不是页面构建器

这是该领域最昂贵的判断失误。一个团队选择一个可排序列表的库，一周内发布演示版，然后花一年时间发现缺失了什么。

拖放式库带来的好处

所有东西都需要用来把一个盒子从一个地方移动到另一个地方，除此之外没有其他东西。确实有用——用来重新排序列表。

  • 可拖拽元素
  • 投放区
  • 运动
  • 分院

可视化HTML编辑器还要处理的事情

在所有这些手势中都存在的状态，以及一个能够将所有标记重新映射回浏览器渲染的序列化器。

  • 组件状态
  • 选择
  • 造型
  • 方块
  • 资产
  • 响应式控制
  • 撤销/重做
  • 存储
  • 序列化
  • 出口
  • 插件架构

拖放是一种操作。页面构建器是一个完整的编辑系统。

快速入门

启动你的HTML拖放构建器

一个包，一个容器，一个初始调用。本页的所有内容都是从这几行开始的。

npm install grapesjs
editor.jsJS
import grapesjs from 'grapesjs';
import 'grapesjs/dist/css/grapes.min.css';

// Mount the editor on any container in your own application.
const editor = grapesjs.init({
  container: '#editor',
  height: '100vh',
  // Core ships no blocks: you decide what users are allowed to drag.
  blockManager: { blocks: [] },
});

编辑器现在运行，但调色板是空的——核心故意不交付任何块。注册第一个块，以及它变成的组件类型：

hero-block.jsJS
// A block is what the user drags out of the panel.
editor.BlockManager.add('hero', {
  label: 'Hero',
  category: 'Sections',
  content: { type: 'hero' },
});

// A component type is what that block becomes on the canvas — and the
// only place you decide what the user may change about it.
editor.DomComponents.addType('hero', {
  model: {
    defaults: {
      tagName: 'section',
      attributes: { class: 'hero' },
      components: '<h1 class="hero__title">Build faster</h1>',
      // Traits become the fields in the settings panel.
      traits: [{ type: 'text', name: 'headline', label: 'Headline' }],
      droppable: false,
    },
  },
});
  1. 安装 grapesjs
  2. 把它装在容器上
  3. 注册你的块和组件类型
  4. 配置Style Manager
  5. 将Storage Manager指向你的API。
  6. 发布getHtml()和getCss()

再往后就是产品层面的工作了：你的用户能拿到哪些区块、允许他们改动什么，以及你的后端拿到输出的标记之后要做什么。

阅读GrapesJS指南 在GitHub上查看源代码 浏览开发者工具插件
相关指南

相关 GJS.Market 指南

本页涵盖HTML级别的编辑与输出。邻近的指南从其他角度取材于同一核心。

拖放页面构建器

关于构建拖放式页面构建器的更全面的指南：手势本身、被拖动的区块、模板，以及围绕它们的产品决策。

阅读指南

开源页面构建器

如何评估开源页面构建器——许可、治理、可扩展性以及自托管实际上意味着你承担什么。

比较各种选项

React 页面构建器

在React应用中构建页面构建器，其中React组件模型和HTML组件模型的分歧。

阅读指南

GrapesJS React 积分

官方的 React 包装器：将编辑器作为组件挂载，管理其生命周期，并避免其进入 React 的渲染循环。

详见积分
常见问题

HTML 拖放构建器问题

什么是HTML拖放构建器？

一个编辑器，允许用户通过将预定义的块拖到画布上，并通过控件而非代码进行调整，从而生成真实的 HTML 和 CSS。它将组件模型、画布、块调色板、样式控件、响应式编辑、资产处理、持久化和导出整合到一个系统中。

什么是HTML可视化编辑器？

编辑方面描述的也是一样的：一个工具，通过点击、拖动和调整属性来进行更改，而不是输入标记，屏幕上看到的内容对应即将发布的 HTML 和 CSS。

我能用GrapesJS构建一个HTML编辑器吗？

是的——这正是 GrapesJS 的用途。它提供画布、拖放、组件模型、Block Manager、Style Manager、Device Manager、Asset Manager、撤销历史、Storage Manager 以及 HTML/CSS 输出 API。你添加模块、组件类型、后端和发布工作流程。

GrapesJS 是 HTML 编辑器吗？

GrapesJS 是一个用于构建 HTML 编辑器的框架，而不是一个成品编辑产品。它默认附带一个没有调色板块的编辑核心，正因为用户获得哪个块是你自己的决定。

我可以拖拽HTML元素吗？

是的。画布上的元素是可以拖拽、嵌套和重新排序的组件，每种组件类型都可以声明可以放置的位置和包含的内容——所以工程师设计的布局不必被内容编辑器破坏。

我可以创建自定义HTML组件吗？

可以，用 editor.DomComponents.addType()。你定义标签名、默认属性和子元素，决定这个组件是否可放置、是否可拖拽，以及设置面板里出现哪些 traits。然后由一个块来引用这个类型，作为它插入的内容。

我可以用视觉方式编辑CSS吗？

是的。Style Manager 将 CSS 属性作为控件显示，默认分为通用、弹性、维度、排版、装饰和额外扇区。显示的扇区和属性可以配置，所以你可以缩小面板范围，只让用户触摸。

我可以导出HTML和CSS吗？

可以。editor.getHtml() 返回标记，editor.getCss() 返回样式表，两者都是纯字符串。有两个细节值得知道：getHtml() 序列化的是外层 wrapper，所以结果被包在一个 body 元素里；getCss() 会把简写声明展开成一条条独立属性，并把颜色统一写成 rgb()。

我可以把HTML构建器项目保存到我的数据库里吗？

是的。Storage Manager 可以设置为远程类型，加载和存储 URL 指向你自己的 API，包括你自己的取用选项和凭证，所以每个项目只是数据库中你现有认证后的一行。

我可以把编辑器连接到我的 API 吗？

是的，而且不止一个地方：用于项目状态的存储端点、Asset Manager的上传端点，以及你用导出的HTML和CSS调用的任何发布端点。这些都不会经过第三方路由。

我可以自托管一个HTML页面构建器吗？

是的。GrapesJS 是一个 npm 包，可以在你自己的应用内的浏览器中运行。路径中没有托管服务，没有许可证密钥检查，也不需要账户，所以编辑器可以在内部网络或防火墙后工作。

我可以在我的SaaS中嵌入HTML编辑器吗？

是的。把编辑器挂载在你自己应用路由内的容器上。用户保留你的身份验证和导航权限，他们构建的页面由你的后端存储，而非供应商。

我可以用GrapesJS搭建一个网站建设器吗？

是的。多页编辑、模板、资源和存储都由核心插件和可用插件覆盖。网站建设器与单页编辑器的主要区别在于你围绕编辑器构建的页面管理和发布层。

我能做一个登陆页面构建器吗？

是的，而且这是最常见的用途之一。定义设计系统允许的区块，展示有限的特征集，营销人员就能组装出仍然符合工程师期望的类别和结构的活动页面。

我能构建一个电子邮件构建器吗？

是的，但通过邮件路径，而不是网页路径。电子邮件HTML有自己的限制，所以GrapesJS用MJML和新闻通讯预设来覆盖，这些预设会输出基于表格的内联标记，而不是现代布局的CSS。

我可以和React一起使用吗？

是的。有一个官方的React包装器，作为@grapesjs/react发布，授权为MIT，它将编辑器作为组件挂载并管理其生命周期。编辑器核心本身不受框架限制，底层工作原理相同。

我可以和Next.js一起使用吗？

是的，但有一个前提：编辑器需要 DOM，所以不能通过服务器渲染。在客户端专用组件或禁用 SSR 的动态导入中加载，容器存在后初始化。

拖放库和页面构建器有什么区别？

拖放库提供一种交互功能——可拖拽元素、放置区、移动和排序。页面构建器还需管理组件状态、选择、样式、区块、资源、响应式规则、撤销历史、存储、序列化、导出以及插件架构。拖放是一种手势；页面构建器是一个完整的编辑系统。

GrapesJS 商业使用是免费的吗？

GrapesJS 核心在 BSD-3-Clause 许可证下发布，允许商业使用、修改和分发，但须遵守署名和非认可条件。官方 React 包装 @grapesjs/react 是 MIT。GJS.Market 上销售的插件和模板各自拥有各自的许可，详列于每个产品页面。发货前请自行阅读许可文本——这是摘要，非法律建议。
开始

构建你的HTML拖放构建器

从GrapesJS开始，为用户提供可视化的HTML编辑体验，并保持对应用、数据和发布工作流程的控制。

开始建造

安装编辑器

一个npm包和一个初始调用。你喝完咖啡前就有一个可用的画布。

试试GrapesJS
延伸

添加你不愿写的内容

块调色板、代码视图、样式控制、存储适配器和导出工具——真实的列表，真实的价格。

浏览GJS.Market插件
学习

阅读相关文档

组件、块、样式、存储和插件API，直接来自上游项目。

阅读建造指南

拖拽。放置。编辑 HTML。掌控输出。

更多关于用GrapesJS构建编辑器的信息：

拖放页面构建器开源页面构建器React 页面构建器GrapesJS React 积分SaaS页面构建器可嵌入页面构建器所见即所得页面构建器React 邮件构建器页面构建器的替代方案