绝对是全网最详的 gg-editor 教材

1. 画布不显示 当你认为你做好了一切，但画布就是渲染不出来时，建议检查你的画布高度是否有被正确设置。

​ 此篇文章，不做分类，工作忙，暂仅做收录，后期再分类。 凡是用 withPropsAPI 包裹过得组件，组件 props 中都会有 propsAPI 属性，这是 ggeditor 暴露的 API。

抛砖引玉 ggeditor 中有这么三个功能：右键菜单、标签编辑、元素浮层，它们不是 ggeditor 的核心能力，而是插件，如图： 场景 我想做这么一个 DetailPanel（详情面板）扩展功能：

​ 相比 g6-editor，少了很多内置命令。 中文名称 英文名称 适用图类型（仅供参考） 撤销 undo All 重做 redo All 添加 add All 更新 update All 删除 r

​ 可以分为这么几类： 官方自定义动作事件 编辑器事件 通用事件 节点事件 边事件 画布事件 （以上链接均可点击，点击后将跳转至 ggeditor 的 github 仓库） 手册 官方自定义动作事件

GGEditor 的组件上下文这个概念，来自 gg-editor 的文档，但其实我感觉，这就是 react 的 ref，ref 包含了 GGEditor 组件下的所有属性和方法的对象，就像是一个实例。

​ 与 g6-editor 相比的话，在 ContextMenu 也同样少了许多功能，需要自己做更多在在不同选中状态下的差异显示隐藏控制。 如果业务需要的右键菜单功能比较复杂的话，可能需要像 Deta

​ 以下这一块，就是详情面板。 详见 github 中的示例代码。用过 g6-editor 同学可能知道，g6-editor 它不需要我们自己做在不同选中状态下，

​ 下面这个，就是元素面板，起码在 gg-editor 里它是这么叫的。​ gg-editor 暴露了 ItemPanel 和 Item，分别是元素面板、元素。 ​ 元素面板中，可以放 HTML，但需

​ gg-editor 中其实并不存在工具栏组件，但工具栏的本质是通过点击图标的方式，去执行一些操作图表的命令，因此，我们可以借助命令（Command）组件进行封装。 示例 https://githu

​ 本篇内容其实更多的是为了下一篇内容《工具栏》作铺垫。 命令是什么，举例子解释：撤销、重做、保存，就是一个个命令。 一般都是配合工具栏、右键菜单栏使用，使用 Command 组件将 DOM 包起来，

​ ​ gg-editor 暴露了 Flow 这么一个组件，它就是流程图组件，如下： 有哪些属性 一眼就看得出的属性 它的 API 有： style 行内样式 className CSS类名 data

​ gg-editor 默认暴露 GGEditor，是个组件，其他组件都必须要在该组件下。```jsx import GGEditor from "gg-editor"; export defaul

​ 绝对是全网最详细的 gg-editor 教程。 不过，需要注意的是：gg-editor 的 github 仓库已经有 ≥ 6 个月没更新了，作者会选择继续更新的几率估计比较小，还是建议新入坑者转