为特定的 CSS 规则添加样式扇区

Question

嘿，@artf， 你能帮忙吗？ 我想禁用用户选择包装块（主体），但仍然想让他们为它做样式。 所以我在考虑添加一个自定义扇区，它会显示所有区块，但该扇区应用的样式会专门应用到CSS规则中。 有没有办法实现这一点？我花了一些时间研究代码，但没找到方法

arthuralmeidap · Accepted Answer

我的做法有几个缺点，但因为这个应用没有用样式管理器的选择器，看看我怎么做的;

我在新区域添加了一个自定义的“目标”属性。我开始听每个扇区的“change：open”，如果扇区有我的新自定义道具，我就用“编辑器”设置我想要的目标css规则。StyleManager.setTarget（'.my-class'， { targetIsClass： true }）;' 否则我会设置当前选中的块，比如“editor.StyleManager.setTarget（editor.getSelected（））;'

arthuralmeidap · Answer

举个例子：

用户已选择文本块。在样式管理器面板上，会显示为现在的样子。CSS选择器应用到它上，像General或Decorations这样的板块用来做样式，另外还有一个全局部分，为特定CSS规则应用样式

artf · Answer

是的，我觉得是可行的，你应该在编辑器加载时手动添加一个新的扇区，输入更改时更新包装风格 'editor.getWrapper（）.addStyle（{ color： yourInputEl.value }）'，或者如果你需要特定的 CSS 规则，可以更新'editor.CssComposer.setRule（'.your-class'， { color： '...' }）;`

为特定的 CSS 规则添加样式扇区

问题

回答（3）

相关问答

CSS 媒体查询问题

CssComposer - 移除未使用的类

如何在所有生成的API中添加！重要性

移除上传图片选项，并关闭默认图片的（x）图标

与此问题匹配的付费插件

相关教程

🚀 Introducing GrapesJS Email Blocky: The Ultimate Email Block Library for GrapesJS

浏览插件分类