javascript - GrapesJS - I can't load saved template from database
one text
I am currently working on a HTML/PHP/JS application where I am integrating a GrapesJS editor instance. My instance is displaying very well, adding blocks as well and saving to a MySQL database (JSON format + inlined-html).
When I want to access the template corresponding to the identifier saved in the database, I can't load the elements saved, in the editor. On top of that, I get a JSON syntax error on the backbone.js file.
How can I display my template in my editor?
Instance GrapesJS + save command :
<script type="text/javascript">
var id = document.getElementById('message').value;
var listeid = document.getElementById('liste').value;
var editor = grapesjs.init({
container: "#editor",
showOffsets: 1,
fromElement: true,
height: '100%',
noticeOnUnload: 0,
allowScripts: 1,
autosave: false,
autoload: 1,
storageManager: {
type: 'remote',
contentTypeJson: true,
id: 'gjs-',
autosave: false,
autoload: true,
urlStore: '/app/controller/grapesjs_save.php?id=' + id, //POST
urlLoad: '/app/controller/grapesjs_load.php?id=' + id, //GET
contentTypeJson: true,
storeComponents: true,
storeStyles: true,
storeHtml: true,
storeCss: true,
headers: {
'Content-Type': 'application/json'
}
},
selectorManager: {
componentFirst: true
},
plugins: ['grapesjs-component-code-editor', 'grapesjs-parser-postcss', 'grapesjs-preset-newsletter',
'grapesjs-component-countdown', 'grapesjs-custom-code', 'grapesjs-plugin-export'
],
pluginsOpts: {
'grapesjs-preset-newsletter': {
modalTitleImport: 'Importer votre template',
modalTitleExport: 'Exporter le template',
},
'grapesjs-custom-code': {
blockLabel: 'Code personnalis?�',
},
'grapesjs-component-code-editor': {
htmlBtnText: 'Appliquer',
cssBtnText: 'Appliquer',
cleanCssBtnText: 'Supprimer',
},
},
});
/** Ajout de la commande de sauvegarde dans la DB **/
editor.Commands.add('save-db', {
run: function(editor, sender) {
sender && sender.set('active', 0); // turn off the button
editor.store();
//storing values to variables
var htmldata = editor.getHtml();
var cssdata = editor.getCss();
var htmlWithCss = editor.runCommand('gjs-get-inlined-html');
var json = JSON.stringify(editor.getComponents());
console.log('Complete JSON:', json);
$.post("/app/controller/grapesjs_save.php", {
//you can get value in post by calling this name
"id": id,
"listeid": listeid,
"htmlWithCss": htmlWithCss,
"json": json,
success: function() {
Swal.fire({
title: "Email enregistr?� !",
icon: 'success',
html: "<a href='/app/message.php?test=" + id +
"' class='btn btn-sm btn-block btn-primary'><i class='fa fa-eye'></i> Tester le rendu</a>" +
"<a href='/app/sending.php?mailid=" + id + "&listeid=" +
listeid +
"#man' class='btn btn-sm btn-block btn-primary'><i class='fa fa-calendar'></i> Programmer un envoi manuel</a>" +
"<a href='/app/sending.php?mailid=" + id + "&listeid=" +
listeid +
"#auto' class='btn btn-sm btn-block btn-primary'><i class='fa fa-calendar'></i> Programmer un envoi automatique</a>",
type: "success",
showCancelButton: true
});
},
});
editor.on('storage:store', function(e) { console.log('Stored ', e);});
},
});