如何禁用样式编辑器

【问题标题】：How to disable style editor如何禁用样式编辑器
【发布时间】：2020-10-26 16:19:02
【问题描述】：

我正在尝试使用带有webpage 插件的grapes js 页面构建器。

问题是我无法找到一种方法来完全禁用他们拥有的样式编辑器（当您单击元素时我设法不自动选择样式管理器）但我想完全删除用户编辑现有样式。

基本上，用户只能拖动现有块并编辑其中的文本，而不能以任何方式设置它们的样式。

【问题讨论】：

【解决方案1】：

我解决此问题的方法是复制并粘贴 node_modules/grapesjs-preset-webpage/src/panels/index.js，然后简单地注释掉定义我想要删除的面板的代码。

我还复制并粘贴了 node_modules/grapesjs-preset-webpage/src/index.js 并对其进行编辑以导入我的 panel.js 文件。

这肯定不是最好的方法，但现在可以了。

PS。我也想过简单地使用 CSS 隐藏面板，但这似乎更像是一种 hack。

【讨论】：

【解决方案2】：

您也可以通过将样式管理器配置的“appendTo”属性更改为不在 DOM 中的新 div 来实现此目的

const editor = grapesjs.init({
 styleManager: {
   appendTo: document.createElement('div'),
 },
 ...
})

这样，样式管理器就不会被渲染。

【讨论】：