Angular 页面构建器 GrapesJS

库存编辑器：画布、块、图层树、样式管理器和设备切换器。这是你在添加自己块之前的基础。

构建页面构建器远不止几个Angular组件。一个生产准备的可视化编辑器需要这些元素，才能发布带有它的页面：

• 拖拽
• 画布
• 组成部分
• 区块
• 层次
• 样式
• 响应式剪辑
• 资产管理
• 模板
• 项目存储
• 出口
• 出版

GrapesJS 为大部分列表中的可视化编辑提供了基础，因此你的 Angular 应用可以将预算花在产品和业务逻辑上。后两者——项目存储地点和页面如何上线——仍留给你，因为它们必须与基础设施匹配。

GrapesJS 核心在 BSD-3-Clause 许可证（版本 0.23.6）下开源，且在任何规模下均无许可费。

编辑器是你应用内的一个路径，不是它的替代品。编辑层以上的所有内容都保持Angular团队原本放置的位置。

1. 01

   Angular 应用

   让你的产品拥有的所有元素，保持不变。

   • 认证
   • 用户
   • 账单
   • 布线
   • 业务逻辑
   ↓
2. 02

   可视化页面构建器

   一个懒惰加载的路由，一个拥有容器的组件，以及一个拥有编辑器实例的服务。

   • 编辑路线
   • 编辑器组件
   • 编辑服务
   ↓
3. 03

   GrapesJS

   可视化编辑引擎，运行在组件提供的容器内。

   • 画布
   • 组成部分
   • 区块
   • 层次
   • 样式
   • 资产
   • 指挥
   ↓
4. 04

   你的后台

   项目数据、上传和发布成果真正存在的地方。

   • 你的API
   • 你的数据库
   • 文件存储

Angular 拥有你的应用程序。GrapesJS 驱动视觉编辑层。

编辑器没有提供任何顶层或底层的内容。正是这个界限让集成变得足够浅，之后可以移除——编辑器永远不会成为你产品的核心。

通用的网站建设工具很少是大家想要的产品。编辑器的每一层都可以替换成符合你应用的版本。

// Your content model, not a generic website element.
editor.Components.addType('pricing-table', {
  isComponent: (el) => el.dataset?.gjsType === 'pricing-table',
  model: {
    defaults: {
      tagName: 'section',
      droppable: false,
      traits: ['plan', 'currency', 'billingPeriod'],
    },
  },
});

editor.Blocks.add('pricing-table', {
  label: 'Pricing',
  category: 'Your design system',
  content: { type: 'pricing-table' },
});

人们用的编辑和放弃的编辑之间的区别，通常取决于第一天调色板里的内容。

GrapesJS 将项目序列化到 JSON，然后交给存储适配器。适配器的功能完全由你决定。

editor.Storage.add('angular-backend', {
  async load() {
    return firstValueFrom(this.http.get(`/api/pages/${this.pageId}`));
  },
  async store(data) {
    return firstValueFrom(this.http.put(`/api/pages/${this.pageId}`, data));
  },
});

grapesjs.init({
  container,
  storageManager: { type: 'angular-backend', autosave: true, stepsBeforeSave: 5 },
});

• 项目数据

  组件、样式、页面和资源序列化为JSON文档，你可以存储在任何列或集合中。

• 自动保存

  存储管理器可以在可配置的更改次数后保存，而不仅仅是在显式操作时保存。

• 远程存储

  注册一个自定义适配器，并通过Angular的HttpClient路由加载和存储，使用你自己的拦截器和认证头部。

• 版本管理

  因为每个存档都是文档，保存历史是后台的决定——编辑不需要知道这件事发生过。

• HTML/CSS 输出

  当交付路径需要静态输出而非重新渲染时，将渲染标记与项目JSON一起导出。

• 出版

  已发布页面是一个独立的记录，拥有自己的生命周期。将其与编辑写作的草稿分开。

你可以控制项目数据的存储位置。

创作和发布是不同的问题，有不同的失败模式。编辑器解决了第一个问题;第二个问题则留在你的基础设施中，缓存、权限和回滚都已经存在。

已发表成果可以去的地方

• CMS

  把输出写回你组织已经运行的内容系统。

• REST API

  把项目或渲染的标记发布到拥有验证和权限的端点。

• 静态出版

  在发布时将页面渲染成文件，这样活页就不会承载编辑器的运行时间。

• 自定义后端

  通过应用程序已经用来提供页面的路径存储、转换和提供输出。

• CDN

  把已发布的资产和标记推到边缘，缓存失效由你控制。

• 自定义部署

  从发布操作触发你现有的构建或部署流水线。

GrapesJS 负责创作。你的基础设施可以处理发布。

只需部署一个Angular应用，一个编辑器，以及为每个客户单独的页面世界。

编辑器没有任何东西必须看起来像编辑器。用户触摸的每个表面都可以配置、替换或移除。

• 你的标志代替了编辑的镀铬装饰
• 是你的颜色标记，不是第三方主题
• 自定义面板，或者你自己的 Angular UI 通过命令驱动编辑器
• 只有你的产品支持的模块
• 这些模板来自你的设计系统
• 你的词汇——部分、模块、布局，用户已经说的那些
• 这些角色决定了谁可以编辑、谁可以发表、谁只能发表评论
• 服务器强制执行的权限，反映在UI中

把可视化编辑器变成你Angular产品的原生部分。

简短版，分为四个步骤。完整指南——生命周期细节、封装器、无区域变更检测、生产问题——独立于一页，且内容远不止于此。

1. 1

   安装

   把编辑器添加到你的应用里。它是一个普通的npm包，没有Angular特定的构建步骤。

2. 2

   创建编辑服务

   将编辑器实例放在可注入服务中，这样组件保持精简，且实例便于共享、模拟和拆解。

3. 3

   在 ngAfterViewInit 中初始化

   容器元素必须在编辑器创建前就已在 DOM 中，因为 GrapesJS 会立即测量它。

4. 4

   在ngOnDestroy中正确摧毁

   当路由离开时调用 destroy。没有它，编辑器会保留其 DOM 监听器，下一次导航时会泄漏实例。

import { Injectable, NgZone, inject } from '@angular/core';
import grapesjs, { type Editor } from 'grapesjs';

@Injectable({ providedIn: 'root' })
export class PageBuilderService {
  private readonly zone = inject(NgZone);
  private editor?: Editor;

  create(container: HTMLElement): Editor {
    // GrapesJS binds its own DOM listeners to the canvas. Creating it outside
    // Angular keeps every drag frame from scheduling change detection.
    this.editor = this.zone.runOutsideAngular(() =>
      grapesjs.init({
        container,
        height: '100%',
        fromElement: false,
        storageManager: false,
      })
    );

    return this.editor;
  }

  destroy(): void {
    this.editor?.destroy();
    this.editor = undefined;
  }
}

import {
  AfterViewInit,
  Component,
  ElementRef,
  OnDestroy,
  inject,
  viewChild,
} from '@angular/core';
import { PageBuilderService } from './page-builder.service';

@Component({
  selector: 'app-page-builder',
  standalone: true,
  template: '<div #canvas class="builder"></div>',
  styles: '.builder { height: 100vh; }',
})
export class PageBuilderComponent implements AfterViewInit, OnDestroy {
  private readonly builder = inject(PageBuilderService);
  private readonly canvas = viewChild.required<ElementRef<HTMLElement>>('canvas');

  ngAfterViewInit(): void {
    // The container has to be in the DOM first: GrapesJS measures it on init.
    this.builder.create(this.canvas().nativeElement);
  }

  ngOnDestroy(): void {
    // Without this the editor keeps its listeners after the route changes.
    this.builder.destroy();
  }
}

GrapesJS 会发出自己的事件，而这些事件并非来自 Angular。协调两者只需几行，但跳过它就会产生每个集成最先出现的两个 bug。

editor.on('storage:end:store', () => {
  // Editor events fire outside Angular because the editor was created there.
  // Re-enter the zone before touching state the template renders.
  this.zone.run(() => this.lastSavedAt.set(new Date()));
});

在runOutsideAngular内创建编辑器，这样画布交互不会在每一帧都调度变更检测，然后在少数几个实际更新模板渲染状态的事件处理程序中重新进入区域。在无区域应用中，同一批处理程序会更新信号，外部封装器就不再需要了。

GrapesJS 需要一个浏览器 DOM。在 Angular SSR 或 Angular 通用中，编辑器只在浏览器中创建——绕过它的路由仍会正常在服务器上渲染。

import { PLATFORM_ID, inject } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';

export class PageBuilderComponent implements AfterViewInit {
  private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));

  ngAfterViewInit(): void {
    // There is no DOM on the server and GrapesJS needs one, so the editor is
    // created in the browser only. The rest of the route still renders on the
    // server as usual.
    if (!this.isBrowser) return;
    this.builder.create(this.canvas().nativeElement);
  }
}

集成是普通的Angular代码，这是值得一提的重点。

• TypeScript友好型

  编辑器自带类型定义，因此实例、配置和事件在调用站点被类型化。

• Angular 生命周期

  创建和拆解依赖于 ngAfterViewInit 和 ngOnDestroy——无需在组件树外手动启动。

• 兼容AOT

  集成中没有任何内容依赖于运行时模板编译，因此编辑器路由的构建方式就像其他懒散加载的路径一样。

• 仅浏览器初始化

  在使用 SSR 时，只有编辑器创建部分被浏览器保护;其余组件正常编译和渲染。

引擎为你提供了编辑界面。在特定产品之上——块色板、模板系统、富文本、持久化、生产退出路径——这些都是 GJS.Market 插件发挥作用的地方。下面的每个列表都是真实产品，价格如图所示。

区块

问题是：新编辑器的调色板是空的，没人会用裸 <div> 构建页面。

浏览此类别

区块

Plugin Basic Blocks

起始调色板：列、文字、图片、链接和视频，这样画布第一天就能使用。

免费查看插件

区块

Grapesjs Tailwind

基于Tailwind的模块，用户构建的页面与你已有的实用设计系统相匹配。

免费查看插件

区块

GrapesJS Bootstrap v5 Blocks

Bootstrap 5 格网和组件块，适用于设计系统已是 Bootstrap 的团队。

免费查看插件

区块

Super Header for GrapesJS

一个头部编辑一次后在每页重复使用，而不是让副本分散开来。

¥280.80查看插件

模板与页面

问题：用户需要一个起点，而多页项目需要编辑器不附带的管理器。

浏览此类别

模板

Templates Manager

编辑器里有模板库，这样新页面就从完成的布局开始。

¥280.80查看插件

页面

Pages Manager

多页项目和页面列表，所以构建器处理的是网站而不是单一文档。

¥180.00查看插件

区块

Users Blocks

允许用户将自己的部分保存为可重复使用的模块——你的调色板在你不发任何东西的情况下自然增长。

¥424.80查看插件

项目

Grapesjs Project Manager

围绕编辑器进行项目浏览和管理，适合同时处理多个项目的团队。

免费查看插件

文本与表单

问题是：大家都默认富文本和工作表单是内置的。除了基础之外，都不是。

浏览此类别

表单

Plugin Forms

表单组件，包含输入、选择和验证 traits，准备提交给你的端点。

免费查看插件

RTE

GrapesJS Inline Text Editor — Compatible with CKEditor 5

为需要严肃文本编辑的团队，用CKEditor 5替代内置的富文本编辑器。

¥496.80查看插件

RTE

TinyMCE 8 Inline Text Editor

TinyMCE 6也是如此——对于传统CMS过来的人来说，这很熟悉。

¥496.80查看插件

RTE

Grapesjs RTE Extensions

默认富文本编辑器上有额外的格式控制，无需添加第三方依赖。

免费查看插件

存储与输出

问题是：那个从未持续存在的原型，就是那个从未发货的。

浏览此类别

存储

IndexedDB Storage

浏览器中的本地持久性：对草稿、离线编辑和预览环境非常有用。

免费查看插件

存储

Directus Storage

如果栈里已经有无头后端，那么把项目存储在Directus里。

免费查看插件

出口

Export Zip

下载页面为HTML、CSS及资源的ZIP——最简单的导出路径。

免费查看插件

出版

Grapesjs Netlify

对于输出为托管静态站点的产品，直接发布到 Netlify。

免费查看插件

两列的结尾都是能用的建筑。它们在你两年后还要维护多少不同。

GrapesJS 提供可视化编辑的基础。GJS.Market 插件允许你扩展构建器，增加更多功能，而无需内部构建所有功能。

应用用Angular，视觉编辑用GrapesJS。添加你自己的组件、模块、模板、存储和发布流程——需要时再用GJS.Market插件扩展构建器。