Issue #2264πŸ’¬ AnsweredOpened September 12, 2019by raghuv90 reactions

How to load a remote url inside grapes js

Quick answerby jcarizza

Hello @raghuv9 first think that you cant make a request with AJAX because the CORS. Ypu need to grab the content in other way (maybe in the backend) and renderize in the editor with. editor.component(<your-content>).

Read full answer below ↓

Question

Code SnippetTEXT
this is how i tried to load my gitpage but its not working
 mounted() {
                const LandingPage = {
                html: '',
                css: null,
                components: null,
                style: null,
                };
                this.editor = grapesjs.init({
                container: "#gjs",
                canvas: {
                     styles: [],
                },
                fromElement: true,
                components:'' ,
                style: '',
                plugins: [],
                pluginsOpts: {
                    "gjs-preset-webpage": {}
                },
                 storageManager: {
                    type: 'remote',
                    stepsBeforeSave: 10,
                    urlStore: '',
                    urlLoad: '',
                     params:{
                            'Access-Control-Allow-Origin':'http://laravel-vue-spa.test',
                        },
                    contentTypeJson: true,
                    headers: {
                        'Content-Type': 'application/json'
                     },
                     json_encode:{
                         'gjs-components': [],
                          'gjs-style': [],
                     }
                    },
                });
                this.editor.setComponents('<div class="cls">New component</div>');
                this.editor.load=(res => console.log('Load callback'));
        },
    }

Answers (1)

jcarizzaβ€’ September 12, 2019

Hello @raghuv9 first think that you cant make a request with AJAX because the CORS. Ypu need to grab the content in other way (maybe in the backend) and renderize in the editor with. editor.component(<your-content>).

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Free option

Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.

Browse free plugins β†’
Premium option

Premium plugins ship with support, regular updates, and production-ready features β€” save days of integration work.

Browse premium plugins β†’

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.