GrapesJS 问题

artf

目前绝对定位存在多个问题，我想在这里全部回应：[ ] 另一个设备位置错误[ ] 在放大/平移画布上位置错误[ ] 绝对分量子的错误位置[ ] 支持多重选择[ ] 支持触摸设备[ ] 支援'%'单位 我还不确定具体什么时候会开始做，但希望很快，一如既往，任何帮助我都非常感激。

itscarlosrufo

大家好， 非常感谢你的反馈和详细讨论。 我们很高兴地分享，我们已经解决了部分需求功能。此外，我们还推出了一个新的绝对模式插件，应该能覆盖上述大部分使用场景。 你可以在我们的新文档中了解更多： https://app.grapesjs.com/docs-sdk/plugins/canvas/absolute-mode 欢迎试试，如果有其他建议也告诉我们！

fmfeit

你好，@artf， 这个功能对我当前的项目至关重要，所以我有两个问题： 是否可以付钱给你（或其他人）优先使用这个功能？ 如果没有，能否说明解决问题所需的步骤，并给我一个起点？

artf

你必须[扩展]（https://grapesjs.com/docs/modules/Commands.html#extending）[ComponentDrag]（https://github.com/artf/grapesjs/blob/dev/src/commands/view/ComponentDrag.js）命令

GJSBlock

谢谢你举报，@Abhisheknanda1344463。 关于覆盖拖拽函数的好建议！虽然这个具体功能还没有出现在核心 API 中，但有几种方法可以实现类似的行为。 使用事件系统： “JavaScript editor.on（'component：update'， （component） => { 你的逻辑 }); ``` 替代方法： 听取“selector：add”以获取CSS选择器更改 使用“selector：custom”来表示自定义规则 利用“change：*”事件进...

artf

https://github.com/artf/grapesjs/discussions/3711#discussioncomment-1234837

GJSBlock

谢谢你举报，@ltenti。 关于部分解析的好建议！虽然这个具体功能还没有出现在核心 API 中，但有几种方法可以实现类似的行为。 使用事件系统： “JavaScript editor.on（'component：update'， （component） => { 你的逻辑 }); ``` 替代方法： 听取“selector：add”以获取CSS选择器更改 使用“selector：custom”来表示自定义规则 利用“change：*”事件进行细致跟踪 构建一个插件，扩展编...

GJSBlock

谢谢你举报，@denisoed。 关于是否可以设置Vue组件的渲染？的建议很棒！虽然这个具体功能还没有出现在核心 API 中，但有几种方法可以实现类似的行为。 使用事件系统： “JavaScript editor.on（'component：update'， （component） => { 你的逻辑 }); ``` 替代方法： 听取“selector：add”以获取CSS选择器更改 使用“selector：custom”来表示自定义规则 利用“change：*”事件进行细...

artf

这里的字符串本应是查询字符串，所以它尝试查询一个“封装”标签，而显然这个标签不存在。编辑器会在帧中的所有组件附加“data-gjs-type”属性，所以你能用的查询是“可拖拽：”[data-gjs-type=wrapper]''

anatoli-dp

啊，现在明白多了......谢谢，问题解决了

GJSBlock

谢谢你举报，@anatoli-DP。 设置可拖拽：'wrapper' 不会在 wrapper 中掉落的问题似乎是竞态条件或状态管理时序的问题。这通常发生在组件生命周期事件和DOM修改重叠时，导致状态不一致。 尝试什么： 添加setTimeout包装器以确保DOM已稳定： “JavaScript setTimeout（（） => { 你在这里的行动 }, 0); 推荐的下一步步骤： 如果还没测试过，请用最新的GrapesJS版本测试 提供最小可重复的示例（CodeSandbo...

artf

我不太明白你的问题，具体是怎么移动/缩放画布的？这无关，但有没有功能可以调用来缩放内容，而不是画布？比如我想放大，比如放在某个非常高DPI的页面上，以便更好地编辑。还是应该手动调整iframe缩放？因为iframe放大当然会放大工具/选择轮廓 ['编辑。Canvas.setZoom']（https://grapesjs.com/docs/api/canvas.html#setzoom）在你这种情况下不起作用吗？

anatoli-dp

我用编辑器来调整。用Canvas.setZoom，然后用空格键移动它。目前我移除了之前做过的部分，但大概是拿到画布元素，然后通过样式更新来定位它。不过这种变化不是永久性的，只要稍微移动，它就会跳回原位，比如如果它在26xx、18y（或26上、18左）的位置，稍微移动它会跳回那些坐标，而不是如果它是从0,0开始移动，如果它是天边。有没有什么功能可以把画布位置重置回视角中心，并重新缩放到100%？

artf

如果你说的是移动坐标，我们还没有直接的 API，但你实际上可以通过这种方式获取或更新坐标： “''js const canvasModel = editor.Canvas.getModel（）; 获取数值 const { x， y } = canvasModel.attributes; 更新数值 canvasModel.set（{ x： x + 50， y： y + 50 }） ```

artf

@aliibrahim123如果你不指定任何类型，会创建一个简单的文本类型属性:)

aliibrahim123

你好 我做了一个简单的文本代理类型 这是代码 styleManager.addType（'text'， { create（{ props， change }） { const el = document.createElement（'div'）; el.innerHTML = '<input type=“text” class=“my-input” />'; const inputEl = el.querySelector（'.my-input'）; inputEl.add...

GJSBlock

谢谢你举报，@aliibrahim123。 关于FEAT： style manager文本类型的建议很棒！虽然这个具体功能还没有出现在核心 API 中，但有几种方法可以实现类似的行为。 使用事件系统： “JavaScript editor.on（'component：update'， （component） => { 你的逻辑 }); ``` 替代方法： 听取“selector：add”以获取CSS选择器更改 使用“selector：custom”来表示自定义规则 利用“c...

GJSBlock

感谢你报告，@NoumanAhmad-Braqsol。 关于 [QUESTIONS] editor.setComponents（html） 和 pageManager.select（pageId） 不要加载 js 脚本 的建议很棒！虽然这个具体功能还没有出现在核心 API 中，但有几种方法可以实现类似的行为。 使用事件系统： “JavaScript editor.on（'component：update'， （component） => { 你的逻辑 }); ``` 替代方...

artf

嗨@anatoli-dp，如果能查看撤销历史会非常酷，我已经在考虑如何扩展UndoManager模块，通过插件实现这种功能（比如你可以用你喜欢的框架渲染UI）。 UndoManager 栈会在任何被监听的模型/集合（组件、CSS 规则等）发生变化时更新，新增一个包含动作信息的 UndoAction 对象。值得注意的是，一次更改可以生成多个撤销动作： “''js 这会为新组件生成一个撤销操作 以及另一个用于新CSS规则的任务 editor.addComponents（' <d...

anatoli-dp

是的，我知道如何访问这个栈，只是不知道怎么设计它，才能给最终用户更有意义的描述

artf

我只是不知道怎么给最终用户一个更有意义的描述 每个UndoAction（堆栈的每个实例）都会告诉你动作的“类型”（例如“添加”、“删除”、“重置”、“更改”）以及关于更新模型的详细信息（例如，Component、CssRule 等）。你可以尝试读取这些数据，但我更想的是如何让每个操作都易于识别。

iabhiyaan

“''js editor.on（'component：drag：start'， props => { const { target } = props; target.set（{ 可拖拽：错误， 传播：['可拖拽'] }); }); ```

anlumo

这样不就禁用了所有拖拽，甚至是工具栏和图层管理器里的拖拽吗？

anlumo

我刚测试了，另一个问题是拖拽操作仍然吞噬事件，只是渲染了组件被禁用。