GrapesJs 和 PHP - 存储和加载数据以在编辑器和 HTML 页面中显示

Question

我正在使用 GrapesJS 构建一个简单的网页。

我在 head 部分中按以下方式包含了脚本：

<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<link rel="stylesheet" type="text/css" href="grapesjs-dev/dist/css/grapes.min.css">
<script type="text/javascript" src="grapesjs-dev/dist/grapes.min.js"></script>

HTML:

<div id="gjs" style="height:0px; overflow:hidden;">
</div>

Javascript :

<script>      
       var editor = grapesjs.init({
        showOffsets: 1,
        noticeOnUnload: 0,
        container: '#gjs',

        fromElement: true,

        height: '100%',
        fromElement: true,
        storageManager: { autoload: 0 },


   assetManager: {

     assets: [
     'http://placehold.it/350x250/78c5d6/fff/image1.jpg',
     // Pass an object with your properties
     {
       type: 'image',
       src: 'http://placehold.it/350x250/459ba8/fff/image2.jpg',
       height: 350,
       width: 250
     },
     {
       // As the 'image' is the base type of assets, omitting it will
       // be set as `image` by default
       src: 'http://placehold.it/350x250/79c267/fff/image3.jpg',
       height: 350,
       width: 250
     },
    ],

  },


   storageManager: {
    type: 'remote',
    stepsBeforeSave: 1,
    autosave: true,         // Store data automatically
    autoload: true,
    urlStore: 'save_now.php',
    urlLoad: 'load_now.php',
    // ContentType: 'application/json',
    // For custom parameters/headers on requests
    //params: { _some_token: '....' },
    contentTypeJson: true,
      storeComponents: true,
    storeStyles: true,
    storeHtml: true,
    storeCss: true,
     headers: {
    'Content-Type': 'application/json'
    },
    json_encode:{
    "gjs-html": [],
    "gjs-css": [],
    }
  //headers: { Authorization: 'Basic ...' },
  }


      });

 window.editor= editor;




var blockManager = editor.BlockManager;

// 'my-first-block' is the ID of the block
blockManager.add('my-first-block', {
  label: 'Simple block',
  content: '<div class="my-block">This is a simple block</div>',
});


 </script>

所以我在块面板中得到一个块，即 Simple block，我可以将其拖放到编辑器上。每当进行任何更改时，都会通过对 save.php 文件的 ajax 调用来触发 autosave。在 save.php 里面，我有：

$content_found="";
$content_found= file_get_contents('php://input');

mysqli_real_escape_string($conn, $content_found);
echo " content found = ".$content_found;
$sql = "INSERT INTO `grapes_content` (`content_found`)
VALUES ('".$content_found."')";

但是在 Chrome 开发者工具网络选项卡中，我可以看到：

不清楚我应该在数据库中保存哪些有效载荷变量和如何。我使用 $content_found= file_get_contents('php://input'); 来获取完整内容。

将其保存到数据库后，在页面刷新时，我使用 load_now.php 加载页面。在 load_now.php 里面，我有 :

$content_found="";
$sql = "SELECT * FROM  `grapes_content`";
$result=$conn->query($sql);
$content_found="";
while($row=mysqli_fetch_assoc($result)){

    $content_found=$row['content_found'];

}

echo $content_found;

但是编辑器显示没有保存的数据。

我很确定我保存和检索数据的方式不正确。所以要点是：

Q1) 我应该在数据库中保存哪些东西？我怎样才能从 ajax 有效负载或以任何其他方式获取变量或数据？

Q2) 如何在页面重新加载后将保存的数据显示到编辑器中？

在编辑器中，我看到一个带有眼睛图像的预览选项，它可以在没有任何编辑器的情况下向我显示 HTML 页面。

Q3) 将数据保存到数据库后，如何将数据简单地显示为 HTML 页面而不是在任何编辑器中？

Answer 1

我找到了解决方案：我使用了以下 table :

CREATE TABLE IF NOT EXISTS `pages` (
   `id` int(20) NOT NULL AUTO_INCREMENT,
   `assets` TEXT  NULL ,
   `components` TEXT NULL,
   `css` TEXT NULL ,
   `html` TEXT  NULL ,
   `styles` TEXT NULL ,
    PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 ;

在 Javascrpt 中，storageManager 部分按以下方式更改：

storageManager: {
    type: 'remote',
    stepsBeforeSave: 1,
    autosave: true,         // Store data automatically
    autoload: true,
    urlStore: 'save_now.php',
    urlLoad: 'load_now.php',
    params: { page_id: 11111 },
    contentTypeJson: true,
      storeComponents: true,
    storeStyles: true,
    storeHtml: true,
    storeCss: true,
     headers: {
    'Content-Type': 'application/json'
    }

在save_now.php中，我有：

header("Content-Type:application/json");
include('db.php');
$data = json_decode(file_get_contents("php://input"),true);

$assets = $data['gjs-assets'];
$assets=json_encode($assets);
$components = $data['gjs-components'];
$components=json_encode($components);
$css = $data['gjs-css'];
$css = json_encode($css);
$html = $data['gjs-html'];
$html= json_encode($html);
$styles = $data['gjs-styles'];
$styles = json_encode($styles);

//$page_id = $data['page_id']; **I did not use it in my code here.. but you might need it. See the last part of this answer.**

 $result = mysqli_query(
 $con,
 "INSERT INTO `pages` (assets, components, css, html, styles)
  VALUES ($assets, $components, $css, $html, $styles)") or die(mysqli_error($con));

echo "success";

在load_now.php中，我有：

header("Content-Type:application/json");

  $result = mysqli_query(
  $con,
  "SELECT * FROM `pages` ");
  if(mysqli_num_rows($result)>0){
    $row = mysqli_fetch_array($result);
    $assets = $row['assets'];
    $components = $row['components'];
    $css = $row['css'];
    $html = $row['html'];
    $styles = $row['styles'];
    $id=$row['id']; 
    response($id, $assets, $components, $css, $html, $styles);
    mysqli_close($con);
  }else{
    response(NULL, NULL,NULL,NULL, 200,"No Record Found");
  }
function response($id, $assets, $components, $css, $html, $styles){
 $response['id'] = $id;
 $response['gjs-assets'] = $assets;
 $response['gjs-components'] = $components;
 $response['gjs-css'] = $css;
 $response['gjs-html'] = $html;
 $response['gjs-styles'] = $styles;

 $json_response = json_encode($response);
 echo $json_response;
}

请注意，在 storageManager 中，我使用了 params: { page_id: 11111 },。您可以在列值中使用此 page_id 来标识页面的特定行，因为您也可以有多个页面。我写了非常基本的功能，即：我只显示插入部分而不使用更新查询，以防特定页面的预期行已经存在于数据库中。至于加载部分，您应该使用 page_id 来获取特定行。这部分我也没有展示留给你正常的逻辑。

N.B.: 我从 q GitHub 问题 here 找到了解决方案。

编辑： 至于 Q3) ，解法是：

查看 grapesjs-plugin-export 客户端解决方案。由于 html 和 css 被保存到数据库中，您也可以使用服务器端脚本执行与插件相同的操作。您可以使用 file_put_contents.

之类的东西

Answer 2

对于您的 Q3，一种解决方案是使用 PHP 以及 fopen 和 fwrite 函数生成 HTML 文件。并将数据库的内容放在文件里面。要显示数据，您可以只显示普通的 HTML 页面，完成工作后，您可以从服务器中删除该文件。这意味着您将动态生成文件并在用例之后将其删除。

Answer 3

对于第 3 季度，您可以像这样使用 "frontend option"：

注意 1：我正在使用 angularJS

注意 2：$scope.editor 是我的 grapesJs 实例

函数获取HTML+CSS内联

$scope.getHtmlCss = function(){
    var html = $scope.editor.runCommand('gjs-get-inlined-html');
    $log.log("-----> HTML & INLINED CSS: ", html);
    return html;
}

在您的 GrapesJs 编辑器中为 "Donwload HTML file"

添加一个新选项

          $scope.editor.Panels.addButton('options', [ 
            { id: 'save', 
              className: 'fa fa-file-code-o', 
              command: function(editor1, sender) { 

                if($scope.getHtmlCss()){
                  $scope.generateFile($scope.getHtmlCss());                      
                }

              }, 
              attributes: { title: 'Download HMTL file' } 
            }, ]);

生成HTML文件的函数：

$scope.generateFile = function(code){

      $(function() 
        {
          console.log( "ready!" );
          // Check for the various File API support.
          if (window.File && window.FileReader && window.FileList && window.Blob) 
          {
            saveText(code, 'text/html;charset=utf-8', 'mailing.html');
          } 
          else 
          {
            alert('The File APIs are not fully supported in this browser.');
          }
        }
       );

      function saveText(text, mime, file)
      {
        var blob = new Blob([text], {type: mime});
        saveAs(blob, file);

        return false;
      }

      function handleFileSelect(code, mimeType) 
      {

        var reader = new FileReader();
        // Closure to capture the file information.
        reader.onload = (
          function(theFile) 
          {
            return function(e) 
            {
              target.html( e.target.result );
            };
          }
        )(file);

        // Read in the image file as a data URL.
        reader.readAsText(file);
      }



}

GrapesJs 和 PHP - 存储和加载数据以在编辑器和 HTML 页面中显示

GrapesJs and PHP - store and load data to show in editor and as HTML page as well

javascript

php

grapesjs