如何禁用样式编辑器

Question

我正在尝试使用带有网页插件的葡萄 js页面构建器。

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

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

Answer 1

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

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

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

Answer 2

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

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

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

PS。 我还想过使用 CSS 简单地隐藏面板，但这似乎更像是一种黑客攻击。