是否有将数据存储为 json 的解决方案？

如何解决是否有将数据存储为 json 的解决方案？

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

情况如下：

我有 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 是相同的，我知道..

有这样的解决方案吗？

解决方法

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

JSON.stringify(editor.getComponents())

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