Adding New Elements in commands
Read more about how components work You have to add components via model (eg. model.get('components').add('<div>...</div>')) if you want them to be selectable (you can't select elements without models). Like you did, it's just a static content for the editor
Read full answer below ↓Question
commands:{ { id: 'sub_menu_item', run: function(editor, senderBtn){
const comp = editor.getSelected();
comp.view.el.querySelector('[data-js=submenu_container]').innerHTML += '<a class="navbar-menu-link">Sub Menu Item</a>';
},
},
}
This can add Sub Menu Item to the container. But I am unable to select it. I tried with AppendChild also. But the result is same. I should be able to edit the newly added component. Pls help me
Answers (2)
Read more about how components work You have to add components via model (eg. model.get('components').add('<div>...</div>')) if you want them to be selectable (you can't select elements without models). Like you did, it's just a static content for the editor
This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
Related Questions and Answers
Continue research with similar issue discussions.
Issue #400
Hide An element in commands
Hi, I want to hide a particular element when ever we click a toolbar button commands: { defaults: [{ id: 'submenuitem', run: function(edito...
Issue #814
[QUESTION] Disable selectable, hoverable and editable options when Mobile view is on.
Hi, I want to disable to select, hover or edit the components of the editor when the Mobile view is on. I have tried using below code. But...
Issue #1487
Load from Database
I've got an issue with loading the lory-slider from my mysql db. When i load it back in, the functionality is gone, i cant slide left or ri...
Issue #1863
Adding new components to Block Manager
I'm trying to add multiple components which are in my canvas into the block manager but I believe because of an id issue they're not visibl...
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.