PageKit — 可自托管的 GrapesJS 建站工具，附完整源码。 获取抢先体验
已收录 3,464 个 GitHub 问题 — 370 个已解决 · 90 个待解决 搜索、筛选并探索经过实战检验的答案。
找到 3,464 个问题
你好，@artf，我创建了自定义组件，当我把组件拖到画布时，需要显示4列具有特定样式的列，每列里又有一些带有特定样式的html内容，而且我又必须让用户编辑内容或图片，但不能编辑样式。能举个例子吗？有人能做过类似的功能吗？目前我已经为列和静态内容创建了一个自定义类型，但目前还卡在剩余功能上。请帮忙实现这个目标
pouyamiralayi
@PKRekha你可以通过将“styleable”属性设置为“false”来防止样式，并且对于拥有4个组件类型实例，这样做就行了： 干杯！
Jogai
请调整标题并遵循本期模板的内容
PKRekha
你好，@artf，我创建了自定义组件，当我把组件拖到画布时，需要显示4列具有特定样式的列，每列里又有一些带有特定样式的html内容，而且我又需要让用户编辑内容或图片，但不能编辑样式。能举个例子吗？有人能做过类似的功能吗？目前我已经为列和静态内容创建了一个自定义类型，但目前还卡在剩余功能上。请帮忙实现这个目标
简单 grapesjs [project]（https://jsfiddle.net/qax3Lfoe/） 添加了一个自定义类： 如果没有设备，且用户将类添加到选择器字段中，设置扇区的字体大小属性会正确更新。 <img width=“1440” alt=“截图 2020-02-19 凌晨2点33分50分” src=“https://user-images.githubusercontent.com/32596493/74790527-7b0efe00-52c0-11ea-9999-a98fa654de56.png”> 如果设备数量很少（其中一个是类似的） 用户将类添加到选择器字段设置扇区时，其字体大小属性没有正确更新。 <img...
artf
不幸的是，这是因为 ['getComputedStyle']（https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle） 的工作方式，它返回已解析的值，所以用 'rem' 而不是 'px' 会“混淆”这个值。 目前我没有解决这个问题的计划，但我非常希望能有个永久居民，或者至少给我一个解决办法
artf
这应该会在最新版本中修复 https://github.com/artf/grapesjs/releases/tag/v0.18.1
![图片]（https://user-images.githubusercontent.com/26068332/74738689-250a6e00-5260-11ea-88d9-fea8cd2baa77.png） 我自定义性质有一个倒计时，类型是datetime-local。当我点击元素时，这个问题就会出现。 我的代码： ![图片]（https://user-images.githubusercontent.com/26068332/74738845-6b5fcd00-5260-11ea-8e0d-7991189b1b23.png） 倒计时也是如此：https://jsfiddle.net/apaoa5o2/14/
artf
和 https://github.com/artf/grapesjs/issues/2615 一样
所以我用按钮自定义了倒计时 ![图片]（https://user-images.githubusercontent.com/26068332/74738370-6f3f1f80-525f-11ea-963e-c6ddfa46dfb3.png） 按钮设置了倒计时，但我想让按钮像点击时的其他元素一样激活。 我的守则： ![图片]（https://user-images.githubusercontent.com/26068332/74738575-e379c300-525f-11ea-9d64-339a0481acc2.png）
MariusDK
@artf请帮帮我
artf
遗憾的是，默认按键类型只能执行一个指令，所以如果你需要做一些复杂的操作，我建议你自己创建特质 https://grapesjs.com/docs/modules/Traits.html#define-new-trait-type
嘿，@artf 我有多个断点 ![图片]（https://user-images.githubusercontent.com/26068332/74736935-7fa1cb00-525c-11ea-9d33-e30b6bc44ae5.png） 问题是，当我用分辨率（用图标设置）比如411（手机版）时，画布并不总是显示该分辨率中元素的风格。Canvas 使用平板的媒体查询，而不是移动设备管理器中设置的分辨率。 举例：我用的是411分辨率，但优先级是画布显示页面的平板断点。 ![图片]（https://user-images.githubusercontent.com/26068332/74737465-9694ed00-525d-...
MariusDK
@artf请帮帮我
artf
你好@MariusDK我不太确定我是否理解你的问题，你能做一个小的在线演示来更好地展示问题吗？ 也许你说的是画布大小和CSS中实际媒体查询的区别？在这种情况下，你可以更改它们： “''js 900px 是画布的大小，默认情况下会 也可用于CSS媒体查询 编辑。DeviceManager.add（'tablet2'， '900px'， { 你可以用widthMedia选项在CSS中更改媒体查询 宽度媒体：'850px'， }); ```
no-response[bot]
由于我们请求原作者提供更多信息未获回应，本期已自动关闭。仅凭当前期刊中的信息，我们没有足够的信息采取行动。如果您有答案或找到我们需要的答案，请随时联系我们，以便我们进一步调查。
我想在设置图标后面添加一个新按钮。 ![截图：2020-02-18 17-14-16]（https://user-images.githubusercontent.com/54315979/74733431-58ee8f00-5272-11ea-8818-0bab23016209.png） 我用以下代码创建了按钮，但还是不起作用 ' var panelManager = editor.面板; var newButton = panelManager.addButton（“myNewPanel”， { id：“myNewButton”， 属性：{ 标题：“编辑菜单”， 类：“fa fa-sort-desc” }， 活跃：真 });`
pouyamiralayi
[#2350评论]（https://github.com/artf/grapesjs/issues/2350#issuecomment-587744144）
使用 GrapesJS 0.15.10 时，我无法让组件按我预期的方式工作。可能是我的问题，如果是问题，欢迎调整期刊标题。（这是《https://github.com/artf/grapesjs/issues/2195》的后续） 我做了一个笔（希望这样没问题，没看到小提琴模板）来做我的例子：https://codepen.io/jogai/pen/yLNJgLZ?editors=1011 我在 Chrome 和 Firefox 上也看到了同样的行为。 预期有一行的文本不可选择/拖拽/高亮，而是该行的文本可拖拽到另一个组件。 组件的预期属性： Data-GJS-selectable=“false” data-gjs-highligh...
pouyamiralayi
你好@Jogai你还必须在“'中指定”data-gjs-draggable<td>“： 干杯！
Jogai
谢谢。至少这算是改进，但其他属性依然没有被考虑，如果你尝试拖曳（因为拖曳箭头依然显示），它会报错，整个编辑器就变成了坏掉的状态。 我更新了示例。
Jogai
更新了示例。这算是 https://github.com/artf/grapesjs/issues/2195 的后续 我之前以为 draggable 需要 data-gjs- 前缀是错误的，因为没有 component 的 html 部分也没有这个前缀。但子 TD 并不被视为组件的一部分。
GrapeJS 编辑器如何关联 Bootstrap 4 以输出响应式页面？
pouyamiralayi
[自力更生]（https://github.com/kaoz70/grapesjs-blocks-bootstrap4）
你好， 我正在使用 grapesjs 的网页预设插件来创建网页构建器。但如你所见，方块的图标和字体大小都太小了。可能是什么问题？在这里的演示中它们显示得很正常：https://grapesjs.com/demo.html 看到我本地和演示的尺寸对比。 <img width=“233” alt=“截图 2020-02-18 上午11：46 33” src=“https://user-images.githubusercontent.com/11045156/74710810-570dd700-5244-11ea-9a03-a21c1348db8e.png”> <img width=“256” alt=“截图 2020-02-18 1...
artf
只要用CSS修正它们就行了
ahmeds63
不知为何，问题在于将 GrapesJS 编辑器嵌入在一个本身被引导列包围的表单中。所以空间很紧张，GrapesJS 样式表用的是“rem”字体单元来表示fontawesome icons，这个单元会根据窗口大小设置字体大小。我在没有任何引导容器/列的情况下，在整页上渲染了 GrapesJS，效果很好。
ahmeds63
我又遇到了图标大小为三个方块的问题，请查看截图。如你所见，“tooltip”、“custom code”和“typed”图标都很大，而且大小和其他图标不匹配。 <img width=“254” alt=“截图 2020-03-02 12：54 47 PM” src=“https://user-images.githubusercontent.com/11045156/75656113-19b63a00-5c85-11ea-9062-fa185cbcc5c5.png”>
请告诉我，如何防止将一个模块插入另一个模块？ 我用编辑器为网站创建文章的内部结构。不使用 Grapejs 构建模块。所有自定义模块都是通过配置编辑器添加的。BlockManager.add 如果你能告诉我怎么做，我会非常感激。 谢谢！
pouyamiralayi
@dskarasev你可以定义[自定义组件类型]（https://grapesjs.com/docs/modules/Components.html#define-custom-component-type），并用“可拖拽”属性控制拖拽： 干杯！