：预览模式和自动组件边界切换

Question

又见面了:) 我们团队最近开始定制编辑器并移除网页预设，可能发现了一些与预览模式相关的bug：退出预览模式时，如果默认的“选项”面板已被移除，或者“sw-visibility”按钮已被移除（来自[这里]（https://github.com/artf/grapesjs/blob/dev/src/commands/view/Preview.js#L52），如果是“editor”，则会触发错误。Panels.getButton（'options'， 'sw-visibility'）' 结果为 null，参见 #2589） 一个建议的解决方案是循环浏览面板集合（通过“editor.”检索）。Panels.getPanels'）来查找“sw-visibility”按钮，并添加空检查以避免错误。 ---当“预览”和“sw-visibility”按钮位于同一面板时，#2589引入的行为会被破坏，这似乎来自['ButtonView's'active“变更监听器]（https://github.com/artf/grapesjs/blob/dev/src/panels/view/ButtonView...

artf · Accepted Answer

无论如何，预览运行执行时按钮>按钮都已经被禁用了，对吗？ 哦，对了 🤦 ♂从你对链接问题的回复来看，我理解这种行为是有意为之，所以也许解决办法就是像你说的那样，把两个按钮的上下文分开？ 好吧，这可能真的有效......因为处于不同的上下文，其他按钮不会阻止它，你也可以完全不依赖按钮（正如你说的，我可以把它放在另一个面板里），而是通过使用 [Commands.getActive API]（https://grapesjs.com/docs/api/commands.html#getactive） 来检查命令的状态。 “''js 如果（编辑器中的“SW-可见性”。Commands.getActive（）） { SW-可见性已激活 } ```

artf · Answer

感谢@mcottret所有的参考资料，写得真好:)当预览和 sw-visibility 按钮在同一面板时，#2589 引入的行为会被破坏，这似乎来自 ButtonView 的活跃变更监听器，该监听器会禁用面板中的所有活动按钮。所以如果预览被激活，它会在执行命令前关闭 sw-visibility 按钮，之后会破坏当前的检查。 我认为在这种情况下，我们应该先通过检查 sw-visibility 是否激活来创建一个变量标志，然后再做： https://github.com/artf/grapesjs/blob/85b7b82103e12fb01a3700b1002a57a7b60ccaf1/src/commands/view/Preview.js#L20 然后在“停止”时，检查开始时存储的变量（而不是按钮）

mcottret · Answer

谢谢你的回复@artf！ 抱歉，我不太确定该怎么做，据我了解，[active change listener]（https://github.com/artf/grapesjs/blob/dev/src/panels/view/ButtonView.js#L101）是在“Preview”的“run”之前执行的，所以“sw-visibility”按钮无论如何都应该在执行“Preview”的“run”时被禁用，对吗？ 根据你对相关问题的回复（https://github.com/artf/grapesjs/issues/2273#issuecomment-600615794），我理解这种行为是有意为之，所以也许解决办法就是像你建议的那样，把两个按钮的上下文分开？ --- 你怎么看第一点？以及我提出的解决方案？我已经添加了保护措施，以防“sw-visibility”按钮在[本PR]（https://github.com/artf/grapesjs/pull/2669）中被移除，但它无法处理“sw-visibility”按钮出现在另一个/自定义面板（id不等于“options”）的情况。

：预览模式和自动组件边界切换

问题

回答（3）

相关问答

：预览模式下自定义面板未被隐藏

StopCommand（'preview'）

移除提示时，其 css 不会被移除

：面板按钮视图中，“禁用”而非“active”类

与此问题匹配的付费插件

浏览插件分类