GrapesJS 问题

已收录 3,464 个 GitHub 问题 370 个已解决 · 90 个待解决 搜索、筛选并探索经过实战检验的答案。

找到 1,399 个问题

🔍 outdated
#18982019年3月16日作者 foolsopts2 个回答
0 个反应

GrapeDrop里有个bug。

生产步骤将图像块拖曳到画布并选择背景。将图标拖曳到画布。点击图像块,进入背景样式标签页,点击背景并点击图片按钮。当模态显示时,请点击任意图片(非双击),然后关闭模态。现在看Canvas里的图标,你不能把它改成另一个图标。再次双击image-block并切换到另一张图片。图标又恢复工作。

artf

你说得对,问题挺奇怪的,我待会儿再查。 我打算关闭它,因为它是Grapedrop产品的一部分,而不是Grapesjs的核心,顺便说一句,谢谢你的反馈

lock[bot]

由于关闭后没有近期活动,该帖子已被自动锁定。请为相关漏洞开启新一期。

#18972019年3月16日作者 sandromattei3 个回答
0 个反应

观点与代码

你好......抱歉我的英语不好! 首先,祝贺你打造了这个出色的框架。 我正在尝试用GrapeJS来创建自己的WordPress编辑器,但我有些疑问。 如果我的代码中使用了WordPress的“短代码”,我怎样才能在 grapeJS 中预览这个短代码,同时保持 html 代码不变? 非常感谢

artf

我不知道WordPress允许用什么样的API来处理短代码,但如果可能的话,我会把它们渲染出来,放在编辑器里作为块子

sandromattei

抱歉,也许我解释得不清楚。我想在代码中插入一个短代码(例如 [我的短代码 param1 = value1 param2 = value2 /],然后渲染一个 html 输出(例如 <div class = “param1” id = “param2”> </div>)

artf

如果你需要在运行时做到这一点,应该创建一个自定义组件,渲染时它会异步调用 Wordpress,要求渲染那个短代码(我对 WP API 一无所知,不确定是否可行)。

#18962019年3月16日作者 kaoz703 个回答
2 个反应

自定义插件的组件未被识别

操作系统:Windows 10 x64 浏览器:Chrome 72.0.3626.121 x64 GrapesJS:v0.14.55 你好,我在一个插件里装了一些自定义组件(引导标签页),但不知为何,GrapesJS在从容器元素加载时,插件的某些组件没有被检测到,有些则是通过拖拽到编辑器才检测到的。此组件未被检测到: const defaultType = dc.getType('default'); const defaultModel = defaultType.model; const defaultView = defaultType.view; const {tabPanesName, tabPaneSelector}...

artf

如你所见,它的类型是“div”......这就是为什么它从未传达到另一种类型......看看为什么以及在哪里声明了这种类型

kaoz70

好吧,这就是问题所在!我以为“div”类型是GrapesJS默认设置的。感谢大家的帮助!

artf

可能是那个“elHasClass”方法?!?

#18952019年3月15日作者 simplecommerce3 个回答
0 个反应

用脚本拖拽组件到画布上,脚本多次附加。

你好,不确定这是不是个bug。 但我注意到一个奇怪的行为,当我拖动一个包含脚本函数组件的方块时,它似乎先把它附加到画布里,然后才被丢弃。 当你放下它时,它又会附上另一个剧本。 如果你从不放下方块,只是一直拖拉,它会尽可能多次地附加。 而且当我点击“清除画布”时,它似乎从未发出声音,我不得不手动操作: “编辑。Canvas.getCanvasView().getJsContainer().innerHTML = '';' 为了清理画布,JS。 这是你演示页面上问题的截图。 ![图片](https://user-images.githubusercontent.com/31987945/54397884-5eb91900-468e-1...

simplecommerce

所以我查了一下,发现是“canvasView”里的“updateScript”方法每次在组件上发现“脚本”属性时都会被调用,不管它是否还在画布上拖拽。 我做了一些补丁测试,似乎解决了问题。 我不得不这样覆盖,因为我不想直接修改原始代码,以防将来被修复。 我不知道怎么检测模型是否正在被拖拽,只注意到当组件被丢弃到画布时,调用了“updateScript”,“modelOpt”有一个额外的属性“at”,所以就依赖这个。 直到有人做出更好、更干净的修复方法。

simplecommerce

之前的解决方案没用,我只好放弃,于是重新打开了问题。

artf

你好@simplecommerce如果你认为这是个bug,请按照模板打开问题,并创建一个可复现的实时演示。这非常重要,因为我们没有太多空闲时间,可能会把大部分时间浪费在与库本身无关的调试上

#18942019年3月14日作者 jwilson-lyonscg2 个回答
0 个反应

自定义特性文档示例无法正常工作

具体来说: https://grapesjs.com/docs/modules/Traits.html#define-new-trait-type 首先,'keyUp' 事件引用的是 'onChange',而函数名实际上是 'onChange'。接下来,即使你修正了这个问题,每当我修改“this.model.get('value')”时,它仍然会被评估为空值/空值。我唯一能得到实际值的方法是引用它在“e.srcElement.value”。不过这似乎不是正确的做法,所以我猜是“get()”代码的问题不正常。

jwilson-lyonscg

算了。我之前误解了语法。我之前没意识到“onChange”和“onValueChange”显然是两种不同的无关方法。我不太清楚“onChange”具体是做什么的。

lock[bot]

由于关闭后没有近期活动,该帖子已被自动锁定。请为相关漏洞开启新一期。

#18932019年3月14日作者 trivago-vgarcia3 个回答
1 个反应

所有方块的样式必须相同

我们使用的是blockManager,正如你在codesandbox发布的示例中看到的,遵循与自定义渲染相关的文档。对我们来说,意想不到的是,每次用户编辑某个块的样式时,所有块都会更新为该样式,因为样式被设置为块中使用的类,这里是 .row-cell。这是预期的行为吗?我们怎么避免? 谢谢! 参考文献: https://codesandbox.io/s/wkr3oqxpw8 https://grapesjs.com/docs/modules/Blocks.html#custom-render

artf

首先,你的例子/问题和块的自定义渲染无关(你用它来自定义块的界面,而不是画布中的组件)。 解决方案是将该类设为私有(https://github.com/artf/grapesjs/issues/1566#issuecomment-437167731)

trivago-vgarcia

@artf 谢谢你的回复!抱歉,因为举例不够清楚。这种情况在每个案例中都会发生,我的意思是,即使它们在默认模板中定义了,而且不仅仅是在添加新选择器时才会出现。所以,使用“selector:add”并不能解决所有情况。 你还有其他建议吗?谢谢!

artf

这种情况在每个案例中都会发生,我的意思是,即使它们在默认模板中定义了,而且不仅仅是在添加新选择器时才会出现。所以,使用selector:add并不能解决所有情况。 即使通过解析添加新类,“selector:add” 也会被触发。所以,把它作为插件放置,这样在模板加载前就会被连接,监听器会传递任何新类

#18922019年3月14日作者 sanjib002 个回答
0 个反应

Flexbox列无法正常工作。

你好@artf, 我们用的是flexbox模块。问题是,当我们尝试调整中间列的大小时,会影响其他所有列,比如自动缩小左列的宽度。它应该只影响右侧列。 要创建此场景,请添加三列并尝试调整中间列(https://codepen.io/sanjib00/pen/wOpVNv)。 你能给点建议我们怎么解决这个问题吗? [](网址) ![Flexbox_issue](https://user-images.githubusercontent.com/8086390/54337389-f734a680-4658-11e9-9041-28a2393ba853.png)

artf

这就是Flexbox在调整中间列大小时的工作原理。你想实现的有点不同,需要另一种实现方式,所以我建议你自己创建网格组件

lock[bot]

由于关闭后没有近期活动,该帖子已被自动锁定。请为相关漏洞开启新一期。

#18912019年3月14日作者 jwilson-lyonscg3 个回答
0 个反应

无法创建新的按钮组件

我在为一个元素创建一个新组件时遇到了<button>困难。我到底漏掉了什么?这里是不是出了什么问题?如果我把它改成“<input>''元素,效果很好:

jwilson-lyonscg

经过更多尝试,似乎我的组件结构是正确的,但我的按钮块却不正常工作。按钮块是这样的: 当将该方块拖入画布时,它未被识别为按钮组件。不过当我改成这样时: 然后就正常工作了。这是个bug还是设计成这样?我在文档里找不到任何关于为什么会这样工作的说明。

artf

我认为问题在于对“内容”密钥的误解。 当你宣布一个封锁时 “''js 编辑。BlockManager.add('button-block', { // ... 内容:{ 类型:“按钮”, 可掉落:错误, 属性:{ 标题:“你好”, 类型:“提交”, }, }, }); 但当你在组件中使用“content”时,它表示使用静态内容(比如RTE中使用的),所以编辑器不会解析它,在JSON中会以字符串形式存储。 所以这个组件对象: “''js { 可拖拽:确实, Droppable...

lock[bot]

由于关闭后没有近期活动,该帖子已被自动锁定。请为相关漏洞开启新一期。

#18902019年3月13日作者 MACscr2 个回答
0 个反应

禁用拖曳功能,而不是功能

我想创造属于自己的拖拽和放置能力。我很喜欢 Grapesjs,但真的希望能更好地控制在编辑器区域里拖拽元素的工作。有没有办法禁用内置的方法,这样我就能自己创建?我知道设计模式在路线图上,但我现在需要这个功能,所以我自己也要添加,不过首先我得阻止 Grapesjs 的默认功能干扰它。我自己的自定义应用里已经有拖拽定位和调整大小元素完美运行,所以我知道只要能阻止 Grapesjs 的原生功能干扰,就能让它正常工作。 我觉得这不是简单的操作:data-gjs-draggable=“false” 另外,也许我可以保持这个为真,并覆盖处理该功能的函数? 目前我用jquery的可拖拽/可调整大小类来做我自己的应用。我只需对添加的任何元素进行封...

artf

对于组件本身,当你点击移动图标时,它会运行['tlb-move' command](https://github.com/artf/grapesjs/blob/dev/src/commands/index.js#L111),所以你可以通过添加一个带有相同ID的新命令来覆盖它,但遗憾的是,没有简单的方法来改变方块的拖拽行为。 附言:我开始开发设计师模式,开发进展缓慢,但至少开始了,希望很快能发布后续问题

lock[bot]

由于关闭后没有近期活动,该帖子已被自动锁定。请为相关漏洞开启新一期。

#18892019年3月13日作者 Nagavijay-kolla2 个回答
0 个反应

如何在所需位置/索引处附加子组件

例如, 我有一个父组件,这个父组件有4个子组件。这里用trait功能,我想把第三个子组件也移到第一位置。 我可以通过使用 component.remove() 将组件从现有位置移除,然后用 component.append(ref of removecomponent) 将其添加到父位置,从而将组件从任意位置移动到最后。所以它正在向最后移动。 现在我想在特征值变化时将一个子组件从一个位置移动到另一个位置 你能给我一些建议吗? 提前感谢大家。

artf

在选项中使用“at”作为索引,例如:'component.append(comp, { at: 0 })' 将 'comp' 置为第一个元素

lock[bot]

由于关闭后没有近期活动,该帖子已被自动锁定。请为相关漏洞开启新一期。

浏览所有主题