GrapesJS – Storing HTML on server side

In GrapeJS to save html code of document in database use your own save function (like saveContent() in this example) inside editor’s ‘storage:store’ event method.

Example:

editor.on('storage:store', function(e) {
saveContent(); //your method where you store html content of document in DB using ajax
})

Here is the saveContent() method – (getting html and css content from GrapesJS and sending it to php file to save through ajax)

function saveContent()
{
var iframe = document.getElementsByTagName('iframe')[0];
var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
var frameBody = innerDoc.querySelector('body');
var style = frameBody.querySelector('style');
var htmlContent = frameBody.querySelector("#wrapper");
var html=htmlContent.innerHTML; //get html content of document
var css=editor.getCss(); //get css content of document
$.ajax({
url: "/proposals/ajax/ajax.php",
data :{'html':html,'css':css},
dataType: 'json',
async:true,
type:'POST',
beforeSend: function () {
},
complete: function (data) {
},
success: function(result) {
},
error:function(data) {
}
});
}