Is there a solution to store data as json?

Question

I use Grapesjs editor. And now I know only 1 way to store the content.

The situation is the following:

I have Grapesjs block 'About us' which I populate with child cards components. And then I get the content with editor.getHtml() and I may get something like this:

<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>

And this I can save to DB and then show on front-end. But I don't want to store useless html. Here the editable items should be .title-sect, .about-itm-name, .about-itm-bries and image data. I would like to store only json data and then display it on front-end with correct html, because html is the same and I know it..

Is there such a solution ?

Answer 1

After your GrapesJS is initialized, inside your event add the following code for getting the JSON data output.

JSON.stringify(editor.getComponents())

Here, Component overrides the toJSON function, hence this works.