GrapesJS – Storing HTML on server side

| By Webner

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.


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
url: "/proposals/ajax/ajax.php",
data :{'html':html,'css':css},
dataType: 'json',
beforeSend: function () {
complete: function (data) {
success: function(result) {
error:function(data) {

Leave a Reply

Your email address will not be published. Required fields are marked *