#55632023年12月18日作者 leo-budgetsimple1 个回答
GrapesJS 版本[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器？ 最新版本的Chrome浏览器可复制演示链接 https://grapesjs.com/demo.html描述一下那个虫子 如何复现这个漏洞？ 用这个代码把一个html字符串渲染成 grapesjs （我启用了allowScripts） 这是渲染好的画布 ![图片]（https://github.com/GrapesJS/grapesjs/assets/107002063/21087a5d-348b-4e16-a349-43243ac8f2e1） 这是可以导出的HTML字符串图片 ![图片]（https://github.com/GrapesJS...
GJS Helper
你观察到脚本标签属性不出现在 GrapesJS 画布上，而导出的HTML中却存在，这是预期且设计中的， GrapesJS 处理非视觉元素，尤其是携带数据的脚本标签。这不是漏洞，而是编辑器内部架构及其专注于提供稳定安全的视觉编辑环境的结果。 根本原因解释 内部组件模型与画布渲染： 当你使用 editor.setComponents()时， GrapesJS 会将你的 HTML 字符串解析到其内部组件模型中。使用 allowScripts: true时， <script> 标签...
#55562023年12月13日作者 pittleCheung2 个回答
GrapesJS版本 [X] 我确认使用最新版本GrapesJS 你用的是什么浏览器？ 最新版本的Chrome浏览器 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子 如何复现这个漏洞？ editor.addComponents(` <ul class="mb-5 flex list-none flex-row flex-wrap border-b-0 pl-0" role=“tablist” data-te-nav-ref > <li role=“演示”> <a class="my-2 block border-x-0 border-b-2 border-t-0 border-tra...
artf
已经报告并修复了 https://github.com/GrapesJS/grapesjs/issues/5525
GJS Helper
你遇到的问题是，当添加和选择包含大量实用类的元素时（尤其是像Tailwind CSS这样的框架或使用data-[...]属性的组件库），GrapesJS崩溃或无响应，是已知的性能瓶颈。 根本原因 GrapesJS默认会尝试解析 HTML 内容中发现的每个唯一类，并将其注册到内部类管理器中。这些类随后会在样式管理器面板中提供，供选择和取消使用。当添加一个具有极多实用类（例如 px-7 pb-3.5 pt-4 text-xs font-medium uppercase lead...
#55452023年12月5日作者 AFriboulet-ii1 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ 版本 119.0.6045.200 可复制演示链接 https://jsfiddle.net/d64pkcom/1/ 描述一下那个虫子 如何复现这个漏洞？在 Canvas 中拖拽组件文本观看jsfiddle控制台 预期的行为是什么？ 不要触发RTE：禁用 目前的行为是什么？ 触发RTE：禁用 https://github.com/GrapesJS/grapesjs/assets/128728949/b7fc7998-aeef-47d5-84f4-af74966d56cf 行为准则 [X] 我同意遵守本项目的行为准则
GJS Helper
你准确地识别出GrapesJS中一个小但意外的行为：当从块面板拖拽新组件（比如文本块）到画布时，触发了rte:disable事件。这确实不是预期的行为，因为富文本编辑器（RTE）只有在之前在所选组件上激活时才应该被禁用。 根本原因 rte:disable事件由GrapesJS RTE模块在其disable()方法被调用时发出。该方法通常在取消选中具有活跃RTE的组件，或编辑者内部状态要求停用RTE时调用。在从块面板拖拽操作时，GrapesJS的内部逻辑可能执行隐式触发“清除...
#55362023年11月29日作者 adiux1 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Chrome 版本 119 可复制演示链接 https://jsfiddle.net/bj7afw63/1/ 描述一下那个虫子 如何复现这个漏洞？装填小提琴尝试添加默认RTE（非CKE）的链接界面中没有任何变化，控制台出现 JS 错误：TypeError： $ 不是函数 预期的行为是什么？ 在 mj-text 组件的界面中添加了一个链接。 目前的行为是什么？ 链接未被添加。 我目前发现的 我追踪到GJS方法的错误：[getModel（）]（https://github.com/GrapesJS/grapesjs/blob/149a9b2ad...
GJSBlock
谢谢你举报，@adiux。 关于无法添加链接：getModel（） 失败，TypeError： $ 不是函数，这个问题很棒。ProseMirror 推荐的方法是使用事件驱动的 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => co...
#55252023年11月19日作者 duydvu2 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Edge v119.0.2151.72 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子 你好，感谢你创建了一个了不起的项目。我想报告使用 GrapesJS时发现的一个问题。 如何复现这个漏洞？选择一个组件添加任意名称的类，直到组件超过20个类。选择另一个组件并重新选择该组件。 预期的行为是什么？ 不应该有性能问题。 目前的行为是什么？ 浏览器会明显卡死一段时间。添加的类越多，卡死的时间越长。当组件有23个类时，我的浏览器会卡顿10秒。 这是使用 TailwindCSS 时常见的问题，因为类很多...
artf
同意建议，我会相应更新。谢谢@duydvu
GJSBlock
谢谢你举报，@duydvu。 关于在单个组件中添加超过20个职业时性能问题的好问题。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'somethi...
#55232023年11月18日作者 lexoyo2 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Firefox 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子 如何复现这个漏洞？选择舞台上的组件用 CTRL+c 复制组件选择实体（取消选择组件）用CTRL+V粘贴 预期的行为是什么？ 在正文末尾粘贴当前页面 目前的行为是什么？ 由于以下条件，它什么都不做： https://github.com/GrapesJS/grapesjs/blob/8025b95a645907574389e950f32950190ceb602c/src/commands/view/PasteComponent.ts...
lexoyo
注意，这个bug导致无法将元素复制粘贴到空白页面
GJS Helper
你描述的问题是GrapesJS默认 paste-component 命令中的已知行为。根本原因在于命令的实现，特别是其run方法开头的条件if (!selected || !selected.length) return;。如果画布上当前没有选中组件，这个检查会阻止粘贴操作继续。 设计上，默认paste-component命令期望选中的组件决定将复制内容插入的位置（通常是在所选组件旁边）。当没有选择任何内容时，它就没有上下文目标，因此没有任何作用。 为了实现预期行为——在没...
#55032023年11月6日作者 MaxwellTheSecond3 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ 铬 可复制演示链接 没有 描述一下那个虫子 Component.ts 的 replaceWith 方法没有字符串类型。 预期的行为是什么？ 我应该能像示例中那样用字符串替换组件 component.replaceWith('<div>Some new content</div>'); 目前的行为是什么？ ![grapesproblem]（https://github.com/GrapesJS/grapesjs/资产/81811949/67837b49-a81f-4c07-a8b1-9d5481f457a1） 行为准则 [X] 我同意遵守本项...
artf
合并 https://github.com/GrapesJS/grapesjs/pull/5504
GJS Helper
你正确识别了GrapesJSreplaceWith方法的TypeScript类型问题。虽然该方法内部支持用HTML字符串替换组件，但其TypeScript定义（Component.d.ts）目前未反映这一点，导致开发环境中出现类型错误。 根本原因 GrapesJS 中的 replaceWith 方法设计为灵活。当你传递字符串时，GrapesJS的内部 HTML 解析器（editor.Parser.parseHtml）会被调用，将该字符串转换为GrapesJS组件，然后再执行...
#54872023年10月28日作者 MaxDBenson3 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Firefox 可复制演示链接 https://jsfiddle.net/497zkrpm/1/ 描述一下那个虫子 如何复现这个漏洞？选择“Hello World”组件打开样式管理器，确保在类部分勾选了“myclass”检查“高度”和“背景颜色”属性的值 预期的行为是什么？ 样式管理器应反映与所选类相关的所有规则（此处为 .myclass {height: 100px} 和 .myclass {background-color: green} 目前的行为是什么？ 样式管理器只反映与所选类相关的第一个规则（此处为： .myclass {hei...
artf
这不是bug，样式管理器一次只处理一条规则，如果你想要更高级的使用，可以用API实现功能（比如用同一选择器选择不同规则）。
MaxDBenson
这不是个bug，样式管理器一次只处理一条规则，如果你想要更高级的使用，可以用API实现你的功能（比如用同一个选择器选择不同规则）。 我明白了。 你介意详细说说该怎么做吗？ 而且，风格管理器似乎一次只处理一条规则;因为当我选择类时，我会看到属性/值设置被应用到ID上，反之亦然。
GJS Helper
你遇到的 GrapesJS 样式管理器无法显示同一类所有规则的问题，是由于编辑器内部CssComposer和StyleManager与 CSS 规则的交互方式，这是已知的行为。虽然 CSS 本身允许同一选择器使用多个规则块（浏览器会根据级联正确应用所有规则块），但GrapesJS样式管理器的界面主要反映的是与某个选择器关联的单个 CssRule 模型的属性。 根本原因 当GrapesJS解析你的CSS时，它会为每个不同的CSS规则块创建独立的CssRule模型。所以，针对你...
#54842023年10月26日作者 pittleCheung2 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ 最新版本的Chrome浏览器 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子 https://github.com/GrapesJS/components-tabs 问题一 <img width=“1421” alt=“image” src=“”https://github.com/GrapesJS/grapesjs/assets/114127651/a3afe6c7-d644-40f0-97e5-cc3e3c595939“> 点击标签克隆，标签四是被克隆的，请看下面的图片 <img widt...
artf
请只针对核心库相关的漏洞问题，而不是插件。
GJS Helper
你在GrapesJS中克隆标签页和整个标签组件时遇到的问题，特别是针对grapesjs-components-tabs插件，源于GrapesJS在克隆过程中如何处理组件ID。grapesjs-components-tabs插件依赖于标签按钮上的独特data-tab-id属性，以及标签内容面板上的相应id和data-tab-pane-id属性来连接它们。当组件被克隆时，GrapesJS会为克隆组件本身生成新的唯一ID，但它不会自动更新这些自定义链接属性（data-tab-id...
#54602023年10月12日作者 mapsmarketing4 个回答
GrapesJS版本[X] 我确认使用最新版本GrapesJS你用的是什么浏览器？ Chrome v117.0.5938.149可复制演示链接 https://jsfiddle.net/9oLrsvya/描述一下那个虫子 如何复现这个漏洞？请查看jsfiddle中的pageManager对象 预期的行为是什么？ 查看以下文档：https://grapesjs.com/docs/api/pages.html#pages 它应该能加载进component，并stylespageManager到编辑器中。 目前的行为是什么？ 当你通过编辑器中的“查看代码”检查代码时，你会发现既没有完全相同的 HTML，也没有样式正确加载。body 标签...
mapsmarketing
有个烦人的点是，编辑器会在下面默认样式前面加上，保存这些样式时会有许多重复的样式： 编辑： 查看文档后，我终于找到了“protectedCss”，设置为空时，样式的前置功能就停止了。
artf
你好@mapsmarketing目前 GrapesJS 无法正确导入 HTML 文档的字符串格式，所以解析器会跳过像 “html”、“head”、“body” 这样的元素，只返回“body”内部解析出来的内容，你现在可以做的一个变通方法是把组件作为对象传递 “''js 组件：{ 属性：{ ID： 'IGNT' }， components： '<div class=“my-el”>测试世界！</div>'， }, ``` 关于样式，这是浏览器默认的CSSOM解析器问题，请参考...
mapsmarketing
你好@artf， 我找到了一种方法，可以通过以下方法正确保存“身体”属性和样式： 我注意到你的[Page.toJSON]（https://github.com/GrapesJS/grapesjs/blob/e03dfc7483b7fd936f3580bee78fee6d03c2b055/src/pages/model/Page.ts#L134-L149）输出了指定页面的所有内容。不过，它似乎无法正确输出“样式”（我总是被设置为未定义），所以我通过编辑器检索了激活页面的样式，...