Is it possible to customize a block which load data from database
Sure, but in that case, I'd suggest you create a custom component. Here an example/pseudo-code of triggering an async function for changing the component content
Read full answer below ↓Question
For example, I want to create a complex custom navbar block. It has several first level navigations, and each of one also has several second level navigations. The data of navbar is loaded from database. And when I drag it to the canvas, I can modify properties in trait to change the data navbar loaded. Also, when I export template, I want the code is just html, not js contains ajax request, something like server side rendering.
Is it possible?
Answers (1)
Sure, but in that case, I'd suggest you create a custom component.
Here an example/pseudo-code of triggering an async function for changing the component content
editor.DomComponents.addType('my-custom-component', {
model: {
defaults: {
endpoint: 'http://A', // some prop for the trait
traits: [
{
type: 'select',
name: 'endpoint',
changeProp: 1,
options: [ 'http://A', 'http://B' ],
}
]
},
init() {
this.listenTo(this, 'change:endpoint', this.refreshContent);
this.refreshContent();
},
async refreshContent() {
const { endpoint } = this.attributes;
const response = await fetch(endpoint);
...
let result = '';
// ... Build the HTML result from the async response
...
this.components(result);
}
}
});
Related Questions and Answers
Continue research with similar issue discussions.
Issue #3136
Create one more key in JSON
{ "type": "text", "status": "hovered", "content": "Insert your text here", "attributes": { "id": "ixx2" }, "activeOnRender": 0, "open": fal...
Issue #966
[QUESTION] How to load external CSS file into Grapes Editor?
Hey, During my editor = grapesjs.init(), I want to load an external CSS file into the canvas using @import url(...). So when I use my custo...
Issue #3406
How to create a custom storage manager, it doesnt set saved data from canvas, after reloading the page
Hello everyone, i want to save data from canvas to redux store, and it works, but after reloading the page, storage load method , doesnt se...
Issue #3251
How can I specify position of dropped element ?
I want to specify the position of dragging element. for example, if I have a header block which no matter where you drag, it should be plac...
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 →Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.