#57392024年3月11日作者 rhoenerSBS1 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Chrome v122 可复制演示链接 不适用 描述一下那个虫子 最新版本附带的ColorPicker界面定义了“preferredFormat”选项，期望获得“布尔值”，但Spectrum Colorpicker的文档显示必须是类型为“string”（文档：https://bgrins.github.io/spectrum/#options-preferredFormat） 这会导致 TypeScript 项目编译时出现错误。 如何复现这个漏洞？定义ColorPicker的“preferredFormat”选项，取自Spectrum文档中...
GJS Helper
这确实是关于ColorPickerOptions接口 TypeScript 类型定义GrapesJS的有效错误报告。根据底层 Spectrum Colorpicker 库的文档，preferredFormat属性被错误地类型化为 boolean，而应string。 根本原因 ColorPickerOptions的GrapesJS类型定义（通常出现在GrapesJS包内的index.d.ts或类似声明文件中）包含了以下错误的preferredFormat类型： 然而，Grap...
#57152024年3月4日作者 afrinxnahar1 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Firefox 版本 123.0（64 位） 可复制演示链接 不在 描述一下那个虫子 我猜大多数.js文件都已经变成打字稿了，但可能还有像下面这个那样的坏链接...... ![GJS3]（https://github.com/GrapesJS/grapesjs/资产/125039325/A42D8156-13e5-4ba0-9cd5-6249ded1d75a）行为准则 [X] 我同意遵守本项目的行为准则
GJS Helper
感谢你在GrapesJS API文档中报告了这个坏链。你已经正确识别了根本原因。 根本原因 GrapesJS项目正在经历从JavaScript向TypeScript的重大迁移。作为这一过程的一部分，许多.js源文件被重命名为.ts或.tsx文件。你提供的链接https://github.com/GrapesJS/grapesjs/blob/dev/src/editor/model/Editor.js指向一个在dev分支上该路径和扩展名下已不存在的文件。 解决方案/变通方法...
#57082024年2月27日作者 ravisaxena2 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Chrome最新 可复制演示链接 我们现在运行在本地机器上 描述一下那个虫子 你好，目前 grapesjs 提供了内置属性，比如margin、padding，允许用户逐项更改每个属性（margin-top、margin-bottom等）。 如果能同时更改所有这些属性会更好。比如有锁定按钮，启用后会自动同时更改所有属性，而不是一个个更改。 行为准则 [X] 我同意遵守本项目的行为准则
artf
请避免在未阅读模板中漏洞问题的具体目的前打开BUG问题。
GJS Helper
这是提升 GrapesJS 样式体验的绝佳建议！默认情况下， GrapesJS的样式管理器提供对 CSS 属性如 margin 和 padding的细致控制，允许你单独调整每一侧（上、右、下、左）。虽然没有内置的“锁定”按钮来链接这些属性，但你可以通过创建自定义属性类型实现将所有侧面合并的功能。 这个自定义属性将作为“简写”控件。当你修改它的值时，它会自动更新所选组件上的四个单独边距或填充属性（例如， margin-top、 margin-right、 margin-bot...
#57052024年2月26日作者 bernesto4 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Chrome v122 可复制演示链接 https://jsfiddle.net/Lk2bwhp4/ 描述一下那个虫子 如何复现这个漏洞？将编辑器放入容器中，然后通过程序调整容器的宽度。 预期的行为是什么？ 编辑器及其所有子节点应相应调整大小。 目前的行为是什么？ 编辑器中所有组件的画布位置都保留了画布调整前的偏移。 注意，窗口调整大小会重置位置。这必须在窗口内通过程序实现。用例包括编辑器在页面上，有其他面板可以调整编辑空间大小。在下面的示例中，查看在将编辑器调整到更大宽度后，工具如何与相关元素对齐。工具保持在原来的位置，直到某个事件触发更...
artf
感谢@bernesto报告，但由于我们无法检测程序布局的变化而不影响性能，在这种情况下，你必须通过 ['editor.refresh（）]]（https://grapesjs.com/docs/api/editor.html#refresh） 手动更新编辑器布局（例如，在你的例子中，调用直接放在 resizeEditor 函数的末尾）
bernesto
你好，@artf，我其实不小心把这个混在你最后接受的拉取请求里（src/canvas/model/Frame.ts）。你可以看看我添加的内容，看看是否造成了问题。我们现在正在测试中，没有看到性能下降，而且它解决了问题。
artf
我其实把这个误混在你上次接受的拉取请求里了 我实际上删掉了，因为看起来没什么关系 🤣 补充回来没问题，但要考虑你的例子只有桌面设备才会有效。宽度填充了容器，这会触发iframe窗口的缩小（然后触发新增事件）。如果你换成更小的设备，这个方法就不行了，那时不会触发调整大小事件，所以你仍然需要刷新调用。
#56072024年1月10日作者 Ju99ernaut2 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Chrome v120.0.6099.199 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子 如何复现这个漏洞？将第1列方块拖到画布上将任何其他块拖入单元格，例如文本选择单元打开图层面板 预期的行为是什么？ 我们应该能够展开单元格，并通过图层选择单元格内的元素 <img width=“1438” alt=“截图 2024-01-10 下午5 42 36” src=“https://github.com/GrapesJS/grapesjs/assets/48953676/043150f3-9c7...
GJS Helper
这是GrapesJS中已知的一个漏洞，与图层面板（特别是Layer视图）对组件子集合变化的反应有关。问题出现在组件（如列或单元格）最初是空的，然后内容被拖入时。图层面板未能更新父组件的图层以显示展开/折叠的插入点，阻止访问其嵌套元素。 根本原因 GrapesJS中的Layer视图负责渲染图层面板中的每个项目，会监听其关联组件模型上的change:open和change:components事件，以决定是否渲染展开/折叠的插入点。然而，在Backbone.js（GrapesJ...
#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...
#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组件，然后再执行...
#55012023年11月5日作者 eko3alpha1 个回答
GrapesJS版本 [X] 我确认使用最新版本GrapesJS 你用的是什么浏览器？ Chrome/Safai/Firefox 可复制演示链接 https://grapesjs.com/docs/getting-started.html#layers 描述一下那个虫子 如何复现这个bug？ 请访问[此链接]（https://grapesjs.com/docs/getting-started.html#layers）的“GrapesJS入门指南”文档。 尝试通过拖动图层面板的左边来调整它的大小。 注意面板的漂移行为。 预期的行为是什么？ 调整图层面板大小时，宽度应平滑调整，不会左右偏移。面板右边应固定固定，只有宽度变化。 目前的行...
GJS Helper
你准确地指出了GrapesJS“入门”演示中关于右侧面板尺寸调整的布局漏洞。你观察到的漂移行为确实不是预期的平滑调整尺寸，面板右边保持固定。 根本原因分析 GrapesJS编辑器通常使用弹性盒布局作为主结构。面板（如图层面板）是主编辑器容器（.gjs-editor）中的flex项。为了确保右侧面板始终被推向最右边并从左边调整大小，GrapesJS的默认CSS包含一条规则来应用margin-left: auto;。该margin-left: auto;属性会占用元素左侧的所有...
#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）输出了指定页面的所有内容。不过，它似乎无法正确输出“样式”（我总是被设置为未定义），所以我通过编辑器检索了激活页面的样式，...
#54502023年10月10日作者 ChiragS-Prajapati2 个回答
GrapesJS版本 [X] 我确认使用最新版本GrapesJS 你用的是什么浏览器？ 版本 117.0.5938.134（官方构建）（64位） 可复制演示链接 https://jsfiddle.net/ap404703/0e5zop1n/ 描述一下那个虫子 示例如下 Grapes Js 文件 ：- 初始化GrapesJSconst editor = grapesjs.init({ 画布：{ 风格：[ “https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css”， “https://unpkg.com/swiper@7/swiper-bundle.min.css” ] }, st...
artf
@ChiragS-Prajapati 你必须使用 [可拖拽/丢弃组件属性]（https://grapesjs.com/docs/api/component.html#properties）来控制组件可以拖拽的位置，以及哪些组件可以被丢入其中。
GJS Helper
你遇到的问题是，一个部分块可以被丢弃到另一个区块里，这是GrapesJS默认常见的行为。GrapesJS 把 HTML 元素如 <div> 和 <section> 当作容器，允许其他组件嵌套其中，除非明确说明。你的自定义块作为<section>元素，因此是可丢弃的目标。 根本原因 GrapesJS 中 section 元素的默认组件模型允许它接受子组件。当你用简单的 HTML 字符串（如 <section class="..."><button>...</button></...