尧图网页设计 
GrapesJS 如何用 block:custom 事件渲染自定义 Block 面板【免费下载链接】grapesjsFree and Open source Web Builder Framework. Next generation tool for building templates without coding项目地址: https://gitcode.com/GitHub_Trending/gr/grapesjs在 GrapesJS 编辑器里默认的 Block Manager 是一个内置 Drag Drop 的轻量 UI。文档的说法是简单的场景够用但adding more complex elements requires a replace of the default UI——需要更复杂的 Block 面板时就要换掉默认 UI。官方给出的路径只有一条在blockManager配置里声明custom: true然后订阅block:custom事件把面板的渲染和更新逻辑全部接管过来。本文基于 GrapesJS 仓库中的 Blocks 模块指南、Block Manager API 和 Block 参考 给出完整操作路径指南注明该内容适用于 GrapesJS v0.17.27 或更高版本。完成后你会得到默认 block 列表不再渲染你在事件提供的container元素里渲染自己的面板并且面板里的 block 仍然可以拖入画布。准备条件一个已经grapesjs.init()完成初始化的编辑器实例。保留 Blocks 面板事件 payload 中的container是在 Blocks 面板命令运行时才被设置的见 OpenBlocks 命令实现。文档中的 Vue 示例也展示了把自定义面板挂到默认容器的做法文档原话是that is up to your preferences——放在哪里由你决定但container本身来自面板命令。了解 Block 的基本属性label、content、media、category等见 Block 参考。第一步声明 custom: trueconst editor grapesjs.init({ container: #gjs, // ...其他配置 blockManager: { custom: true, }, });custom是 blockManager 配置 中的一个布尔项默认值为false官方注释写明它的作用是Avoid rendering the default block manager UI。也就是说一旦开启编辑器自己不再画默认 block 列表你的 UI 必须自己渲染否则面板会是空的。这一步没有可运行的命令判断标准就是打开 Blocks 面板后看不到默认列表。第二步订阅 block:custom 并渲染面板指南给出的核心写法editor.on(block:custom, (props) { // props.blocks (ArrayBlock) - Array of all blocks // props.dragStart (FunctionBlock) - 触发 block 拖拽开始 // props.dragStop (FunctionBlock) - 触发 block 拖拽结束 // props.container (HTMLElement) - 你可以把 UI 追加进去的默认元素 // 这里写你自己的渲染/更新逻辑 });事件触发时携带的完整数据在源码类型BlocksCustomData中声明为bmBlockManager 模块、blocks、container、dragStart(block, ev?)、drag(ev)、dragStop(cancel?)见 类型定义。指南列出的四个主要字段之外拖拽进行中的drag回调和bm引用可以从这里确认。一个说明性示例文档本身未给出 vanilla 完整示例以下按上述字段拼出最小渲染逻辑具体事件绑定方式可自行替换editor.on(block:custom, ({ blocks, container, dragStart, drag, dragStop }) { // container 类型为 HTMLElement | undefined事件可能先于面板打开触发 if (!container) return; container.innerHTML ; blocks.forEach((block) { const el document.createElement(div); el.textContent block.get(label); el.addEventListener(mousedown, (ev) dragStart(block, ev)); el.addEventListener(mousemove, drag); el.addEventListener(mouseup, () dragStop()); container.appendChild(el); }); });三个拖拽回调对应拖动的开始、进行中、结束三个阶段示例把 mousedown / mousemove / mouseup 分别绑定到三个阶段这是文档未约束的一种可行接法。事件何时触发block:custom不是一次性的它的触发点有三处理解这几点能避免回调没执行或面板没更新两类疑问编辑器初始渲染完成后BlockManager 的postRender会触发一次该事件见 实现代码。此时面板命令还没跑过payload 里的container可能为空所以上面示例里做了空值判断。Blocks 面板命令运行时如果custom: true会把面板容器写入 payload 的container并再次触发事件见 OpenBlocks 命令。Block 集合发生变化时事件会重新触发——指南原话是block:customwill give you all the information on any requested change源码中对所有 block 事件做了 debounce 监听再触发。这意味着你在自定义面板里增删 block 后可以拿到最新的blocks数组重绘 UI而不需要自己维护一份列表。如何验证打开 Blocks 面板默认 block 列表不再出现custom: true已避免渲染默认 UI面板容器内显示的是你在回调里追加的 DOM。在回调中打印props.blocks例如各 block 的 id与初始化时blocks配置的定义核对一致随后用editor.Blocks.add(BLOCK-ID, {...})或editor.Blocks.remove(BLOCK-ID)编程式增删 block方法用法见 Blocks API回调应再次触发且列表随之变化。验证拖拽在自定义面板上拖动某个 block 到画布拖动开始/结束分别走到dragStart/dragStop成功放下后画布中会出现该 block 的content对应的 Component。可以用 事件文档 中的block:drag:stop事件回调参数为 dropped Component 与 Block来确认落下是否成功。限制与注意自定义 UI 只接管渲染block 定义本身的规则不变不要把函数等不可序列化属性放进 block也不要把 styles 写进 block——指南明确指出这样保存后函数会丢失、样式无法被编辑器安全清理这些都应留在 component 里。Blocks API 的增删改主要更新 Block Manager UI与画布中已存在的 Components 无关这一点在指南中有专门警告。如果只想做 UI 状态同步而不替换整个面板也可以直接监听文档列出的其他事件block:add、block:remove、block:update、block:drag:start等完整列表见 Block Manager API 的 Available Events。【免费下载链接】grapesjsFree and Open source Web Builder Framework. Next generation tool for building templates without coding项目地址: https://gitcode.com/GitHub_Trending/gr/grapesjs创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 GrapesJS 如何用 block:custom 事件渲染自定义 Block 面板？
GrapesJS 如何用 block:custom 事件渲染自定义 Block 面板【免费下载链接】grapesjsFree and Open source Web Builder Framework. Next generation tool for building templates without coding项目地址: https://gitcode.com/GitHub_Trending/gr/grapesjs在 GrapesJS 编辑器里默认的 Block Manager 是一个内置 Drag Drop 的轻量 UI。文档的说法是简单的场景够用但adding more complex elements requires a replace of the default UI——需要更复杂的 Block 面板时就要换掉默认 UI。官方给出的路径只有一条在blockManager配置里声明custom: true然后订阅block:custom事件把面板的渲染和更新逻辑全部接管过来。本文基于 GrapesJS 仓库中的 Blocks 模块指南、Block Manager API 和 Block 参考 给出完整操作路径指南注明该内容适用于 GrapesJS v0.17.27 或更高版本。完成后你会得到默认 block 列表不再渲染你在事件提供的container元素里渲染自己的面板并且面板里的 block 仍然可以拖入画布。准备条件一个已经grapesjs.init()完成初始化的编辑器实例。保留 Blocks 面板事件 payload 中的container是在 Blocks 面板命令运行时才被设置的见 OpenBlocks 命令实现。文档中的 Vue 示例也展示了把自定义面板挂到默认容器的做法文档原话是that is up to your preferences——放在哪里由你决定但container本身来自面板命令。了解 Block 的基本属性label、content、media、category等见 Block 参考。第一步声明 custom: trueconst editor grapesjs.init({ container: #gjs, // ...其他配置 blockManager: { custom: true, }, });custom是 blockManager 配置 中的一个布尔项默认值为false官方注释写明它的作用是Avoid rendering the default block manager UI。也就是说一旦开启编辑器自己不再画默认 block 列表你的 UI 必须自己渲染否则面板会是空的。这一步没有可运行的命令判断标准就是打开 Blocks 面板后看不到默认列表。第二步订阅 block:custom 并渲染面板指南给出的核心写法editor.on(block:custom, (props) { // props.blocks (ArrayBlock) - Array of all blocks // props.dragStart (FunctionBlock) - 触发 block 拖拽开始 // props.dragStop (FunctionBlock) - 触发 block 拖拽结束 // props.container (HTMLElement) - 你可以把 UI 追加进去的默认元素 // 这里写你自己的渲染/更新逻辑 });事件触发时携带的完整数据在源码类型BlocksCustomData中声明为bmBlockManager 模块、blocks、container、dragStart(block, ev?)、drag(ev)、dragStop(cancel?)见 类型定义。指南列出的四个主要字段之外拖拽进行中的drag回调和bm引用可以从这里确认。一个说明性示例文档本身未给出 vanilla 完整示例以下按上述字段拼出最小渲染逻辑具体事件绑定方式可自行替换editor.on(block:custom, ({ blocks, container, dragStart, drag, dragStop }) { // container 类型为 HTMLElement | undefined事件可能先于面板打开触发 if (!container) return; container.innerHTML ; blocks.forEach((block) { const el document.createElement(div); el.textContent block.get(label); el.addEventListener(mousedown, (ev) dragStart(block, ev)); el.addEventListener(mousemove, drag); el.addEventListener(mouseup, () dragStop()); container.appendChild(el); }); });三个拖拽回调对应拖动的开始、进行中、结束三个阶段示例把 mousedown / mousemove / mouseup 分别绑定到三个阶段这是文档未约束的一种可行接法。事件何时触发block:custom不是一次性的它的触发点有三处理解这几点能避免回调没执行或面板没更新两类疑问编辑器初始渲染完成后BlockManager 的postRender会触发一次该事件见 实现代码。此时面板命令还没跑过payload 里的container可能为空所以上面示例里做了空值判断。Blocks 面板命令运行时如果custom: true会把面板容器写入 payload 的container并再次触发事件见 OpenBlocks 命令。Block 集合发生变化时事件会重新触发——指南原话是block:customwill give you all the information on any requested change源码中对所有 block 事件做了 debounce 监听再触发。这意味着你在自定义面板里增删 block 后可以拿到最新的blocks数组重绘 UI而不需要自己维护一份列表。如何验证打开 Blocks 面板默认 block 列表不再出现custom: true已避免渲染默认 UI面板容器内显示的是你在回调里追加的 DOM。在回调中打印props.blocks例如各 block 的 id与初始化时blocks配置的定义核对一致随后用editor.Blocks.add(BLOCK-ID, {...})或editor.Blocks.remove(BLOCK-ID)编程式增删 block方法用法见 Blocks API回调应再次触发且列表随之变化。验证拖拽在自定义面板上拖动某个 block 到画布拖动开始/结束分别走到dragStart/dragStop成功放下后画布中会出现该 block 的content对应的 Component。可以用 事件文档 中的block:drag:stop事件回调参数为 dropped Component 与 Block来确认落下是否成功。限制与注意自定义 UI 只接管渲染block 定义本身的规则不变不要把函数等不可序列化属性放进 block也不要把 styles 写进 block——指南明确指出这样保存后函数会丢失、样式无法被编辑器安全清理这些都应留在 component 里。Blocks API 的增删改主要更新 Block Manager UI与画布中已存在的 Components 无关这一点在指南中有专门警告。如果只想做 UI 状态同步而不替换整个面板也可以直接监听文档列出的其他事件block:add、block:remove、block:update、block:drag:start等完整列表见 Block Manager API 的 Available Events。【免费下载链接】grapesjsFree and Open source Web Builder Framework. Next generation tool for building templates without coding项目地址: https://gitcode.com/GitHub_Trending/gr/grapesjs创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考