Виноград Js и PHP - хранить и загружать данные для отображения в редакторе и как страницу HTML - PullRequest
Новая
       19

Виноград Js и PHP - хранить и загружать данные для отображения в редакторе и как страницу HTML

3 голосов
/ 08 мая 2020

Я использую Grapes JS для создания простой веб-страницы.

Я включил скрипт в часть 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, который я могу перетащить в редактор. При внесении каких-либо изменений autosave запускается вызовом ajax файла save.php. Внутри 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 инструмента разработчика я вижу:

enter image description here

Непонятно, какие переменные полезной нагрузки я должен сохранить в базе данных и как . Вместо этого я использовал $content_found= file_get_contents('php://input');, чтобы получить полный контент.

После сохранения в БД на странице refre sh я загружаю страницу с 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, а не внутри какого-либо редактора?

Ответы [ 3 ]

0 голосов
/ 12 мая 2020

Для вашего Q3 одним из решений может быть использование файла HTML с PHP с функциями fopen и fwrite. И поместите содержимое базы данных внутрь файла. Чтобы показать данные, вы можете просто показать простую страницу HTML, и после того, как ваша работа будет сделана, вы можете удалить файл с сервера. Это означает, что вы создадите файл на лету и удалите его после варианта использования.

0 голосов
/ 10 июня 2020

для Q3 вы можете использовать «параметр внешнего интерфейса», например:

ПРИМЕЧАНИЕ 1: я использую angularJS

ПРИМЕЧАНИЕ 2: $ scope.editor - это мой виноград Js экземпляр

Функция для получения HTML + CSS inline 

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

В вашем редакторе Grapes Js добавить новую опцию для функции «Загрузить HTML файл» 

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



}
0 голосов
/ 11 мая 2020

Я нашел решение: я использовал следующую таблицу: 

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

In 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 в значении столбца, чтобы идентифицировать определенную строку для вашей страницы, так как у вас также может быть несколько страниц. Я написал самые базовые c функции, то есть: я показал только вставляемую часть без использования запроса на обновление в случае, если ожидаемая строка для определенной страницы уже существует в БД. Что касается загрузки, вы должны использовать page_id, чтобы получить определенную строку. Эту часть я также не показывал, оставляя ее на ваше усмотрение.

NB: я пришел к решению из q вопроса GitHub здесь .

РЕДАКТИРОВАТЬ: Что касается Q3) , решение:

Проверить виноград js -plugin-export для решения на стороне клиента. Поскольку html и css сохраняются в базе данных, вы также можете делать то же самое, что и плагин, используя скрипт на стороне сервера. Вы можете использовать что-то вроде file_put_contents.

...