Обновление содержимого GrapesJS перед загрузкой

Question

Я создал одну CMS в Laravel, и я использовал GrapesJS, чтобы сделать Page Builder идеальным, я просто создал один компонент для «Сообщений», чтобы пользователи могли выбирать категорию, в которой число выбранных сообщений также ограничено. После выбора или изменения лимита или категории делается запрос к бэкэнду, чтобы показать мне данные в JSON, и я добавляю GrapesJS. Я сохраняю все содержимое страницы в базе данных с помощью команды GrapesJS: editor.store().html

Теперь, как я могу сделать, чтобы загрузить свежие сообщения из базы данных из этой категории (рис. 1 и 2), выбранной в конструкторе. Потому что GrapesJS показывает мне только HTML-код.

Изображение компонента 1

Изображение компонента 2

Код для загрузки содержимого страницы для страницы

$page = Pages::find($id);
$pageContent = $page->content; // here is content from GrapesJS
return view('page')->with('pageContent', $pageContent);

код компонента:

function posts(editor) {
    // Trait -> Limit Post per page
    editor.TraitManager.addType('limitPostPerPage', {
        createInput({ trait }) {
            const traitOpts = trait.get('options') || [];
            const options = traitOpts.lenght ? traitOpts : [
                { id: '', name: 'Select Category...' },
                { id: '8', name: 'Sport' },
                { id: '9', name: 'Global news' },
            ];

            const el = document.createElement('div');
            el.className = "postsSettings";
            el.innerHTML = `
                <div class="group">
                    <label>Category:</label>
                    <select type="select" class="inputCategory">
                    ${options.map(opt => `<option value="${opt.id}">${opt.name}</option>`).join('')}
                    </select>
                </div>
                <div class="group">
                    <label>Limit post per Page</label>
                    <input type="number" class="inputLimitPostPerPage"/>
                </div>
            `;

            const inputLimitPostPerPage = el.querySelector('.inputLimitPostPerPage');
            const inputCategory = el.querySelector('.inputCategory');
            inputCategory.addEventListener('change', ev => {
                // console.log('inputCategory: ' + ev.target.value);
            });
            inputLimitPostPerPage.addEventListener('change', ev => {
                // console.log('LimitPostPerPage: ' + ev.target.value);
            });

            return el;
        },
        onEvent({ elInput, component, event }) {
            var category = elInput.querySelector('select').value;
            var limitPostPerPage = elInput.querySelector('input').value;

            $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': laravel_csrf_token } });
            $.ajax({
                type: 'POST',
                url: getPostsListUrl,
                data: { category: category, limitPostPerPage: limitPostPerPage },
                success: function(data) {
                    if(data.status == 'success') {
                        component.set('content', data.html);
                    }
                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                    $.growl.error({ message: XMLHttpRequest.responseText });
                },
                fail: function(XMLHttpRequest, textStatus, errorThrown) {
                    $.growl.error({ message: XMLHttpRequest.responseText });
                },
            });
        },
    });

    // Component -> Posts
    editor.DomComponents.addType('postsComponent', {
        model: {
            defaults: {
                testprop: 1,
                traits: [
                    {
                        type: 'limitPostPerPage',
                        name: 'limitPostPerPage',
                        label: 'Posts Settings',
                        options: [
                            { value: 'link', name: 'Link' },
                            { value: 'popup', name: 'Popup' },
                        ],
                    },
                ],
            },
        },
        view: {
        },
    });

    // Block -> Posts
    var html = '<div class="container">'+
'                    <div class="row pt-4" data-gjs-type="postsComponent">'+
'                        <div class="col-lg-4 col-sm-6 mb-4" cool_disabled_v2="true" data-gjs-editable="false" data-gjs-removable="false">'+
'                            <div class="card h-100">'+
'                                <a href="#">'+

'                                </a>'+
'                                <div class="card-body">'+
'                                    <h4 class="card-title">'+
'                                        <a href="#" data-gjs-editable="false" data-gjs-removable="false" data-gjs-stylable="false">Post 1</a>'+
'                                    </h4>'+
'                                    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur eum quasi sapiente nesciunt? Voluptatibus sit, repellat sequi itaque deserunt, dolores in, nesciunt, illum tempora ex quae? Nihil, dolorem!</p>'+
'                                </div>'+
'                            </div>'+
'                        </div>'+
'                        <div class="col-lg-4 col-sm-6 mb-4" cool_disabled_v2="true" data-gjs-editable="false" data-gjs-removable="false">'+
'                            <div class="card h-100">'+
'                                <a href="#">'+

'                                </a>'+
'                                <div class="card-body">'+
'                                    <h4 class="card-title">'+
'                                        <a href="#">Post 2</a>'+
'                                    </h4>'+
'                                    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur eum quasi sapiente nesciunt? Voluptatibus sit, repellat sequi itaque deserunt, dolores in, nesciunt, illum tempora ex quae? Nihil, dolorem!</p>'+
'                                </div>'+
'                            </div>'+
'                        </div>'+
'                        <div class="col-lg-4 col-sm-6 mb-4" cool_disabled_v2="true" data-gjs-editable="false" data-gjs-removable="false">'+
'                            <div class="card h-100">'+
'                                <a href="#">'+

'                                </a>'+
'                                <div class="card-body">'+
'                                    <h4 class="card-title">'+
'                                        <a href="#">Post 3</a>'+
'                                    </h4>'+
'                                    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur eum quasi sapiente nesciunt? Voluptatibus sit, repellat sequi itaque deserunt, dolores in, nesciunt, illum tempora ex quae? Nihil, dolorem!</p>'+
'                                </div>'+
'                            </div>'+
'                        </div>'+
'                    </div>'+
'                </div>';
    editor.BlockManager.add('posts', {
        label: 'Posts',
        category: 'Basic',
        attributes: { class: 'fa fa-clipboard' },
        content: html,
        draggable: true,
        editable: false,
    });
}