在blockManager中添加GrapesJS组件

Question

所以我就在前几天用笔墨开始，到目前为止我还很喜欢它。然而，我遇到了一个路障。在画布(#gjs)中，我有一个预设的div容器：

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

我可以创建块/将它们添加到块部分(前端)，这将产生以下结构：

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

我可以把按钮拖到画布上，但我似乎不能把它拖到容器里(必须在上面或下面)。然后我读到了一些组件，它们看起来更像我需要做的事情。不幸的是，我不知道如何将组件实际添加到块部分，也不知道如何处理它。我可能走错路了。

Answer 1

您可以使用"div容器“创建组件。

 {
      '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,

然后，您将能够将“区段组件”拖到“容器组件”中。