1

我使用 Grapesjs 编辑器。现在我只知道一种存储内容的方法。

情况如下：

我有 Grapesjs 块“关于我们”，我用子卡组件填充。然后我得到内容，editor.getHtml()我可能会得到这样的东西：

<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" id="i94s">
                <div class="about-itm">
                    <div class="about-itm-inner">
                        <a href="#" class="about-itm-photo"><span class="img-inner-box" id="im8d1">
                            <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>
            </div>
        </div>
    </div>
</section>

这我可以保存到数据库，然后在前端显示。但我不想存储无用的 html。这里可编辑的项目应该是.title-sect、.about-itm-name和.about-itm-bries图像数据。我想只存储 json 数据，然后用正确的 html 在前端显示它，因为 html 是一样的，我知道..

有这样的解决方案吗？

4

1 回答 1

1

初始化 GrapesJS 后，在事件中添加以下代码以获取 JSON 数据输出。

JSON.stringify(editor.getComponents())

在这里， Component 覆盖了 toJSON 函数，因此这是可行的。

于 2021-08-02T15:16:47.893 回答