#54082023年9月21日作者 quentin-bettoum3 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Firefox 118 可复制演示链接 没有 描述一下那个虫子 你好， 我按照医生的指示做了主题 GrapesJS ：https://grapesjs.com/docs/getting-started.html#themeing 但从 0.21.6 版本开始，SCSS 已经无法再进行 @import "grapesjs/src/styles/scss/main.scss"; ，因为 node_modules/grapejs/ 文件夹里的文件缺失了行为准则 [X] 我同意遵守本项目的行为准则
artf
和 https://github.com/GrapesJS/grapesjs/issues/5392 一样的问题
GJS Helper
你好！你正确地发现了 GrapesJS 从版本0.21.x开始打包样式的方式发生了变化。通过npm安装 main.scss 文件和整个 src/styles/scss 目录，确实不再包含在 nodemodules/grapesjs 文件夹中。 根本原因 此变化的原因是 GrapesJS npm包现在分发的是预编译的CSS文件，而非原始SCSS源码。现代库通常这样做是为了简化使用、缩小包大小，并确保不同构建环境中的样式一致。包含SCSS文件的 src 目录是 GrapesJS...
#53882023年9月16日作者 hannydevelop4 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ ChromeV117.0.5938.62 可复制演示链接 https://codesandbox.io/embed/quizzical-galileo-cqldjh?fontsize=14&hidenavigation=1&theme=dark 描述一下那个虫子 如何复现这个漏洞？使用商店管理器的商店页面尝试用无头模式取回他们 预期的行为是什么？ 创建的HTML应与编辑器相同，包括自定义标签。 目前的行为是什么？ 自定义标签和其他非默认标签如 input 会被转换为 div。例如，以下是编辑器的正常行为： 不过，这里有无头模式的代码： 看看...
artf
你好，@hannydevelop你有自定义组件类型，但你没有在“grapesjs.init”上传递任何插件，这就是为什么默认的“div”应用了
hannydevelop
你好@hannydevelop你有自定义组件类型，但没有传递任何插件 grapesjs.init ，所以才应用了默认 div 抱歉我又要重新打开这个，按正常方式添加插件会返回错误：
artf
@hannydevelop能给我看代码吗？
#53162023年8月17日作者 BenKhz3 个回答
GrapesJS 版本[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器？ Chrome v115.0.5790.170可复制演示链接 https://jsfiddle.net/BenKhz/yfwqc6mu/1/ 引用[此处文档]（https://grapesjs.com/docs/api/selector_manager.html#available-events）描述一下那个虫子开放式提供的小提琴 [此处]（https://jsfiddle.net/BenKhz/yfwqc6mu/1/）在 Canvas 上选择一个组件，并通过选择器管理器添加类别。（add 和 update 事件将被捕获）从类管理器中移除一个类e...
artf
你好，@BenKhz之所以这样，是因为“selector*”事件与全局Selectors容器有关（当你从组件中移除选择器时，Selector本身仍然存在，因为它可以在其他地方使用），如果你想跟踪组件选择器的变化，必须使用'component：update：classes'事件
BenKhz
啊！我误会了。谢谢你的澄清。继续加油！
GJS Helper
感谢你举报这个问题并对GrapesJS的善意评价！你提到了一个关于GrapesJS事件的常见困惑点，这是个很好的问题。 根本原因解释 selector:remove事件，正如选择器管理器的GrapesJS API所述，当选择器管理器的全局可选集合中移除Selector模型时触发。这与从特定组件中移除类（由Selector模型表示）不同。 当你通过界面向组件添加类时，如果该类（例如my-class）在选择器管理器的集合中还没有作为Selector模型存在，GrapesJS会为...
#53122023年8月17日作者 srinivas9772 个回答
GrapesJS 版本[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器？ Chrome V115可复制演示链接 https://jsfiddle.net/srinivas977/ahgLxv6e/10/描述一下那个虫子 如何复现这个漏洞？ 在提供的 JSFiddle 中，包含一对文本行并选择列表。接着，添加一个子列表，然后添加子列表。之后，点击选定元素外，子列表中的一个项目会消失。 这个现象也在这个视频链接中看到（从视频第30秒开始注意）： https://github.com/GrapesJS/grapesjs/assets/49796104/59de9aa5-5f3f-43ae-9ed1-358b86ac8b27...
artf
不幸的是，由于默认实现依赖于 [deprecated execCommand]（https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand），导致太多边缘情况难以处理，已经不值得再花时间去处理了。 我建议只用它来处理基本格式（例如加粗、斜体、下划线等），对于更复杂的元素，我强烈建议创建[自定义组件]（https://grapesjs.com/docs/modules/Components.htm...
GJSBlock
谢谢你举报，@srinivas977。 关于列表富文本编辑器缩进操作的问题的好建议！虽然这个具体功能还没有出现在核心 API 中，但有几种方法可以实现类似的行为。 使用事件系统： “JavaScript editor.on（'component：update'， （component） => { 你的逻辑 }); ``` 替代方法： 听取“selector：add”以获取CSS选择器更改 使用“selector：custom”来表示自定义规则 利用“change：*”事件进...
#52862023年8月8日作者 saharhagekr2 个回答
在较小的笔记本屏幕（比如MacBook）上，图片的边框和某些元素的位置不对（当我点击移动或调整图片大小时） 当编辑器在大屏幕上渲染时，我就没有这个问题了。 我不确定是不是我漏掉了什么配置步骤。 有人能帮帮忙吗？这是常见问题吗？ 例如： <img width=“217” alt=“截图 2023-08-08 下午3点20分19分” src=“https://github.com/GrapesJS/grapesjs/assets/121887023/9b83c4a2-c944-4faf-94e0-3d6bca9c80d1”> <img width=“245” alt=“截图 2023-08-08 下午3：20 25” src=“htt...
artf
@saharelhage请避免将讨论转化为议题。GitHub 问题应仅通过正确遵循模板从[这里]（https://github.com/GrapesJS/grapesjs/issues/new/choose）创建。
GJS Helper
你遇到的选择和调整边框在较小屏幕上出现错误位置的问题，尤其是MacBook，是一个常见问题，通常与浏览器在不同缩放条件（浏览器缩放、操作系统显示比例）下渲染内容的方式或CSS冲突有关。GrapesJS依赖JavaScript通过选中组件的 getBoundingClientRect() 等方法计算选中和调整大小的handle位置和尺寸。如果浏览器的渲染上下文被缩放或变换，这些计算值可能无法准确反映屏幕上的视觉位置，导致对齐不一致。这种差异在较小的视口中更为明显，哪怕是轻微的...
#52802023年8月7日作者 fluke7772 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Chrome 版本 115.0.5790.114 可复制演示链接 https://jsfiddle.net/mcraf3se/5/ 描述一下那个虫子 你好，我刚从 GrapesJS 开始，所以很可能我误解了某些根本性的问题。 我在为自定义组件视图设置事件处理程序时遇到了困难。 如何复现这个漏洞？ 在链接的JS小提琴中。将我的分区拖拽到画布上点击其中（应该有带有“stuff”的div）。 预期的行为是什么？ 根据文档[这里]（https://grapesjs.com/docs/modules/Components.html#define-cu...
artf
这里的错误是用了箭头函数，只需用 'clickOnElement（） {' 来替代它
GJS Helper
你遇到的问题是，this在自定义组件的视图事件处理程序中window或undefined，是常见的JavaScriptthis绑定问题，尤其是在使用箭头函数时。这不是GrapesJS的bug，而是对对象方法中箭头函数this工作的误解。 根本原因 在JavaScript中，箭头函数（() => { ... }）词法绑定this。这意味着它们没有自己的this上下文;相反，它们继承了定义时的包围作用域的this。在像你view定义这样的对象文字上下文中，词汇this通常是全局...
#52212023年7月7日作者 Staubgeborener2 个回答
GrapesJS 版本[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器？ Safari 16.5可复制演示链接 https://grapesjs.com/demo.html https://staubgeborener.de/描述一下那个虫子 我试用了官方的[演示]（https://grapesjs.com/demo.html）。我什么都没改，只是点击 view code 按钮，下载html和css文件作为压缩压缩包。这些文件已经上传到我的网页服务器上，桌面设备运行得很正常。但当我用移动设备访问这个网页服务器（比如iOS-Safari浏览器）时，网站仍然是桌面版，而不是移动端版本。演示本身已经实现了移动版。 如何复现...
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...
#51992023年6月23日作者 rmadeiraneto3 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Chrome v114 可复制演示链接 https://jsfiddle.net/rmadeiraneto/t659usxv/39/ 描述一下那个虫子 如何复现这个漏洞？进入块列表，将自定义组件“示例”拖到画布上画布中显示三个来自默认属性（数组）的元素选择“示例”组件进入特质面板，点击加号图标几次这将将示例组件属性中的项目添加到数组中，并在页面中绘制将另一个示例块拖入画布注意你添加到数组中的项目也在该组件的新实例中显示 预期的行为是什么？ 在更改第一个组件的属性后创建第二个组件实例时，预期第二个组件的属性会是默认值 [1,2,3] 中在 c...
artf
感谢@rmadeiraneto的报告。是的，不幸的是，如果你以这种方式变异数组/对象属性，这就是个问题，为了避免这种情况，你有两个选择：避免直接变异（更新时分配新引用）将“默认值”定义为函数 “''js 默认值： （） => （{ customArray： [1,2,3] }）， ``` 但不幸的是......第二个选项现在😅不行，我会在下一个版本修复它
rmadeiraneto
@artf使用默认值作为函数是可行的，感谢你的快速回复和提供解决这个问题的替代方案。 关于第一个建议，我认为问题不在于人们是否应该变异或不变异对象，因为我们讨论的是使用提供的方法（集合）。抱歉我没时间看源代码，但你很可能在“set”方法里变了默认对象，可能是因为引用来自组件生命周期的早期。同样，没有深入看代码，我假设当你将默认值与组件属性合并时，你保留了对默认对象的引用，而不是使用会返回副本的合并方法，比如 from immutable。 我会尽量找时间研究代码，并提出更具...
GJS Helper
你描述的问题是 JavaScript 中常见的一个陷阱，涉及当可变对象（如数组和对象）被分配为默认值时的处理方式。在 GrapesJS中，当你定义包含数组或对象的defaults组件时，这些组件是通过引用分配给新的组件实例。如果你在某个实例上修改了这样的属性，实际上是在修改原始默认引用，这会影响该组件类型创建的所有后续实例。 根本原因 当你在组件的defaults中定义customArray: [1, 2, 3]时，这个数组[1, 2, 3]只创建一次。每当一个新的“示例”...
#51752023年6月10日作者 krishnaeverestengineering4 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ 铬 可复制演示链接 https://codesandbox.io/s/adoring-margulis-873kdv 描述一下那个虫子 背景 移动组件的方法没有按预期工作。 这段代码没有按预期工作。 这段代码应该可以正常工作。当 sameParent 是 false 且目标索引是 1 时，比如它不会移动到 0 对 1 的位置行为准则 [X] 我同意遵守本项目的行为准则
krishnaeverestengineering
解决方法：https://github.com/GrapesJS/grapesjs/pull/5176
artf
谢谢@krishnaeverestengineering，但这实际上是将组件移入同父节点时的预期行为。这是因为“at”还应考虑组件本身的索引。 所以，如果你尝试将“组件1”移到索引0或1，什么都不会发生。如果你需要把它移到“组件2”以下，你必须标注索引2
krishnaeverestengineering
谢谢@krishnaeverestengineering，但这实际上是将组件移入同一父节点时的预期行为。这是因为“at”还应考虑组件本身的索引。 所以，如果你尝试将“组件1”移到索引0或1，什么都不会发生。如果你需要把它移到“组件2”以下，你必须标注索引2 但我不太理解它的使用场景。通常在最后版本中，'at '应该算是索引。那怎么把组件从0移到索引1呢？
#51732023年6月9日作者 FaisalShaikhHA3 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ 版本 112.0.5615.137（官方构建）（arm64） 可复制演示链接 https://jsfiddle.net/yhj6qa1u/6/ 描述一下那个虫子 如何复现这个漏洞？选择一个组件，并使用样式管理器添加样式。使用 editor.Css.setRule 为该组件设置样式，注意之前的样式已被移除，但根据文档，它应该会更新CSS规则。 预期的行为是什么？ 它应该更新现有规则。 目前的行为是什么？ 它取消了现有规则，而不是更新现有规则。 https://github.com/GrapesJS/grapesjs/assets/102785...
artf
你好，@FaisalShaikhHA这是预期中的行为，但我猜“setRule”的文档有点误导。规则实际上是更新的（不会用相同的选择器创建新的规则），但样式只是被替换。 如果你需要添加新样式而不是替换它们，这就是你应该做的 “''js const selector = '#${this.getId（）}'; const rule = 编辑器。Css.getRule（selector）; 编辑。Css.setRule（selector， { ...统治？getStyle（），...
GJS Helper
你在editor.Css.setRule上观察到的行为不是bug，而是GrapesJS CSS Composer API设计时如何处理规则更新。当你调用editor.Css.setRule(selector, styleObject)时，如果已经存在带有该选择器（以及媒体查询、状态等其他上下文）的规则，GrapesJS会用你提供的新styleObject版本替换该规则的整个样式对象。它不会自动将新属性与现有属性合并。 这与GrapesJS（以及GrapesJSBackbon...