javascript - GrapesJs 和 PHP - 存储和加载数据以在编辑器和 HTML 页面中显示
问题描述
我正在使用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
,我可以将它拖放到编辑器上。每当进行任何更改时,都会通过对文件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 开发者工具网络选项卡中,我可以看到:
目前尚不清楚我应该在数据库中保存哪些有效负载变量以及如何保存。我曾经$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 页面而不是在任何编辑器中?
解决方案
对于 Q3 ,您可以使用这样的“前端选项”:
注意 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 编辑器中为“下载 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);
}
}
推荐阅读
- python - python: nan_policy=omit 对 scipy.stat.spearmanr 有什么作用
- ldap - Symfony4 对 ldap 服务器进行身份验证并从数据库中获取用户信息
- jquery - DataTables 在本地工作,托管时出现 404 和 Ajax 错误
- python - Tkinter 比例小部件未实时更新
- python - 从 URL 中带有“#”的网站抓取数据时出错
- javascript - TypeError:在非对象 JQUERY 上调用 Object.defineProperty
- javascript - 将 JS 对象附加到 DOM
- java - 如何在 Spring JUnit 测试中的休眠自动生成之前初始化数据库?
- python - Keras CNN-RNN 不会训练。可以使用一些调试
- powershell - powershell 命令中的等效 /s /V"/qn