如何禁用样式编辑器

Question

我正在试验 grapes js page builder with the webpage 插件。

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

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

Answer 1

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

我还复制并粘贴了 node_modules/grapesjs-preset-webpage/src/index.js 并编辑它以导入我的 panels.js 文件。

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

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

Answer 2

您还可以通过将样式管理器配置的“appendTo”属性更改为不在 DOM

中的新 div 来实现此目的

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

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

How to disable style editor