问题 #922💬 已回答提出于 2018年3月2日作者 mbleverage0 个反应

问题:为组件添加默认样式

快速解答作者 artf

你对方块的更改不起作用,因为你并没有改变实际的组件(只改变了方块的属性) “''js 编辑。BlockManager.get('image').get('content').style = { 'max-width':'100%' } 添加自定义CSS的一种更简单的方法可能是这个 “''js editor.addComponents('<style> ... </style>');

阅读下方完整回答 ↓

问题

我一直在努力将葡萄糖整合进我正在开发的一个新开发项目中。 我在文档和维基论坛上取得了很大成功,但遇到了一些问题,希望有人能帮我解决。 我只用移动端视图,默认设备设置为移动端,并关闭了更改选项。

当我插入图片时,我希望默认的CSS能包含最大宽度:100%,因为如果我在移动视图加载一张大图片,会得到比我看的屏幕大得多的图片。

我尝试过:

blockManager.get('image').set({
    风格:{
        “最大宽度”:'100%'
    }
});

但我意识到这可能是错误的用法,可能只有宽度(不是最大宽度)才适用。 我也尝试过用cssComposer,但没有成功。

var SM = 编辑。选拔经理;
var cssComposer = 编辑器。Css作曲家;
var sel1 = sm.add('img');
var rule = cssComposer.add([sel1]);
rule.set('style', {'max-width': '100%'});

任何帮助都将不胜感激。 谢谢。

回答(3)

artf2018年3月4日

你对方块的更改不起作用,因为你并没有改变实际的组件(只改变了方块的属性) “''js 编辑。BlockManager.get('image').get('content').style = { 'max-width':'100%' } 添加自定义CSS的一种更简单的方法可能是这个 “''js editor.addComponents('<style> ... </style>');

mbleverage2018年3月5日

谢谢! 我用以下方法让它正常工作: 'protectedCss: 'img {最大宽度:100%;}',' 我也有同样的问题,视频和iframe(YouTube用)被丢到比屏幕尺寸更大的模板上,而保护CSS方案对这些问题没用。 有什么建议吗?

artf2018年3月6日

'protectedCss' 已经加载了,所以 CSS 就在这里,如果它不起作用,可能是你的 CSS 方法不对

相关问答

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

问题 #1566

自定义方块的默认样式

你好,我正在用GrapesJS做Prestashop网站上的页面构建器。 这个想法是用自定义块设置默认模板存储在数据库中。商店和模板加载都正常。我的问题是,我只想使用我创建并添加到BlockManager中的自定义块,但使用默认CSS。我可以放 CSS,但默认如何设置这些块的媒...

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

问题 #1733

如何移除由添加块管理器脚本添加的脚本标签

你好@artf 我想导出最终/基于制作的HTML内容,但不包括脚本(只导出由块管理器添加的脚本)。 假设我用block-manager添加一个新块,比如 现在当我把这个块放进编辑器时,它会在文档里创建一个 div 标签,同时还会生成类似的脚本, 所以,当我尝试用“editor....

3 个回答更新于 2020年2月4日

问题 #1471

Block管理器与形象

嗨!我用这个代码添加一个新块: blockManager.add(“image”, { 标签:“形象”, 分类:“基础”, 属性:{ 类:“GJS-fonts gjs-f-image” }, 内容:{ 风格:{ 颜色:“黑色” }, 类型:“图像”, activeOnRende...

3 个回答更新于 2019年10月5日

问题 #382

把 HTML 和内联 CSS 存储在 Editor.Store()

我正在尝试存储html和内联css,请问你能告诉我如何传递给 editor.store()函数吗? @artf “''js 编辑。命令.add' (“save-db”, { 运行:函数(编辑器,发送者) { 发送者 & 发送者.set('active');关掉按钮 var ht...

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

与此问题匹配的付费插件

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

查看全部插件

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

免费方案

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

浏览免费插件 →
高级方案

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

浏览高级插件 →

相关教程

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

全部教程 →

浏览插件分类

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