Hide An element in commands
Question
Hi,
I want to hide a particular element when ever we click a toolbar button
commands: {
defaults: [{
id: 'sub_menu_item',
run: function(editor, senderBtn){
// I want to hide "photostack-1" element
????
????
????
},
}],
}
var domc = editor.DomComponents;
domc.addType('banner_gallery_portion',
{
model: defaultModel.extend({
defaults: Object.assign({},
defaultModel.prototype.defaults,
{
...
toolbar: [{
attributes: {class: 'fa fa-arrows'},
command: 'tlb-move',
},{
attributes: {class: 'fa fa-plus'},
//command: 'tlb-clone',
command:'sub_menu_item',
}],
...
}
})
},
),
view: defaultType.view.extend({
init() {
this.listenTo(this.model, 'change:startfrom change:endText', this.updateScript);
const comps = this.model.get('components');
// Add a basic countdown template if it's not yet initialized
if (!comps.length) {
comps.reset();
comps.add(`
<div class="container">
<section id="photostack-1" class="photostack photostack-transition photostack-perspective">
....
....
</section>
</div>
`
);
}
},Answers (3)
You can access the element from the model
const selectedModel = editor.getSelected();
const elem = selectedModel.view.el.querySelector('#photostack-1');
elem.style.display = 'none';
Thanks..
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 #419
Adding New Elements in commands
commands:{ { id: 'submenuitem', run: function(editor, senderBtn){ const comp = editor.getSelected(); comp.view.el.querySelector('[data-js=s...
Issue #502
Hide a particular component in preview
Hi, Is it possible to hide "BannerOptionsBtn" component when I click preview button. I Used toHTML() function. And when I called editor.get...
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 #1457
[Question]: Custom asset manager background-image in Style Manager
Hello, i want to use custom Asset Manager i am used this solution, ` var assettarget =''; editor.Commands.add('open-assets', { run(editor,...
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.