1
TypeScript 支持
GrapesJS v1.x 自带完整的 TypeScript 类型定义——这对 Angular 项目至关重要。
22k+
GitHub 星
麻省理工学院
开源
v1.x 版本
TypeScript 准备版
45分钟
平均角度配置
Angular开发者在拖拽构建中所需的东西
2
生命周期兼容性
在ngAfterViewInit中初始化，在ngOnDestroy中摧毁。GrapesJS 自然地融入了 Angular 生命周期的钩子。
3
Zone.js积分
使用 NgZone.runOutsideAngular（） 初始化 GrapesJS，避免不必要的变更检测周期。
4
进攻的重击合辑
GrapesJS 是一个原版 JS 库，没有 Angular 专用的装饰器——它在 Angular AOT 模式下编译得很干净。
GrapesJS — 最佳的 Angular 兼容构建框架
与 React 原生构建器（Puck、Craft.js）不同，GrapesJS 是一个原生的 JavaScript 库，可以集成到任何框架。Angular 开发者使用 Angular 服务模式来管理编辑器生命周期，将其注入组件，并在销毁时进行清理。
GrapesJS 已被应用于企业级 Angular 应用，如 CMS、表单构建器、报表设计器以及白标 SaaS 产品。查看完整内容 GrapesJS Angular 积分指南 提供完整的服务包装模式和TypeScript示例。
集成指南——4个步骤
1
安装GrapesJS
NPM 安装在你的 Angular 项目中运行 npm 安装 grapesjs。将CSS导入angular.json样式数组。
2
创建一个 GrapesJS 服务
@Injectable使用@Injectable服务管理编辑器实例，保持其不在NgZone的Angular变更检测之外。
3
在ngAfterViewInit中初始化
事后回顾用@ViewChild获取容器元素的引用。视图完全渲染后初始化编辑器。
4
在ngOnDestroy中摧毁
毁灭调用 ngOnDestroy 中的 editor.destroy（），清理编辑器并防止组件移除时的内存泄漏。
Angular兼容插件
TypeScript免费
GrapesJS 类型脚本类型
Angular集成的完整TypeScript定义——无需单独的 @types 包。
方块免费
块库Pro
企业级Angular应用预建拖放块。
存储免费
存储管理器专业版
将编辑器内容持久化到REST API、数据库或本地存储。
用户界面免费
自定义命令插件
用 Angular 管理的命令和工具栏操作扩展编辑器。
企业用例
🏢
企业级CMS
将GrapesJS嵌入为内容管理系统中的可视化编辑层，采用Angular管理的认证和路由。
📋
形态构建器
拖放表单设计器集成到Angular管理面板中，支持反应式表单验证和提交逻辑。
📊
报表设计器
用于自定义报告的可视化布局工具——由GrapesJS块构建，代表图表、表格和品牌文本部分。
🚀
电子邮件模板构建器
HTML邮件编辑器，带有响应式预览功能，由GrapesJS预设通讯驱动，安装在Angular应用内。
🏷️
着陆页构建器
面向内容团队的无代码营销页面构建器，嵌入在带有基于角色权限的 Angular SaaS 平台中。
✉️
白标SaaS
多租户页面编辑器，具备按客户主题设置、资产命名空间和Angular Universal发布工作流程。
已知问题与解决方法
变更检测——在NgZone中包裹事件
GrapesJS会触发所有Angular区域外的事件。将编辑器事件回调包裹在 NgZone.run（（） => { ... }） 中，以正确触发你更新的 Angular 状态的变更检测。
SSR — 使用isPlatformBrowser进行守卫初始化
GrapesJS 需要浏览器 DOM 权限。使用 Angular Universal 时，应使用 isPlatformBrowser（platformId） 进行初始化保护，以防止服务器端渲染错误。
DOM 定时——使用 ngAfterViewInit，而非 ngOnInit
始终在ngAfterViewInit中初始化GrapesJS。在ngOnInit，@ViewChild容器引用尚未可用，且将是未定义的。
常见问题解答
相关指南
开始构建你的Angular可视化编辑器吧
浏览与 GJS 兼容 Angular 的 GrapesJS 插件。市场。用量产组件更快发货。
开始使用 GrapesJS for Angular →