GrapesJs和PHP-存储和加载数据以在编辑器和HTML页面中显示 [英] GrapesJs and PHP - store and load data to show in editor and as HTML page as well
问题描述
我正在使用 GrapesJS 构建一个简单的网页.
I am using GrapesJS to build a simple webpage.
我通过以下方式将脚本包含在head部分中:
I included the script in the following way inside head part :
<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里面，我有:
So I get in the blocks panel a block namely Simple block which I can drag and drop on the editor. When ever any change is made then the autosave is trigerred with an ajax call to save.php file. Inside save.php, I have:
$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开发者工具的网络"标签中，我可以看到:
But in Chrome developer tool network tab, I can see :
尚不清楚应将哪些有效负载变量保存在数据库中，以及 如何 .我改用$content_found= file_get_contents('php://input');来获取全部内容.
It is not clear what payload variables I should save in database and how . I used $content_found= file_get_contents('php://input'); to get the full content instead.
将其保存到DB中之后，在页面刷新时，我使用load_now.php加载页面.在load_now.php里面，我有:
After saving it into DB, on page refresh, I load the page with load_now.php. Inside load_now.php, I have :
$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;
但是编辑器没有显示已保存的数据.
But the editor shows no saved data.
我非常确定我保存和检索数据的方式不正确. 所以要点是:
I am pretty sure that the way I save and retrieve data is not correct. So points are:
问题1)我应该在数据库中保存什么?以及如何从ajax有效负载中或以任何其他方式获取变量或数据?
Q1) What things should I save in database ? And how can I get the variables or data from ajax payload or in any other way ?
第二季度)如何在重新加载页面后将保存的数据显示到编辑器中?
Q2) How can I show the saved data into the editor after page reload ?
在编辑器中，我看到一个带有眼睛图像的预览选项，可以在没有任何编辑器的情况下显示HTML页面.
In the editor, I see a preview option with an eye image that can show me the HTML page without any editor.
问题3)将数据保存到数据库后，如何仅将其显示为HTML页面而不显示在任何编辑器中?
Q3) After saving data into database, how can I show the data simply just as a HTML page and not inside any editor ?
推荐答案
我找到了解决方案: 我使用了下表:
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 ;
在Javascrpt中，storageManager部分的更改方式如下:
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'
}
在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来标识页面的特定行，因为您也可以有多个页面.我写了非常基本的功能，即:如果DB中已经存在某个页面的预期行，我只会显示插入部分而不使用更新查询.至于加载部分，您应该使用page_id来获取特定的行.这部分我也没有显示出让您保持正常的逻辑理解.
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.
NB:我从q GitHub问题此处来到解决方案.
N.B.: I came to the solution from q GitHub question here .
关于 Q3)，解决方案是:
As to Q3) , the solution is:
查看 grapesjs-plugin-export 以获取客户端解决方案.由于html和css已保存到数据库中，因此您也可以使用服务器端脚本来执行插件所做的相同操作.您可以使用file_put_contents之类的东西.
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.
这篇关于GrapesJs和PHP-存储和加载数据以在编辑器和HTML页面中显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
