[QUESTION] Custom type component in production environment
Question
Hi, I have a question, when I create a custom type component from the editor, what would be the next step to show that component in my application? Currently I am saving the component data in firebase with the firestore plugin, the attributes that are stored in the object are the following: gjs-assets, gjs-components, gjs-css, gjs-html and gjs.styles.
What would be next if I want to use these components in my production environment? Should I use a javascript framework or library? or maybe the same grape editor without the ability to edit, thanks.
Answers (3)
onRender simply specifies what should happen when you successfully place a component onto the canvas, whereas script is code that will be generated in your html inside script tags.
Something like:
<script>
//...
var items = document.querySelectorAll('#someid');
for (var i = 0; len = items.length; i < len; i++) {
(function(){
//minified version of script in component definition
})()
}
//...
</script>
I think in a production environment all you need is the html and css code generated by grapesjs.
I understand that part, but if I want to render the component I have created it doesn't work. I'll explain a little, I have created a type of component that renders data from an endpoint, if I use the html and css code it doesn't work.
Custom Component Type
` editor.DomComponents.addType('group', {
model: {
defaults: {
// The tag name that will be used in the final code
tagName: 'div',
attributes: "",
// You would use traits to customize custom properties
traits: [
{
type: 'select',
changeProp: 1,
name: 'customProp',
options: []
}
]
},
init() {
let trait_customProp = this.get('traits').where({ name: 'customProp' })[0];
trait_customProp.set('options', start_options);
if (Object.keys(this.getAttributes()).length === 0) {
console.log("Objeto init vacío");
} else {
trait_customProp.set('value', this.getAttributes().value);
}
this.on('change:customProp', () => this.view.onRender());
}
},
view: {
// eg. You can customize the tag in the canvas
// By default, the view will use the same tag of the model
tagName: 'div',
async onRender() {
//Retrieving trait value
let trait_value = this.model.get('traits').where({ name: 'customProp' })[0].attributes.value;
if (trait_value === "") {
console.log("Attribute's value is empty");
} else {
console.log(`Attribute's value: ${trait_value}`);
this.model.addAttributes({ value: trait_value });
//Rendering Data
try {
for (option of start_options) {
if (Number(trait_value) === option.value) {
this.$el.empty();
let response = await axios.get(`http://localhost:8100/dmxConnect/api/documents/retrieveXcollection.php?idcollection=${trait_value}`);
this.model.addAttributes({ data: response.data.query1 });
if (response.data.query1.length > 0) {
//Muchos data, inentendible!
this.model.getAttributes().data.forEach(res => {
JSON.parse(res.data).forEach(doc_data => {
//console.log(doc_data.userData);
this.$el.append('<h1>' + doc_data.userData[0] + '</h1>');
});
});
} else {
this.$el.append(`<h1>404 ${option.name}</h1>`);
}
}
}
} catch (e) {
console.log(e);
}
}
}
}
}
);
// A block for the group type
editor.BlockManager.add('test-render', {
label: 'Test render',
content: {
type: 'group'
},
category: 'Custom'
});`Related Questions and Answers
Continue research with similar issue discussions.
Issue #2189
[Question] How to add "Ordered/Unordered List" option in rte/custom block
Hi I'm trying to create an ordered list with grapesjs. I tried adding the following to the rte: And this works if my page is pre-filled wit...
Issue #3409
[QUESTION] Custom component property that is not a trait
I would like to create a custom component with a property that will be updated by specific code, but I don't want this property to be visib...
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 #2763
GrapesJs and PHP - store and load data to show in editor and as HTML page as well
I am using GrapesJS to build a simple webpage. I included the script in the following way inside head part : I am using GrapesJS to build a...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.