GrapesJS 问题

GJS Helper

你遇到的问题是，“对象字面可能只指定已知属性，'el' 不存在于类型 'PanelProps'”，是 TypeScript 编译错误。它表明 el 属性在 PanelProps 接口中不是有效或识别的属性GrapesJS。 根本原因 el属性不包含在GrapesJS的PanelProps界面中。GrapesJS中的面板设计为由编辑器的UI系统内部管理和渲染。PanelProps界面定义了诸如id、content、buttons、visible、className和attri...

SLain123

我自己能修复这个bug，但我无法用fix把分支推送到仓库。看起来我没有推送或创建新分支的权限。

artf

@SLain123你必须从分支 https://stackoverflow.com/questions/38918942/pull-request-from-a-different-repository 创建一个PR

GJS Helper

你遇到的YouTube和Vimeo自动播放无法GrapesJS正常工作的问题，并不是GrapesJS本身的bug，而是现代浏览器自动播放政策的结果。像Chrome、Firefox和Safari这样的浏览器已经实施了严格规则，以防止不想要的媒体播放，这会干扰用户并消耗数据。 根本原因：浏览器自动播放政策 大多数现代浏览器会阻止有声音的自动播放视频，除非满足特定条件。最常见的条件包括： 视频静音： 如果视频以静音状态开始播放，浏览器通常允许自动播放。 用户互动： 如果用户已与页...

pittleCheung

是的，你说得对，我复制了所有匹配的样式，这样我可以粘贴到任何地方，甚至跨浏览器粘贴，我觉得这非常有用。当我删除组件时，对应的样式不会被移除。这是一个大问题，当我在同一个网站上多次复制粘贴时，会导致大量重复的样式，容易引发样式冲突。 所以我不能指望那些风格被简单删除。如果可能的话，我会很感激一些建议。 “如果你复制了所有匹配的样式，它还会包含其他元素使用的样式，所以你不能指望那些样式被简单删除。”

pittleCheung

这仍然是个问题

artf

我不明白这怎么会是核心漏洞。 你用的是自己的复制粘贴逻辑，感觉也不对，你应该注意每个组件/规则的唯一ID。删除这些子组件后，它们的样式依然保留。 如果你复制了所有匹配的样式，它还会包含其他元素使用的样式，所以不能指望那些样式被简单删除。 请，如果你提交了bug，务必提供可复现的演示。

artf

这不是个bug，'Css.addRules'没有任何选项参数。 你可以就这个话题展开讨论，我们可以看看是否有必要引入它

pittleCheung

好的，我明白了，我需要在数组前面添加样式，而不是在最后。比如 arr.unshift（css）。我该怎么做？我可能需要你帮帮我

GJS Helper

你观察到的 editor.Css.addRules() 行为实际上是 GrapesJS CSS API预期且预期的功能。默认情况下，当你使用 editor.Css.addRules(targetCss);时，新的CSS规则会附加在由 GrapesJS管理的样式表末尾。这是许多CSS管理系统中常见的模式，新规则是顺序添加的。 不过， GrapesJS 提供了一个灵活的选项来控制CSS规则的插入点。你正确识别并使用了 at 选项，它允许你指定新规则在样式表中插入的准确索引。当你...

artf

“可编辑”属性默认没有意义，只有其他扩展组件如“文本”或“图像”在内部使用。

riteshdalal

@artf我们如何创建一个组件，使 GJS 不解析这些子节点。

riteshdalal

“可编辑”属性默认没有含义，只被其他扩展组件如“文本”或“图像”内部使用。 这在旧版GJS上是有效的。0.21.3 版本就完全不工作了

artf

与绝对模式相关的问题在此 https://github.com/GrapesJS/grapesjs/issues/3770

GJS Helper

你准确指出了GrapesJS中与绝对位置和画布缩放相关的常见问题。这确实是一个bug，拖拽操作的差值计算没有考虑画布当前的缩放水平，导致光标位置和元素实际移动之间存在差异。 根本原因解释 当dmode设置为absolute时，GrapesJS 利用 top 和 left CSS 属性来定位组件。在拖动操作过程中，编辑器根据屏幕像素计算鼠标位置的变化（deltaX， deltaY）。然后尝试将这些差异直接应用于组件的 left 和 top 样式值，这些值以画布像素为单位。 问...

artf

@joukhar“npm install GrapesJS/grapesjs#dev”是不够的，我还没在开发分支里创建构建，所以如果你想本地解决这个问题，必须先自己构建。 无论如何，即使相关问题关闭了，也没必要新建，你仍然可以在那里添加更新，问题没有被锁定。

GJS Helper

感谢您报告此问题并详细说明相关代码部分。您已正确识别问题根源。 根本原因分析： 问题源于JavaScript的textContent属性和document.createComment方法如何处理null或undefined值。当执行el.textContent = null;或document.createComment(null);时，JavaScript隐式地将null转换为字符串的字面值"null"。这是标准的DOM行为，但当 model.content 表示空或不存...

artf

你好，@bgrand-ch，不幸的是，所有涉及解析器（HTML/CSS）的内容都需要使用与DOM相关的API。对于CSS，也许你可以试试用[parser-postcss插件]（https://github.com/GrapesJS/parser-postcss），我预计它能在工作环境下工作

bgrand-ch

你好，@artf，非常感谢你的快速回复😄，我这周会试试看。

bgrand-ch

@artf Post CSS 解析器插件在 Web Worker 中运行得非常完美！谢谢你的帮助。

artf

大概是在八月的第一周

artf

你好@joukhar最新版本是不是也这样？ 如果我用你的 JSON 示例，我能在导出代码中看到“null”（这应该可以修复），但我无法用你的 HTML 示例生成带有 “null” 的 “textnode”，你能为这个用例创建一个可复现的演示吗？ 不确定在哪种情况下textnode可能是“null”，但我们可以肯定能防止这种情况......

joukhar

谢谢你的重玩，如果你需要试玩版，请给我点时间，等我做完会再评论 问题只在存储和加载时出现，但第一次丢弃组件时却没有反应

artf

这与核心无关，只是导出 HTML 中缺少一个元标签demo.html '''html <meta name=“viewport” 内容=“width=device-width，initial-scale=1”> ``` 如果你想提交永久居民申请，我很乐意帮你合并

GJS Helper

你遇到的问题不是GrapesJS本身的bug，而是部署响应式网页时常见的疏忽。根本原因是导出的HTML文件<head>部分缺少viewport meta标签。 根本原因解释 现代移动浏览器依赖viewport元标签来正确响应式地渲染网页。没有该标签，许多移动浏览器（尤其是iOS上的Safari）默认将页面渲染为类似桌面的宽度（例如980px），然后缩放以适应设备屏幕。这导致移动设备上会出现“桌面版本”，即使你的CSS包含针对较小屏幕的媒体查询。 GrapesJS演示页面（h...