#60122024年7月21日作者 aswinkumar8631 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Chrome v126 可复制演示链接 https://codepen.io/aswinkumar863/pen/VwJaVYG 描述一下那个虫子 如何复现这个漏洞？打开[演示]（https://codepen.io/aswinkumar863/pen/VwJaVYG）。点击编辑正文中的“点击我”部分。导航到Style Manager并选择General > Top。在输入框中输入任意数字，但不点击外部。点击上或下箭头。 注意： 此行为仅在输入字段未被点击时观察到。数字特征也受此问题影响。 预期的行为是什么？ 输入数字应与当前输入的值递增或...
GJS Helper
你准确指出了GrapesJS中的一个bug，就是风格管理器和特性管理器中的input type="number"字段在使用上下箭头时，无法正确保留手动输入的数值，除非先模糊输入。这导致箭头是从模型最后保存的值开始增减，而不是输入字段当前显示的值。 根本原因 根本原因在于GrapesJS的事件处理机制，PropertyNumberView（样式管理器属性）和TraitNumberView（组件特征）。这些视图通常监听输入字段上的change事件以更新底层GrapesJS模型。...
#60012024年7月13日作者 thigh1 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ MS Edge 126.0.2592.87（官方版本）（arm64） 可复制演示链接 无 描述一下那个虫子 如何复现这个漏洞？...使用 grapesjs的0.21.11或0.21.12版本，创建一个多页项目。在页面A时，图层管理器正常工作。切换到页面B同样正常。 ...切回页面A会导致图层管理器停止响应，使其无用。实际上，切换到之前加载的任意页面会导致这个问题，但首次切换到任意页面则正常。 切回v0.21.10问题解决 预期的行为是什么？ ...图层panager应反映当前加载页面的组件并允许交互。 目前的行为是什么？ ...图层管理器停...
GJS Helper
看起来你在0.21.11和0.21.12版本中遇到了已知的回归GrapesJS与多页面项目中层管理器行为相关的现象。问题出现在切回之前加载过的页面时，导致层管理器失去响应。 根本原因解释 GrapesJS层管理器由一个负责渲染组件树的 LayerManagerView 驱动。该视图维护对应显示组件的collection的参考，通常是 editor.DomComponents.getWrapper().get('components')（当前页面根组件的子节点）。 当你在Gr...
#59932024年7月5日作者 TutorialMan77272 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ 歌剧109 可复制演示链接 https://jsfiddle.net/9zmyrhoe/ 描述一下那个虫子 如何复现这个漏洞？ 打开上面的 jsfiddle 然后跑 预期的行为是什么？ 这些面板本不该展示 目前的行为是什么？ 黑色空面板 如果有任何额外信息，欢迎随时提问 行为准则 [X] 我同意遵守本项目的行为准则
TutorialMan7727
所以，下面的CSS没有工作。我不得不手动更改grapes.min.css文件里的CSS。 CSS 无法在 grapes.min.css 中覆盖 CSS。 .gjs-cv-canvas { 顶部：0; 宽度：100%; 身高：100%; }
GJS Helper
即使panels.defaults设置为空数组，GrapesJS编辑器中出现“空白黑色面板”的问题，源自GrapesJS初始化界面的方式。虽然设置panels.defaults: []会阻止任何按钮或内容添加到默认面板中，但这些面板的HTML容器默认仍会被创建并附加到编辑器的DOM。如果这些容器是空的且背景颜色（无论是GrapesJS的默认CSS还是浏览器的用户代理样式表），它们将以可见的空框形式出现。 你的设置是用appendTo blockManager、layerMa...
#59902024年7月4日作者 ihatov084 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Chrome 126.0.6478.127（Windows） 可复制演示链接 https://jsfiddle.net/t06s4oLb/8/ 描述一下那个虫子 如何复现这个漏洞？将第1节添加到画布上在第1节下将第2节添加到画布中将画布上的第2节移除。第一节的风格将被打破。 https://github.com/GrapesJS/grapesjs/assets/14024165/097dbe62-d8d3-4270-930d-5668ef10c2df 预期的行为是什么？ 我希望即使不同组件有相同的类，它也不会被删除。 目前的行为是什么？ 原...
artf
你应该避免把共享样式放在组件相关的样式里。 请查看关于如何预防这种情况的讨论：https://github.com/GrapesJS/grapesjs/discussions/5968
ihatov08
作为临时变通，每个组件的样式前缀都带有 id。 “''js 从 './data/hero-1' 导入 { HTML 作为 hero1html，css 作为 hero1css }; 从 './data/content-1' 导入 { html 作为 content1html，css 作为 content1css }; 连续来源 = [ { 编号：“英雄-1”， 名字：“英雄1号”， 分类：“英雄”， HTML：hero1html， CSS：hero1css， 类别：“BG-G...
ihatov08
@artf 谢谢你的回复。 我想确认一下#5968
#59892024年7月4日作者 ihatov083 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Chrome 126.0.6478.127（Windows） 可复制演示链接 https://jsfiddle.net/vbu18q5f/2/ 描述一下那个虫子 如何复现这个漏洞？如果标签嵌套，则无法在画布上选择 Demolink中的第2节块在section标签里面有div标签。 第2节 块无法在Canvas中选择部分标签，div标签被选中。 这带来了两个问题。选中了div标签，所以当你尝试删除画布上的方块时， 只有 div 标签会被删除，section 标签会保留。 你不能从画布中删除所有方块元素，所以要删除所有方块元素，必须在图层管理器...
ihatov08
@artf 抱歉，框架并不像你说的那样解决所有问题。 我以后会认真阅读文档。 谢谢你的回复。
artf
这不是个bug，更像是与HTML整体工作方式相关的用户体验问题，这也是我们在工具栏里提供“选择父”按钮的确切原因。 不要指望框架能帮你解决所有问题，提供用户友好界面和更好的用户体验是开发者的责任，有很多[组件属性]（https://grapesjs.com/docs/api/component.html#properties）可以帮上忙。
GJS Helper
这是像 GrapesJS 这样的可视化编辑器中常见的挑战，因为元素嵌套且视觉上重叠或维度相似。问题的核心在于 GrapesJS （以及浏览器整体）如何处理画布上的点击事件和组件选择。 根本原因 GrapesJS的默认选择机制，类似于标准的浏览器事件气泡，优先考虑点击坐标处最内侧的元素。当子元素（例如你在“第2区”中的 div ）完全覆盖或与其父元素具有相同的有效可点击区域（section）时，点击事件总是会先在子组件上注册。这防止了通过画布点击直接选择父组件。 这种行为导致...
#59842024年7月2日作者 Ju99ernaut1 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Chrome v123.0.6312.124 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子 如何复现这个漏洞？添加文本元素打开RTE并输入单词选择单词并将其作为链接或包裹以符合风格添加空格并输入第二个单词选择第二个词，并将其设置为链接或包裹风格 预期的行为是什么？ 空间应当被保留 目前的行为是什么？ 空间正在被清理 https://www.loom.com/share/e4638445ed264ce6826657975b0c9a4c?sid=ad27081d-045b-40d7-9041-3...
GJS Helper
你遇到的 GrapesJS 富文本编辑器（RTE）中样式元素（如链接）之间空格被移除的问题，是许多 HTML 编辑器和浏览器中由于空白处理方式常见的现象。当两个内联元素（例如 <a> 标签）相邻时，浏览器渲染引擎或编辑器内部规范化过程通常会合并或删除它们之间的普通空格字符。 根本原因： GrapesJS RTE 利用 ProseMirror，旨在生成干净且语义正确的 HTML。规则空格字符（ ）通常被视为可折叠的空白。当你对“word1”再对“word2”应用样式（如链接）...
#59822024年7月2日作者 ihatov082 个回答
GrapesJS版本[x] 我确认使用最新版本GrapesJS你用的是什么浏览器？ Chrome 126.0.6478.127可复制演示链接 https://jsfiddle.net/6m53pwy7/4/描述一下那个虫子 如何复现这个漏洞？ 我想用[Tailwind]（https://tailwindcss.com/）配合GrapesJS，但这个框架使用Utility-First的CSS类来构建快速布局。问题是它还使用[“特殊”类]（https://tailwindcss.com/docs/state-variants/#app）来定义样式变体，例如：hover：bg-blue 或 md：w-full 等。 包含冒号的样式，如...
artf
你需要正确地逃离CSS “''js .md\\:p-18 { 填充：4rem; } ```
GJS Helper
看起来你遇到了GrapesJS的CSS解析和样式管理中的已知限制或bug，涉及包含逃逸冒号（\:）的选择器，这在像Tailwind CSS这样的框架中很常见，适用于响应式变体（例如md:flex-row）或伪类（例如hover:bg-black）。 漏洞的根本原因 GrapesJS 使用内部 CSS 解析器（通常是 css-tree）和样式管理器来处理、存储和序列化 CSS 规则。当你在 domc.addType中使用 styles 属性定义样式时，GrapesJS 尝试解...
#59692024年6月25日作者 uncldrw1 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Chrome LTS 可复制演示链接 / 描述一下那个虫子 我注意到导出代码时@container指令缺少空白。 这是我提供的代码： 要在自定义块中使用它，我会把CSS保存到块的style属性里，看起来是这样的： 为了确保间距，我尝试加了一个“逃脱”空格，但没成功： 打开导出代码时，@container名后面缺少空格，导致CSS损坏，在HTML中无法正常工作。 结果CSS： 需要解决这个问题，以确保导出的 CSS 中@container查询能正常运行。 行为准则 [X] 我同意遵守本项目的行为准则
GJS Helper
你在处理指定名称的@container指令时，发现了GrapesJS的CSS序列化过程中的一个合法错误。问题源于内部的CSS解析器/导出器在导出时剥离了容器名称与查询条件之间的重要空白，导致CSS无效。 根本原因 GrapesJS 内部处理 CSS，通常会规范化或压缩 CSS。虽然这通常有益，但在命名@container规则（例如 @container portable (max-width: 639px)）的情况下，序列化器错误地移除了容器名称（portable）与查询条...
#59422024年6月12日作者 adarshsingh1972 个回答
GrapesJS版本 [X] 我确认使用最新版本GrapesJS 你用的是什么浏览器？ 镀铬 可复制演示链接 我在期刊中提供了代码 描述一下那个虫子 [截图时间：2024-06-12 下午3：09：58 IST.webm]（https://github.com/GrapesJS/grapesjs/assets/130237200/d5bbb21e-2e44-4564-a407-4768776c1cd8） 问题是，刚应用任何加粗或斜体后，点击某处就会消失。 onMounted（async （） => { componentsTypeScript.value = {}; componentsDefaults.value = {}; a...
artf
从官方演示来看，它似乎按预期工作，所以我猜这和你的自定义逻辑有关。 请提供一个简短且可复现的问题演示。
GJS Helper
你遇到的问题是，加粗或斜体格式在应用后点击后消失，这是自定义GrapesJS富文本编辑器（RTE）时常见的同步问题custom: true。 根本原因 当你在GrapesJS配置中设置richTextEditor: { custom: true }时，实际上是在告诉GrapesJS你将完全控制RTE的工具栏及其操作。因此，GrapesJS不会为“加粗”和“斜体”等动作提供默认实现，即使它们在actions数组中列出。 你的代码随后尝试用 rte.add('bold', {...
#59412024年6月11日作者 shahsalmanbukhari3 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Chrome 125.0.6422.113 可复制演示链接 <script src=“https://grapesjs.com/js/toastr.min.js”></script> 描述一下那个虫子 如何复现这个漏洞？只需点击这些链接中的任意一个，他们会显示404页 预期的行为是什么？ 它应该能从CDN加载文件 目前的行为是什么？ 文件不会从CDN加载 如果需要执行某些代码以重现该漏洞，请将其粘贴到下面： 行为准则 [X] 我同意遵守本项目的行为准则
artf
嘿，@shahsalmanbukhari你说的不是CDN，而是公开网站上的简单资源。请不要使用它们，因为没有版本控制，甚至不保证不会被迁移（因为网站迁移导致的）。 请使用真实的CDN作为使用方式 https://unpkg.com/grapesjs
shahsalmanbukhari
嘿@shahsalmanbukhari你说的不是CDN，而是公共网站上的简单资源。请不要使用它们，因为没有版本控制，甚至不保证不会被迁移（因为网站迁移导致的）。使用真实的CDN作为 https://unpkg.com/grapesjs 你好@artf 非常感谢，让我试试你建议的解决方案
GJS Helper
你遇到的 404 错误是关于提供的 GrapesJS 链接，是因为你误解了 GrapesJS 资源通常的提供方式。你分享的链接，比如 https://grapesjs.com/js/toastr.min.js 和 https://grapesjs.com/stylesheets/grapes.min.css，是直接指向 grapesjs.com 网站上托管的资源的路径。这些主要用于网站内部演示和页面， grapesjs.com 并非用于外部项目的公开 CDN。 根本原因：...