Create and Edit Template into Database
@mekamleshk open the Developer Tools and see if the XHR is happening for the urlLoad and what is the response
Read full answer below ↓Question
This is my code to Create a new template and insert the inline html with style into the database :
var editor = grapesjs.init
({
height: '100%',
container : '#gjs',
plugins: ['gjs-preset-newsletter'],
storageManager: {
id:'',
type: 'remote',
autosave: false,
urlStore: '<?php base_url(); ?>/dragdropeditor/dragdrop/add',
contentTypeJson: true,
},
});
editor.Panels.addButton('options', [{
id: 'save',
className: 'fa fa-floppy-o icon-blank',
command: function (editor, sender) {
if (sender)
sender.set('active', 0);
var html = editor.runCommand('gjs-get-inlined-html');
var storageManager = editor.StorageManager;
storageManager.store({"template-data":html})
// editor.store();
alert('Draft');
editor.on('storage:store', function (e) {
console.log('CompleteHTML: ', html);
});
},
attributes: {title: 'Save Template'}
}]);
I am able to insert the template-data into database in this manner :
<table style="width:100%"> <tr> <th>created_at</th> <th>id</th> <th>template-name</th> <th>template-data</th> </tr> <tr> <td>2017-10-05 12:13:09</td> <td>3</td> <td>first</td> <td><a class="paragraph" style="box-sizing: border-box;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</a></td> </tr> </table>My edit template code :
var id = '<?php echo $this->uri->segment('3'); ?>';
var editor = grapesjs.init
({
height: '100%',
container : '#gjs',
plugins: ['gjs-preset-newsletter'],
storageManager: {
type: 'remote',
autosave: false,
urlStore: '<?php echo base_url(); ?>dragdropeditor/dragdrop/add',
urlLoad: '<?php echo base_url(); ?>dragdropeditor/dragdrop/fetch/'+id,
contentTypeJson: true,
},
});
editor.Panels.addButton
('options',
[{
id: 'save-db',
className: 'fa fa-floppy-o',
command: 'save-db',
attributes: {title: 'Draft'}
}]
);
editor.Commands.add
('save-db',
{
run: function(editor, sender)
{
sender && sender.set('active'); // turn off the button
editor.store();
alert('Draft');
}
});
Wonder why its not loading it into urlLoad
@artf @sonnylloyd
Answers (3)
@mekamleshk open the Developer Tools and see if the XHR is happening for the urlLoad and what is the response
I can see this
`created_at:"2017-10-05 13:17:36"
id:"121"
template-data:
<table class="list-item" style="box-sizing: border-box;"><tr style="box-sizing: border-box;"><td class="list-item-cell" style="box-sizing: `border-box;">`
template-name:"first_name"`
@arthuralmeidap
Related Questions and Answers
Continue research with similar issue discussions.
Issue #507
uploadFile being called twice on drop file?
I have an editor initialized as so: If I add an image to the canvas and try to upload a new image by dragging it into the drop area in the...
Issue #998
[BUG] Asset Manager sends empty request when uploading image
Description: GrapesJS editor is initialized in an editor.html file as follows: localhost:9001 is a local IIS server running PHP5. The conte...
Issue #620
Remote Storage
I'm trying to use the remote storage but no success, with the resolved issues I manage to adjust eveything as it best, but editor do not re...
Issue #1985
[BUG] Autosave with remote storage doesn't send network requests
OS: Windows 10 Browser: Chrome 73 GrapesJS version: 0.14.57 I have remote storage configured using this call to grapesjs.init(): While I se...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.
Browse free plugins →Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.
Browse premium plugins →Related tutorials
In-depth guides on the same topic.
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.