我已经在Laravel中建立了一个CMS，并使用GrapesJS使Page Builder变得完美，我只是为“帖子”创建了一个组件，因此用户可以选择希望选择帖子的类别也受到限制。在选择或更改限制或类别之后，将向后端发出请求，以向我显示JSON中的数据，然后将其追加到GrapesJS。 我通过GrapesJS的命令将所有页面内容保存到数据库：editor.store().html

现在，我可以如何从Builder中选择的类别（图片1和2）中加载数据库中的新帖子。 因为GrapesJS仅向我显示html代码。

Component Picture 1

Component Picture 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,});
        },});

    // 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,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,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,});
}