在 GrapesJS 中将组件添加到 blockManager

Question

所以前几天我开始使用 grapesjs，到目前为止我很喜欢它。但是，我遇到了障碍。在 canvas (#gjs) 中，我有一个预设的 div 容器：

<div id="container"></div>

我可以创建 blocks/add 它们到块部分（在前端会产生以下结构：

    <section class="row">
        <div class="6">Column</div>
        <div class="6">Column</div>
    </section>

我可以将按钮拖到 canvas，但我似乎无法将它拖到容器中（必须在上方或下方）。然后我阅读了一些看起来更像我需要做的组件。不幸的是，我不知道如何将组件实际添加到块部分或如何处理它。我可能会以错误的方式解决这个问题。

Answer 1

您可以使用 "div container"

创建组件

 {
      'id' : '0001',
      'data' : {
             label: `<div>
              <div class="my-label-block">Container</div>
            </div>`,                  
            content:`
                <div id="container"></div>
            `,
            editable: true,
            draggable: true,
            stylable: true,
            category: 'Basics elements',
            selectable: true,
            attributes: {
            class: "fa",
            id: '0001'
            }

      }
    }

选项：

    editable: true,
    draggable: true,
    stylable: true,
    selectable: true,

然后，您将能够拖动 "section component into "容器组件。

在 GrapesJS 中将组件添加到 blockManager

Adding component to blockManager in GrapesJS

javascript

grapesjs