grapesjs - 如何定义组件掉落的确切位置？

Question

我使用 Grapesjs，我的页面上有“关于我们”的块。我想用 Grapesjs 使这个块可编辑。所以有带有照片和描述的容器和子项目。我的理解是：Grapesjs 块应该代表容器，Grapes 组件应该代表单个子卡。然后我想把子项目阻止。

下面是容器和子元素的html结构：

<section class="sect-home-about">
    <div class="container">
        <div class="title-sect">
            <h2>Über uns</h2>
        </div>

        <div class="about-wrap">
            <div class="about-line">
                <div class="about-itm">
                    <div class="about-itm-inner">
                        <a href="#" class="about-itm-photo">
                            <span class="img-inner-box" style="background-image: url(/img/about/1.png);">
                                <img src="/css/img/square.png" alt="base">
                                <img class="main-img" src="/img/about/1.png" alt="" title="">
                            </span>
                        </a>

                        <div class="about-itm-txt">
                            <div class="about-itm-name">Andrea</div>
                            <div class="about-itm-brief">
                                Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen sie <a href="#">mehr lesen</a>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</section>

我认为这应该是 Grapesjs 块（容器）的 html：

<section class="sect-home-about">
    <div class="container">
        <div class="title-sect">
            <h2>Über uns</h2>
        </div>

        <div class="about-wrap">
            <div class="about-line">

            </div>
        </div>
    </div>
</section>

我认为这应该是Grapesjs组件html（子卡）：

<div class="about-itm">
    <div class="about-itm-inner">
        <a href="#" class="about-itm-photo">
                        <span class="img-inner-box" style="background-image: url(/img/about/1.png);">
                            <img src="/css/img/square.png" alt="base">
                            <img class="main-img" src="/img/about/1.png" alt="" title="">
                        </span>
        </a>

        <div class="about-itm-txt">
            <div class="about-itm-name">Andrea</div>
            <div class="about-itm-brief">
                Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen sie <a href="#">mehr lesen</a>
            </div>
        </div>
    </div>
</div>

这是JS代码：

const editor = grapesjs.init({
    container: '#gjs',
    fromElement: 1,
    storageManager: { type: 0 },
    // plugins: [myNewComponentTypes],
    // plugins: ['gjs-blocks-basic']
});

let blockManager = editor.BlockManager;


editor.Components.addType('about-us-item',
    {
        isComponent: el => el.className && el.className.split(' ').includes('about-us-item'),

        // Model definition
        model: {
            // Default properties
            defaults: {
                tagName: 'section',
                // draggable: 'form, form *', // Can be dropped only inside `form` elements
                draggable: false,
                droppable: false, // Can't drop other elements inside
            }
        }
    });

blockManager.add('about-us-item',
    {
        label: 'About us',
        attributes: {class:'fa fa-user-circle-o'},
        content: '<div class="about-itm">' +
            '<div class="about-itm-inner">' +
            '<a href="#" class="about-itm-photo">\n' +
            '<span class="img-inner-box" style="background-image: url(/img/about/1.png);">' +
            '<img src="/css/img/square.png" alt="base">' +
            '<img class="main-img" src="/img/about/1.png" alt="" title="">' +
            '</span>' +
            '</a>' +
            '<div class="about-itm-txt">' +
            '<div class="about-itm-name">Andrea</div>' +
            '<div class="about-itm-brief">' +
            'Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen sie <a href="#">mehr lesen</a>' +
            '</div>' +
            '</div>' +
            '</div>' +
            '</div>',
        category: 'Items',
    });

blockManager.add('about-us-container', {
    label: 'About us',
    attributes: {class:'fa fa-cube'},
    content: '<section class="sect-home-about">' +
        '    <div class="container">' +
        '        <div class="title-sect">' +
        '            <h2>Über uns</h2>' +
        '        </div>' +
        '        <div class="about-wrap">' +
        '            <div class="about-line">' +
        '            </div>' +
        '        </div>' +
        '    </div>' +
        '</section>',
    category: 'Containers',
});

这是屏幕截图：

所以我想首先将“关于我们”容器放到画布上，然后用“关于我们”项目填充容器。

这是最后一个问题：

<section class="sect-home-about">
    <div class="container">
        <div class="title-sect">
            <div class="about-itm">
                <div class="about-itm-inner"><a href="#" class="about-itm-photo"><span class="img-inner-box" id="iijxe"><img
                        src="/css/img/square.png" alt="base"/><img src="/img/about/1.png" alt="" title=""
                                                                   class="main-img"/></span></a>
                    <div class="about-itm-txt">
                        <div class="about-itm-name">Andrea</div>
                        <div class="about-itm-brief">Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und
                            Konsonantien leben die Blindtexte. Abgeschieden wohnen sie <a href="#">mehr lesen</a></div>
                    </div>
                </div>
            </div>
            <h2>Über uns</h2></div>
        <div class="about-wrap">
            <div class="about-line"></div>
        </div>
    </div>
</section>

我希望.about-itm将项目放在.about-linediv 内，但它们出现在里面.title-sect

感谢所有可以帮助和澄清这一刻的人！

我已经为.about-linediv 添加了填充，所以现在很容易将 chilt 放在正确的位置：

blockManager.add('about-us-container', {
    label: 'About us',
    attributes: {class:'fa fa-cube'},
    content: '<section class="sect-home-about">' +
        '    <div class="container">' +
        '        <div class="title-sect">' +
        '            <h2>Über uns</h2>' +
        '        </div>' +
        '        <div class="about-wrap">' +
        '            <div class="about-line" style="padding-top: 50px;"></div>' +
        '        </div>' +
        '    </div>' +
        '</section>',
    category: 'Containers',
});

但我希望只有在.about-linediv 内才能放置项目。

标签： grapesjs