Able to fetch my remote HTML file using load URL and getting status ok, how can I load this fetched HTML AND CSS into editor? currently I'm getting blank screen inside editor.

What I tried so far:

storageManager: {
    type: 'remote',
    autosave: false,
    autoload: true,
    contentTypeJson: false,
    setStepsBeforeSave: 1,
    contentTypeJson: true,
    params: {


    },
    storeComponents: true,
    storeStyles: true,
    storeHtml: true,
    storeCss: true,
    urlStore: '../inc/page/edit_builder.php?id=<?php echo $pid; ?>',
    urlLoad: '../inc/page/fetch_builder.php?id=<?php echo $pid; ?>',

     headers: {
    'Content-Type': 'application/json'
    },
    json_encode:{
    "gjs-html": [],
    "gjs-css": [],
    }
  //headers: { Authorization: 'Basic ...' },
  }

editor.load(res => console.log('Load callback'));

From the server

$id = $_GET['id'];
$result = mysqli_query($mysqli, "SELECT * FROM mp_pages WHERE page_id='$id'");
$response= array();
while($row = mysqli_fetch_array($result))

{
                array_push($response, array(
                "gjs-html"=>$row['page_desc'], 
                "gjs-css"=>$row['css']
               ));

}
echo json_encode($response);

mysqli_close($mysqli);

Able to fetch my remote HTML file using load URL and getting status ok, how can I load this fetched HTML AND CSS into editor? currently I'm getting blank screen inside editor.

What I tried so far:

storageManager: {
    type: 'remote',
    autosave: false,
    autoload: true,
    contentTypeJson: false,
    setStepsBeforeSave: 1,
    contentTypeJson: true,
    params: {


    },
    storeComponents: true,
    storeStyles: true,
    storeHtml: true,
    storeCss: true,
    urlStore: '../inc/page/edit_builder.php?id=<?php echo $pid; ?>',
    urlLoad: '../inc/page/fetch_builder.php?id=<?php echo $pid; ?>',

     headers: {
    'Content-Type': 'application/json'
    },
    json_encode:{
    "gjs-html": [],
    "gjs-css": [],
    }
  //headers: { Authorization: 'Basic ...' },
  }

editor.load(res => console.log('Load callback'));

From the server

$id = $_GET['id'];
$result = mysqli_query($mysqli, "SELECT * FROM mp_pages WHERE page_id='$id'");
$response= array();
while($row = mysqli_fetch_array($result))

{
                array_push($response, array(
                "gjs-html"=>$row['page_desc'], 
                "gjs-css"=>$row['css']
               ));

}
echo json_encode($response);

mysqli_close($mysqli);

• javascript
• php
• grapesjs

1 Answer 1

You need to pass your remote HTML/CSS to GrapesJs editor. In javascript

editor.setStyle(Your remote style file)
editor.setComponent(Your remote HTML)

[IMPORTANT]

GrapesJS is able to start from any HTML/CSS but use this approach only for importing already existent HTML templates, once the user starts editing, rely always on JSON objects because the HTML doesn't contain information about your ponents.

Checkout this link. For Store and load templates https://grapesjs./docs/modules/Storage.html#store-and-load-templates