Hide a particular component in preview
You can make use of command events inside your component, eg.
Read full answer below ↓Question
Hi, Is it possible to hide "BannerOptionsBtn" component when I click preview button. I Used toHTML() function. And when I called editor.getHtml() it is returning the html as expected, but when I click preview button the "BannerOptionsBtn" appears. Here is the code. Please Help me domc.addType('bannergal', { model: defaultModel.extend({ defaults: Object.assign({}, defaultModel.prototype.defaults, { type: 'bannergaltype', tagName: 'div', toolbar: [], components: [{ tagName: "div", type: "button", components: [{ classes: ["BannerOptionsBtn"], tagName: "button", type: "button", content: 'Options'...
Answers (3)
You can make use of command events inside your component, eg.
editor.on('run:preview', () => { console.log('preview ON') })
Thanks for the help.
And please send the command event that is triggered when we click "Hide Preview".
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 #1643
Render New Html to editor with Action of Traits
I create New custom Tool with (default html) when draged , and i also create traits for this component when i click on checkbox excuting fu...
Issue #898
editor.getHtml() outside the iframe of grapesjs.
How should I get the getHtml() outside the grapesjs editor. I have a save button outside the iframe of editor. I am not getting the current...
Issue #563
Table <thead> and <tbody> tag gets Omitted
Hello, There is new issue with GrapesJS (maybe). I've created new component using bm.add() in which I've used a table element with <thead>...
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.