PageKit — 可自托管的 GrapesJS 建站工具,附完整源码。 获取抢先体验

问题 #1041✓ 已解决提出于 2018年4月13日作者 tommedema4 个反应

可选地从StyleManager中插入样式,且 !重要

快速解答作者 tommedema❤ 2

在#1056上加入了PR

阅读下方完整回答 ↓

问题

我想推荐一个可以通过配置 styleAsImportant: true 启用的功能(默认为false,即不破坏)。我原以为通过配置cssComposer就能实现,但现在我了解到事实并非如此(详见下文解释)。 我使用的模板有时是从过度使用!important标志的预编译器生成的。例如,模板中的按钮样式可能如下: 因此,用 Grapes 来样式这个按钮完全没有效果。让它在 grapes上运行的最明显方法是确保: 1) grapes 造型还具有 !important (此特征) 2) grapes 样式是在模板样式之后(应该已经是这样了,对吧?) 我猜正确的方法是让 [CssRule.js#36](https://github.com/artf/grapesjs/blob/dev/src/csscomposer/model/CssRule.js#L36)可配置。我尝试用以下方法设置这个 important 标志: 但这似乎没有任何影响。此外,当我硬编码它 true 代码时,我发现这个实现存在两个问题: 1)它还会为模板中的规则添加 !important 。这个功能建议专门针对通过样式管理器手动添加的规则,因为这些规则应该覆盖模板的样式。否则没有额外价值。 2)如果模板规则中已有重要语句,则会加 !important 两次,导致渲染失败,因为CSS属性无效: <img width=“32...

回答(3)

👍 最有帮助tommedema• 2018年4月20日

在#1056上加入了PR

artf• 2018年4月19日

@tommedema组件和 CSSS 规则实现了 Styleable,因此无论如何都能使用。你的意思是我们得写插件来监听这些事件,并为组件添加额外的样式? 不是额外,而是覆盖该模型触发的样式,例如。 “''js 例如,你的配置 cont styleImportance = 1; // ... editor.on('styleable:change', (model, property) => { const value = model.getStyle()[property]; console.log(“有”称号“,财产,价值); 如果(styleImportant) { model.add...

相关问答

通过相似的问题讨论继续研究。

问题 #896

媒体查询规则在画布中被类规则覆盖

你好@artf, 我在用不同设备配置测试一个模板时发现了一个问题,这些配置本应触发媒体查询。我的模板生成的样式如下: “JavaScript [ { “选择者”:[ { “name”:“row”, “label”:“row”, “类型”:1, “active”:true, “p...

3 个回答更新于 2019年9月17日

问题 #1374

默认组件属性

有没有办法更改组件的默认属性? 我希望几乎所有内容都是“可复制:false,可调整尺寸:false,可拖拽:false”,除非加载的组件特别提供“data-resizable=true”。 所以基本上我想把一些组件列入白名单来启用这些功能,而不是黑名单。 这可行吗?

3 个回答更新于 2024年5月1日

问题 #943

:勾选框特性未勾选时不移除属性

当 html 属性为真或假时,应该要么存在,要么不存在。 例如, required。HTML5 中没有这个值。 有效(非必需): 有效(必填): 无效(非必需): 无效(必填): 当 HTML grapes 在 Grapes 外渲染并检查输入是否需要时,这个方法失败了,因为 C...

3 个回答更新于 2020年5月6日

问题 #843

CssComposer - 移除未使用的类

你好@artf, 我用 grapesjs-preset-newsletter 导入一个 html,里面有 '' 标签里有一些 css 类<style>。 导入后,当我调用“editor.getCss()”时,之前添加的一些类现在缺失了。 我检查过那些CSS类在任何地方都没被使用...

3 个回答更新于 2020年5月6日

与此问题匹配的付费插件

根据问题关键词和标签相关性精选,助你更快交付。

查看全部插件

正在加载付费插件推荐……

免费方案

在以下平台查看开源 GrapesJS 插件: GitHub 或在我们的免费目录中快速搜索。

浏览免费插件 →
高级方案

高级插件提供支持、定期更新和生产就绪的功能——为你节省数天的集成工作。

浏览高级插件 →

相关教程

关于同一主题的深入指南。

全部教程 →

浏览插件分类

直接跳转到市场上的插件分类页面。