GrapesJS 问题

RJCAM

你好@kuhelbeher我也还在努力实现这个目标，但这里有个建议可以帮助我们实现。 如果我找到办法，我会在这里发帖。 参见本期 #2772

kuhelbeher

@RJCAM谢谢你的建议，我试过了，但这种方法的问题是它禁用的是组件脚本，而不是整个模板。

artf

一旦编辑器及其组件加载完成，就很难考虑禁用 JS，可以考虑用自定义脚本绑定事件的组件（甚至用外部插件）。 唯一可能的方法是在更新某个配置标志（例如通过“Canvas.enableScripts（false）”）后，重新加载整个帧（当前组件状态），并阻止它们附加[这里]（https://github.com/artf/grapesjs/blob/29abac0d77e2dda681dce10be3d7fa92b80fd5bb/src/canvas/view/CanvasVie...

adamwpe

你能举个例子吗？理想情况下使用 https://jsfiddle.net/szLp8h4n

bgrand-ch

你好， 对于未来的问题或技术问题（非漏洞），GitHub的[讨论]（https://github.com/artf/grapesjs/discussions）标签是最佳选择。 如果问题已解决，请关闭，或在[讨论]（https://github.com/artf/grapesjs/discussions）->[问答]（https://github.com/artf/grapesjs/discussions/categories/q-a）类别写一条详细的新消息（并关闭本期）。...

sanjaysamcom

如何解决一个部分到另一个部分的拖拽重叠问题？

andrewryan1906

还有另一个线索......一旦画布“坏掉”（我可以通过刷新页面并强制加载来稳定地解决......这种情况在新模板上不会发生，只有从自定义存储加载模板时才会出现，但我确认 JSON 没有损坏），如果我把一个组件拖到画布上，它会生成该组件的“幽灵”副本，尽管我没有丢弃它。每次我悬停到画布顶部，都会生成一个新的幽灵组件——同样，尽管我没有掉落。下方图片： ![图片]（https://user-images.githubusercontent.com/37671394/718687...

andrewryan1906

好的， 我设法把grapes.js放进了我的Angular项目里，并引用了它而不是缩小版，这样我就能更深入了解到底发生了什么。问题似乎出在Sorter.js。findPosition 方法负责确定光标悬停在哪个元素上。不知为何，这行代码： 正在回归，NaN。这会在整个代码中进行欺骗，导致数组长度无效。 当我看调光灯时，它是一个二维数组，包含所有——我猜？- 画布上组件的尺寸，我看到： ![图片]（https://user-images.githubusercontent.c...

smik3

它放入编辑器的缩略图/图片应该会根据容器进行缩放。我看到第一次加载时大小是原始大小，之后所有的方块添加都会正确对应它们被放入的列。如果你看导出代码，还会发现第一次放入一个块时，它不会更新CSS。后续方块会添加

smik3

有几张截图展示了我看到的行为...... <img width=“1021” alt=“截图 2019-11-06 11 32 16” src=“https://user-images.githubusercontent.com/19346508/68294968-394ba600-0089-11ea-941a-e441d3469c6f.png”> <img width=“1003” alt=“截图 2019-11-06 11 32 33” src=“https://use...

artf

我猜这和这个，可能还有这个@artf 嗯，不太行 把'modelThumbElement.setAttributes（{“data-gallery”：fileName}）;改成“addAttributes”似乎能解决问题，但我不确定到底发生了什么（我本以为“错误”的行为会一直存在，而不仅仅是第一次）。我稍后会调查这件事

pouyamiralayi

你好！你试过用[setStyle]（https://github.com/artf/grapesjs/blob/7d1dff957d62bbbaefd75b042e4092ae6f28e3d1/src/dom_components/model/Component.js#L403）吗？ 干杯。

artf

我本以为类似的做法应该能用（更新“style-default”） “''js 编辑。DomComponents.addType（'mj-text'， { 型号：{ 默认值：{ 'style-default'： { 你的新风格...... } } } }) ``` 确保在 mjml 插件之后加载你的插件

navewi

你好，@artf，谢谢你的回复。这正是我尝试过的同一个代码。如果我用“style”而不是“style-default”，这个方法就能正常使用。

artf

该代码在 Firefox 中返回 True，但在 Safari 和 Chrome 中显示为 False，尽管我在 Chrome 属性选项卡中确认它确实属于 SVGE 类型。 奇怪，好像是铬的问题......

artf

你是指剪辑期间吗？你觉得取消选中组件会好吗？

abozhinov

是的，在剪辑过程中。我的想法是实现伪元素。当你选择组件选择状态，比如悬停，但设置为：after或：before。 问题是我需要在CSS规则中设置内容：''，所有样式都应用到主元素上。

artf

好的，但取消选中组件后，这个方法正确吗？

artf

哇，非常感谢@vegadesign非常感激。我们实际上只在演示（[gh-pages]（https://github.com/artf/grapesjs/tree/gh-pages）分支）中使用这些，链接如下： https://github.com/artf/grapesjs/blob/be39c6baf55f4e644b6bc8bbdd71ead71723dd6b/demo.html#L53-L91 我会尽快更换，但如果你能自己创造个人纪录，那将非常感激

artf

好的，但你打算怎么处理编辑器的输出（Angular组件）？我是说，你最后会怎么用它？ 无论如何，我看到两种不同的处理方式：为每个组件创建自定义渲染（就是我用MJML做的那个概念）。这是最准确的方法，因为我应该能在画布上看到框架的具体组件（例如，如果渲染器使用相同的“编译器”，比如你的情况是Angular框架）。这可能不是最简单的方法，因为你必须对两个框架都有很好的了解（比如你这里是Angular和GrapesJS），但从长远来看，渲染器实现后可以毫无麻烦地集成新组件你可以创...

artf

@adelliinaa我们先从一个简单的问题开始，因为我不太明白，你想做什么样的编辑器？一个用于Angular组件的构建器?!?

adelliinaa

我想创建一个类似于你用MJML组件创建的表单构建器，但用Angular CLI代替JS。是的，我想集成在GrapesJS中的自定义组件也是用Angular构建的。