GrapesJS 问题

组件样式在拖拽模式（'absolute'）中拖拽事件后不会更新。

在新的拖曳模式中，组件的样式在拖动后不会更新。预期行为：通过点击组件（或工具栏图标）拖拽元素组件被“丢弃”后，样式应更新为新位置当前行为：你把组件拖到别处x和y位置（上、左）与拖拽前相同有个例外：如果样式管理器面板还没打开，然后你拖动组件，它会正确更新（但这是面板第一次打开）这个问题在演示中同样可复现。 [https://jsfiddle.net/yt0wz29p/]（https://jsfiddle.net/yt0wz29p/）繁殖步骤：使用拖曳模式打开演示有集合的 x 和 y 值（例如 0px 和 0px）拖动组件并检查新的 x 和 y 值 GrapesJS 版本：0.15.8

artf

有一组 x 和 y 的值（例如 0px 和 0px）你说的x/y是指左边/上方吗？

MartinPutz

是的，左边和上边应该会变更并更新，但它们保持不变。

artf

我看到只有重新选中元件后才会改变，你能确认吗？

#23732019年11月4日作者 FedericoPalma923 个回答

1 个反应

DataPicker 和 Element 控件位置错误

[Bug]：你好，我把 grapes js 集成到一个 asp.net 核心/Angular 项目中，我遇到了两个问题：添加方块后，工具栏和荧光笔随机显示在错误位置。 ![screenposition]（https://user-images.githubusercontent.com/7261023/68115728-623d3100-fef9-11e9-8b8a-ebd2d2ad0377.png）当我点击数据选择器时，它显示在窗口外的位置错误。 ![screenposition_cp]（https://user-images.githubusercontent.com/7261023/68115743-6c5f2f80-fef...

artf

关于颜色位置的问题，请参考这个 https://github.com/artf/grapesjs/issues/1533#issuecomment-432146597

artf

@picozzo92 你能制作一个最小且可复现的演示吗？我正在做一个[大画布重构]（https://github.com/artf/grapesjs/tree/multi-frame），可能会修复所有相关问题，有一个可复现的演示会帮助我理解这些

SaleDrache

我也遇到过颜色选择器位置的问题，得出结论是它的位置是与屏幕/HTML标签相关的（位置：绝对，左：x px），但如果包含gjs-editor的任何父元素是position： relative，它会影响modal的位置（比如你在页面上有侧边栏，就像我遇到的那样）。希望这些信息对你有帮助，也能给你一些提示。

#23662019年11月1日作者 benvmatheson3 个回答

1 个反应

文本阴影在选中元素时移除 RGB 值

示例： https://jsfiddle.net/benvmatheson/g1ft06qh/8/ 导入带有文本属性的样式。 'text-shadow：RGB（51， 166， 58） 4px 4px 4px;' 这样操作正常，物品也能正确显示。然而，一旦选中了该项，RGB值会被移除并替换为0。 'text-shadow：0 4px 4px 4px;'

benvmatheson

看起来当元素被点击时，'targetUpdated'会被运行两次。一次正确数值为“rgb（89， 89， 89） 5px 6px 7px”，第二次用“rgb”清除“0 5px 6px 7px”。这也解释了为什么第一个数字还是最后一个数字应该被理解为颜色会让人困惑。你有什么想法第二次游戏会从哪里来吗？

artf

是的，我已经知道这个问题了。不幸的是，Style Manager 解析器相当简单，它所做的只是用分隔符（这里是“空格”）来拆分值，然后按定义中的顺序分配到相对属性。所以，严格来说，这个改动会让它“4px 4px 4px rgb（51， 166， 58）”正常运行，但是......不幸的是，事实并非如此，这是由于[CSSOM不一致]（https://grapesjs.com/docs/guides/Custom-CSS-parser.html#cssom-results-a...

benvmatheson

由于跨浏览器依赖，这似乎会变成一个大型项目。引入第三方模块比在 grapes内部解决更值得吗？

#23642019年10月31日作者 mario-digital3 个回答

9 个反应

如何在图层面板中添加工具栏功能。

我正在尝试将工具栏添加到图层面板中，但我不确定该如何操作。有没有什么办法可以实现这一点？工具栏 ![Toolbaricons]（https://user-images.githubusercontent.com/31751146/67986516-724acd00-fbe8-11e9-8967-21d301b1fb42.png）我想把它们放在哪里： ![层叠PannelGrapesJS]（https://user-images.githubusercontent.com/31751146/67986313-f0f33a80-fbe7-11e9-9c89-1484f4b7c300.png）谢谢大家的回复！

artf

目前，没有简单的方法可以更改或自定义导航道具的内容。接下来我们可以添加一个新的回调选项，在 [configs]（https://github.com/artf/grapesjs/blob/dev/src/navigator/config/config.js）中执行，该选项会在 [ItemView 模板]（https://github.com/artf/grapesjs/blob/7a23e20fe5138c37088ef05382f7c759cb6fa951/src/n...

mario-digital

@pouyamiralayi 这就是我的意思 ![更新TBimg]（https://user-images.githubusercontent.com/31751146/68037607-5b0ded00-fc85-11e9-917c-d873a915c005.jpeg）

artf

实际上，现在应该可以使用 ['layerManager.onRender']（https://github.com/artf/grapesjs/blob/a2450ff4585a06f5ace0242c6ea56fe6d56ba81c/src/navigator/config/config.js#L50-L61）回调选项

#23552019年10月25日作者 ned-kelly3 个回答

2 个反应

设计师模式中支持统治者？

我知道有一个较早的帖子，关于《统治者》的支持作为推荐路线图项目（但已经关闭了）——只是想知道未来在GJS里有没有可能看到这个功能？- 那会是个很棒的补充——我目前正在编写裁剪/出血标记插件，也适用于响应式印刷设计（也就是说，一个设计可以导出不同尺寸的多种印刷媒介）。

ronaldohoch

你好，希望能帮到你： https://github.com/Ju99ernaut/grapesjs-rulers

artf

只是想知道未来在GJS中还有机会看到这个功能吗？当然，也许有一天我们会看到，但目前这不是我的优先事项，如果有人愿意以个人身份开始，那就太好了

artf

谢谢@ronaldohoch，我就结束了，支持插件

#23152019年10月7日作者 tom-sherman3 个回答

1 个反应

允许从 StorageManager 的 '.load' 和 '.store' 方法返回承诺

这将提供比当前基于回调的方法更现代、更简洁的 API。拟议API： “JavaScript 编辑。StorageManager.add（'simple-storage'， { 加载：异步键 => { const result = await foo（keys） return JSON.parse（result） }, async store（data） { const result = waitit bar（data）回球结果 } }); 2.切换到仅承诺的 StorageManager API 这样做的最大好处是，我们会鼓励更为最佳的实践方法，API也会简单许多。不用支持两个略有不同的 API，也有助于维护。不幸的是，这将是...

tom-sherman

谢谢你的想法！希望这周我有时间实现它

artf

Tom，这个功能请求真酷，我非常希望能有个永久授权。我肯定会选择你的第一个方法，不破坏当前API始终是一个目标。仅仅是能添加创建异步等待的自定义存储管理器功能就太棒了。以后我们也可能更新内置的“本地”和“远程”存储，使其能够实现这种方式。这里有一个我预期可行的示例（也要检查[存储事件]（https://grapesjs.com/docs/modules/Storage.html#events）是否正常工作） “''js const asyncStorage = {};...

artf

通过新的 StorageManager 重构，这个功能可以关闭 https://github.com/artf/grapesjs/pull/4223

#22132019年8月22日作者 benvmatheson2 个回答

1 个反应

CSS 性质总是加到扇区末尾

我想在默认属性中添加“最小高度”和“最大宽度”。有没有可能把这些标记加在“最大高度”旁边，而不是在扇区末端？还是我需要手动定义整个扇区才能管理物业顺序？另外，我只是好奇为什么这些没有包含在默认设置里？感谢你做出这么酷的项目！

benvmatheson

以后参考，如果有人需要用它作为基础，这应该是默认配置： https://github.com/artf/grapesjs/blob/dev/index.html#L89

artf

能不能把这些标记加到最大高度旁边，而不是在扇区末尾？还是我需要手动定义整个扇区才能管理物业顺序？不幸的是，目前你必须定义整个行业。我会在下一个版本中添加“at”选项（与['addSector']（https://grapesjs.com/docs/api/style_manager.html#addsector）相同）另外，我只是好奇为什么这些没有包含在默认设置里？说实话我也不知道，可能我定义的那些已经足够了感谢你做了这么酷的项目！感谢你使用它 😁

#22112019年8月22日作者 abozhinov3 个回答

0 个反应

增强不活跃

如何为伪元素（：after 和：before）设置样式

你好，我在样式管理器里添加 STATE：before 和：after，但所有样式都应用到组件上。

artf

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

abozhinov

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

artf

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

#22102019年8月22日作者 HommeSauvage3 个回答

0 个反应

在Safari中编辑文本无法正常工作

当你在Safari中打开[演示页面]（https://grapesjs.com/demo.html）时，你无法编辑文本。

artf

嗯，看起来“可拖拽”（https://github.com/artf/grapesjs/releases/tag/v0.15.3 年通过“拖拽组件”选项引入）和“可争取”在Safari中配合得不太好目前，我只能建议禁用“draggableComponents”，顺便说一句，感谢你的反馈

gaglioffo

你好， Firefox和Edge上版本也有同样的问题。谢谢

jesusdp

嗯，看起来 Draggable（https://github.com/artf/grapesjs/releases/tag/v0.15.3 年通过 DraggableComponents 选项引入）和 contendeditable 在 Safari 里配合得不太好目前，我只能建议禁用 draggableComponents，顺便说一句，感谢你的反馈我该如何禁用可拖拽组件？谢谢你的帮助。

#22072019年8月20日作者 niisar3 个回答

0 个反应

：如果在顶部/左侧有空位，Mode Absolute 无法拖动组件

给定以下代码示例...... “'' HTML <div style=“height： 100px;”> 顶部或左侧有空隙 </div> <div id=“gjs”> <p style=“填充：25px”> 赫斯德洛世界!!</p> </div> 导致无法通过面板上的拖曳图标拖放元素来修正位置。 ![图片]（https://user-images.githubusercontent.com/6368685/63374396-57b5d580-c3a7-11e9-9628-9d2943857f76.png）请参见Fiddle演示...... https://jsfiddle.net/niisar/zc51gtnv/

pouyamiralayi

这只是拖拽图标的，对吧？手动拖拽没问题。使用拖曳图标，它会从顶部重置元素的位置，看起来就是这样。

niisar

这只是拖曳图标的，对吧？手动拖拽没问题。使用拖曳图标，它会像看起来一样重置元素的位置。是的，这只适用于拖曳图标。

artf

是的，问题在于根据上下文的不同事件对象。当你触发对组件本身的拖拽时，事件在iframe的上下文中（因为点击的元素在iframe中），但组件的按钮在iframe之外，所以事件的上下文是原始的“窗口”。