load remote html file into grapesjs

Question

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

score 4 · Answer 1 · answered Feb 28 '20 at 08:04

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

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

load remote html file into grapesjs

1 Answers1