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

Question

I am using GrapesJS to build a simple webpage.

I included the script in the following way inside head part :

Answer 1

I found the solution : I used the following 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 ;

In Javascrpt , the storageManager part was changed in the following way :

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'
    }

In save_now.php, I have:

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

In load_now.php, I have:

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

Notice that in storageManager, I used params: { page_id: 11111 },. You can use this page_id in a column value to identify the certain row for your page as you can have multiple pages as well. I wrote the very basic functionalities i.e: I only showed the insert part without using the update query in case the expected row for the certain page already exists in DB. As to the loading part, you should use the page_id to fetch the certain row. This part I also did not show leaving it to your normal logical sense.

N.B.: I came to the solution from q GitHub question here .

EDIT: As to Q3) , the solution is:

Check out grapesjs-plugin-export for a client side solution. Since the html and css are saved into database, you can also do the same thing the plugin does using a server side script. You can use something like file_put_contents.

Answer 2

For your Q3, one solution could be to use generate an HTML file with PHP with fopen and fwrite function. And put the content of the database inside the file. To show the data you can then just show the plain HTML page and after your work is done you can delete the file from the server. This means you will generate the file on the fly and delete it after the use-case.

Answer 3

for Q3 you can use a "frontend option" like this:

NOTE 1: i'm using angularJS

NOTE 2: $scope.editor is my grapesJs instance

Function to get HTML+CSS inline

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

In your GrapesJs editor add an new option for "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' } 
            }, ]);

function to generate HTML file:

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



}