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

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

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

快速解答作者 artf

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

阅读下方完整回答 ↓

问题

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

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

我尝试过:

blockManager.get('image').set({
    style:{
        'max-width':'100%'
    }
});

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

var sm = editor.SelectorManager;
var cssComposer = editor.CssComposer;
var sel1 = sm.add('img');
var rule = cssComposer.add([sel1]);
rule.set('style', {'max-width': '100%'});

任何帮助我都会非常感激。谢谢。

回答(3)

artf• 2018年3月4日

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

mbleverage• 2018年3月5日

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

artf• 2018年3月6日

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

相关问答

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

问题 #1566

自定义方块的默认样式

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

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

问题 #382

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

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

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

问题 #384

创建并编辑模板到数据库中

这是我创建新模板并将带有样式的内联HTML插入数据库的代码: “''js VAR Editor = Grapesjs.init ({ 身高:“100%”, 容器:“#gjs”, 插件:['GJS-preset-newsletter'], storageManager: { id...

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

问题 #625

Editor.store();多次开火

你好@all, 我用自定义代码阻止数据流向服务器。一切正常,但 editor.store();第一次点击一次,第二次点击两次,第三次点击三次......诸如此类。 在storageManager ->类型中我用的是“remote”——如果用“本地”,拳头点击就没有效果。 有人能...

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

与此问题匹配的付费插件

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

查看全部插件

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

免费方案

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

浏览免费插件 →
高级方案

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

浏览高级插件 →

相关教程

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

全部教程 →

浏览插件分类

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