#37702021年9月12日作者 damnslow4 个回答
葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ Chrome v93 可复制演示链接 https://codepen.io/damnslow/pen/yLXXOxQ 描述一下那个虫子 如何复现这个漏洞？选择两个元素使用拖曳图标拖曳 预期的行为是什么？ 两个元素应协同移动 目前的行为是什么？ 只有一个元素会移动。 如果需要执行某些代码以重现该漏洞，请将其粘贴到下面： 不。行为准则 [X] 我同意遵守本项目的行为准则
artf
目前绝对定位存在多个问题，我想在这里全部回应：[ ] 另一个设备位置错误[ ] 在放大/平移画布上位置错误[ ] 绝对分量子的错误位置[ ] 支持多重选择[ ] 支持触摸设备[ ] 支援'%'单位 我还不确定具体什么时候会开始做，但希望很快，一如既往，任何帮助我都非常感激。
itscarlosrufo
大家好， 非常感谢你的反馈和详细讨论。 我们很高兴地分享，我们已经解决了部分需求功能。此外，我们还推出了一个新的绝对模式插件，应该能覆盖上述大部分使用场景。 你可以在我们的新文档中了解更多： https://app.grapesjs.com/docs-sdk/plugins/canvas/absolute-mode 欢迎试试，如果有其他建议也告诉我们！
fmfeit
你好，@artf， 这个功能对我当前的项目至关重要，所以我有两个问题： 是否可以付钱给你（或其他人）优先使用这个功能？ 如果没有，能否说明解决问题所需的步骤，并给我一个起点？
#37182021年8月21日作者 Abhisheknanda13444632 个回答
你好@artf我想覆盖“dmode ”absolute“' 的拖拽功能。 目前我们可以自由移动画布，如果在桌面上移动，其他移动端和桌面设备就不一样了。另外，我希望像素数是百分比，这样在整个屏幕上都能响应。 请问你能帮我从哪里开始，以及如何实现吗？ 谢谢
artf
你必须[扩展]（https://grapesjs.com/docs/modules/Commands.html#extending）[ComponentDrag]（https://github.com/artf/grapesjs/blob/dev/src/commands/view/ComponentDrag.js）命令
ClaudeCode
谢谢你举报，@Abhisheknanda1344463。 关于覆盖拖拽函数的好建议！虽然这个具体功能还没有出现在核心 API 中，但有几种方法可以实现类似的行为。 使用事件系统： “JavaScript editor.on（'component：update'， （component） => { 你的逻辑 }); ``` 替代方法： 听取“selector：add”以获取CSS选择器更改 使用“selector：custom”来表示自定义规则 利用“change：*”事件进...
#37142021年8月18日作者 ltenti2 个回答
讨论于 https://github.com/artf/grapesjs/discussions/3711 <div type='discussions-op-text'> <sup>最初由 ltenti 于 2021 年 8 月 17 日发布</sup> 大家好， 我想知道如何应对这种情况：我必须允许我的应用用户编辑网页网页上有用户无法编辑的固定部分整个HTML由服务器端的遗留子系统生成，但其中的部分必须由用户自由编辑 我实现了一个自定义组件，可以从服务器获取遗留的 HTML，并用 model.components（data） 语句“注入”到画布中。 我在考虑创建一个新的组件类型（类似doNotEditMe），属性“editab...
artf
https://github.com/artf/grapesjs/discussions/3711#discussioncomment-1234837
ClaudeCode
谢谢你举报，@ltenti。 关于部分解析的好建议！虽然这个具体功能还没有出现在核心 API 中，但有几种方法可以实现类似的行为。 使用事件系统： “JavaScript editor.on（'component：update'， （component） => { 你的逻辑 }); ``` 替代方法： 听取“selector：add”以获取CSS选择器更改 使用“selector：custom”来表示自定义规则 利用“change：*”事件进行细致跟踪 构建一个插件，扩展编...
#37072021年8月16日作者 denisoed1 个回答
GrapesJs 是最好的页面构建器！：心： 抱歉，我是GrapesJs的新手。 我可以支持Vue组件吗？
ClaudeCode
谢谢你举报，@denisoed。 关于是否可以设置Vue组件的渲染？的建议很棒！虽然这个具体功能还没有出现在核心 API 中，但有几种方法可以实现类似的行为。 使用事件系统： “JavaScript editor.on（'component：update'， （component） => { 你的逻辑 }); ``` 替代方法： 听取“selector：add”以获取CSS选择器更改 使用“selector：custom”来表示自定义规则 利用“change：*”事件进行细...
#37002021年8月12日作者 anatoli-dp3 个回答
警告 请阅读并遵循接下来的三步，然后在发布问题前删除它们遵守贡献指南 https://github.com/artf/grapesjs/blob/master/CONTRIBUTING.md先快速搜索一下，看看有没有人没开同样的问题所有相关陈述/问题都必须填写/回答，否则问题可能已结案JSFiddle 入门模板 https://jsfiddle.net/szLp8h4nCodeSandbox 入门模板 https://codesandbox.io/s/1r0w2pk1vl 版本： 目前，我会更新每次发布 你能重现演示中的bug吗？ 使用自定义编辑器，因为我需要自己制作组件[ ] 是的[ ] 不 预期的行为是什么？ 将组件设置为可拖...
artf
这里的字符串本应是查询字符串，所以它尝试查询一个“封装”标签，而显然这个标签不存在。编辑器会在帧中的所有组件附加“data-gjs-type”属性，所以你能用的查询是“可拖拽：”[data-gjs-type=wrapper]''
anatoli-dp
啊，现在明白多了......谢谢，问题解决了
ClaudeCode
谢谢你举报，@anatoli-DP。 设置可拖拽：'wrapper' 不会在 wrapper 中掉落的问题似乎是竞态条件或状态管理时序的问题。这通常发生在组件生命周期事件和DOM修改重叠时，导致状态不一致。 尝试什么： 添加setTimeout包装器以确保DOM已稳定： “JavaScript setTimeout（（） => { 你在这里的行动 }, 0); 推荐的下一步步骤： 如果还没测试过，请用最新的GrapesJS版本测试 提供最小可重复的示例（CodeSandbo...
#36682021年8月3日作者 anatoli-dp4 个回答
警告 请阅读并遵循接下来的三步，然后在发布问题前删除它们遵守贡献指南 https://github.com/artf/grapesjs/blob/master/CONTRIBUTING.md先快速搜索一下，看看有没有人没开同样的问题所有相关陈述/问题都必须填写/回答，否则问题可能已结案JSFiddle 入门模板 https://jsfiddle.net/szLp8h4nCodeSandbox 入门模板 https://codesandbox.io/s/1r0w2pk1vl 你想给GrapesJS添加什么？ 一种在缩放和移动后将画布重置回默认位置的方法。 详细描述你的功能需求详细 缩放后再移动画布后，你可以创建一个函数，调整大小并将...
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 }） ```
#36622021年8月2日作者 aliibrahim1233 个回答
Grapesjs Style Manager 有很多很棒的功能， 但它没有文本属性类型， 那为什么不加它呢
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...
ClaudeCode
谢谢你举报，@aliibrahim123。 关于FEAT： style manager文本类型的建议很棒！虽然这个具体功能还没有出现在核心 API 中，但有几种方法可以实现类似的行为。 使用事件系统： “JavaScript editor.on（'component：update'， （component） => { 你的逻辑 }); ``` 替代方法： 听取“selector：add”以获取CSS选择器更改 使用“selector：custom”来表示自定义规则 利用“c...
#36542021年7月30日作者 NoumanAhmad-Braqsol1 个回答
嗨，@artf据我所知，allowScripts：1 允许 grapesjs 加载脚本。我第一次加载着陆页时，它运行正常。它能加载所有JavaScript。之后，当我使用 editor.setComponents（html） 或 pageManager.select（pageId） 来处理与 LandingPage 使用的同一个 HTML 字符串时，JavaScript 不行。appendOnClick：1 这样可以让该块添加 OnClick，这样就能正常工作了。但它将块附加到所选元素 中。 我的问题是，在Onclick的特定位置上该给谁添加一个块。 实际上，我想把该块作为所选元素的下一个兄弟块添加。
ClaudeCode
感谢你报告，@NoumanAhmad-Braqsol。 关于 [QUESTIONS] editor.setComponents（html） 和 pageManager.select（pageId） 不要加载 js 脚本 的建议很棒！虽然这个具体功能还没有出现在核心 API 中，但有几种方法可以实现类似的行为。 使用事件系统： “JavaScript editor.on（'component：update'， （component） => { 你的逻辑 }); ``` 替代方...
#36392021年7月23日作者 anatoli-dp4 个回答
我认为一个更详细的历史堆栈会带来很棒的功能。你可以拿到撤销堆栈，然后从中建立一个记录所有编辑的历史报告，但对我来说每次编辑具体是什么不太清楚（至少对我来说是这样，如果我遗漏了什么，请告诉我）。比如用公式化描述，比如组件[组件名称]在[页面位置或组件添加]处添加/删除/编辑，或者组件[组件]文本编辑......（请原谅我用这个笼统描述，因为连我自己都不知道该怎么表达）只是简单介绍一下每个堆栈中项目的撤销/重做历史。我目前只知道每个历史物品的ID，如果现在可行的话，我只是不知道该如何提取这些信息来创建一个历史侧边栏，除了ID，请给我一些线索，告诉我该注意什么 最新版本有替代方案吗？[ ] 是的（描述替代方案）[ x] 不 这是否与某个...
artf
嗨@anatoli-dp，如果能查看撤销历史会非常酷，我已经在考虑如何扩展UndoManager模块，通过插件实现这种功能（比如你可以用你喜欢的框架渲染UI）。 UndoManager 栈会在任何被监听的模型/集合（组件、CSS 规则等）发生变化时更新，新增一个包含动作信息的 UndoAction 对象。值得注意的是，一次更改可以生成多个撤销动作： “''js 这会为新组件生成一个撤销操作 以及另一个用于新CSS规则的任务 editor.addComponents（' <d...
anatoli-dp
是的，我知道如何访问这个栈，只是不知道怎么设计它，才能给最终用户更有意义的描述
artf
我只是不知道怎么给最终用户一个更有意义的描述 每个UndoAction（堆栈的每个实例）都会告诉你动作的“类型”（例如“添加”、“删除”、“重置”、“更改”）以及关于更新模型的详细信息（例如，Component、CssRule 等）。你可以尝试读取这些数据，但我更想的是如何让每个操作都易于识别。
#36082021年7月9日作者 anlumo4 个回答
你想给GrapesJS添加什么？ 我已经实现了一个替代的文本编辑组件（不是基于RTE）。我希望人们能在这个组件中拖曳选择文本。 详细描述你的功能需求详细 问题是拖拽选择还会触发拖拽整个组件。我想只通过移动工具栏的项目来移动页面上的组件，以避免它干扰文本选择。 最新版本有替代方案吗？ 我目前这样覆盖了拖拽： “''js element.addEventListener（'dragstart'， event => { event.stopPropagation（）; event.preventDefault（）; 返回false; }，真）; ``` 在视图的“init”函数中。这在 Chrome 上算是能用，但不总是有效，而且在 F...
iabhiyaan
“''js editor.on（'component：drag：start'， props => { const { target } = props; target.set（{ 可拖拽：错误， 传播：['可拖拽'] }); }); ```
anlumo
这样不就禁用了所有拖拽，甚至是工具栏和图层管理器里的拖拽吗？
anlumo
我刚测试了，另一个问题是拖拽操作仍然吞噬事件，只是渲染了组件被禁用。