将远程html文件加载到grapesjs中答案

【问题标题】：load remote html file into grapesjs将远程html文件加载到grapesjs中
【发布时间】：2020-02-28 16:04:59
【问题描述】：

能够使用加载 URL 获取我的远程 HTML 文件并获得状态，如何将获取的 HTML 和 CSS 加载到编辑器中？目前我在编辑器中出现空白屏幕。

到目前为止我尝试了什么：

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

从服务器

$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】：

您需要将远程 HTML/CSS 传递给 GrapesJs 编辑器。在javascript中

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

[重要]

GrapesJS 能够从任何 HTML/CSS 开始，但使用这种方法仅用于导入已经存在的 HTML 模板，一次用户开始编辑，始终依赖 JSON 对象，因为 HTML 不包含有关您的组件的信息。

查看此链接。用于存储和加载模板 https://grapesjs.com/docs/modules/Storage.html#store-and-load-templates

【讨论】：