Adding new components to existing ones
Question
Hello,
I would like to ask if there's any existing support or API for adding new components to an existing component list (e. g. after fetching or generating them dynamically). I'm talking about something like this:
editor.addComponent({
parent: 'parent_id',
component: '<p>New child component</p>'
})
I've studied the documentation and the closest I got is the addComponents() function. Unfortunately, this function specifies no target where the new component should be placed.
I'm asking this because my intention is to use GrapesJS in a real-time collaborative way and sending the whole HTML representation back and forth after every user action is just too slow.
Best regards, Michal
Answers (3)
Unfortunately I am not aware of a simple way to get a specific component object without recursively iterating through them to find the one you want, but that sounds like a great idea!
You might be able to do something like this to get all components and then filter for the one that you want (this code is not fully tested, but hopefully can get you started in the right direction if you're stuck):
function getAllComponents(component) {
component = component || editor.DomComponents.getWrapper();
var components = component.get("components").models;
component.get("components").forEach(function(component) {
components = components.concat(getAllComponents(component));
});
return components;
};
`getAllComponents().filter(function(component) { return component.cid == "someID"; } )[0]`Thanks for your replies, I think my question has been answered and there's not much else to add. I'm closing this now, however the find() method would be a welcome addition to this awesome framework.
Hi @baxxos,
Are you trying to do something like this: https://jsfiddle.net/ztqsugaw/3/?
Related Questions and Answers
Continue research with similar issue discussions.
Issue #1588
[QUESTION]
Hi guys and thank you for your magnificent work and this API! I have a question about the box, which wraps all components after saving. For...
Issue #1709
[QUESTION] Is it possible to affect child component's styling through parent component's style manager?
Hello there! Awesome project and thanks for your contribution. I would like to know if it is possible to change the styling of a child comp...
Issue #501
Add custom CSS rule
Hi! I would like to add a CSS rule that, for instance, changes appearance of a component based on some attribute. I.e. Is there a way of do...
Issue #2097
New views question
Hello all, Is there is any simple way to add a new view right next to the style manager? I would like to create a new view that will show s...
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.