#61022024年8月31日作者 Alababdiy3 个回答
GrapesJS 版本[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器？ 铬91V可复制演示链接 https://jsfiddle.net/8tsj5vpb/描述一下那个虫子 我在 GrapesJS 中遇到了一个问题，就是在重新加载编辑器后，自定义组件定义的特征没有显示出来。刚添加组件时，特征是正常工作的，但在重新加载编辑器（例如刷新页面）后，特征不再出现在特征面板中。 繁殖步骤：使用编辑器定义自定义组件类型。DomComponents.addType，包含默认功能部分的特征。将自定义组件添加到画布中。重新加载编辑器（例如，刷新页面或重新初始化编辑器）。在编辑器中选择自定义组件。 预期行为： 自定义组件定义的特征应在...
mohamedsalem401
@Alababdiy 我无法通过提供的链接重现问题。 不过，问题似乎在于 GrapesJS 不允许在组件初始化后添加或定义它。
mohamedsalem401
嘿，@Alababdiy， 我没能重现你在JSFiddle中描述的问题。
GJS Helper
你遇到了一个常见问题，就是GrapesJS在重新加载编辑器后如何持续存在并重新识别自定义组件。自定义组件的特性会消失，因为GrapesJS没有正确地将加载的组件与其自定义类型定义关联。 根本原因 自定义特征在重新加载后不显示的主要原因是你的自定义组件定义model.defaults中缺少type属性。虽然你的isComponent函数帮助GrapesJS基于DOM结构初步识别组件，但GrapesJS大量依赖type属性（该属性在HTML元素中序列化为data-gjs-typ...
#60962024年8月30日作者 kanaihyakumar4 个回答
GrapesJS版本 [X] 我确认使用最新版本GrapesJS 你用的是什么浏览器？ 铬 可复制演示链接 https://jsfiddle.net/kanaihyakumar/oedg76nt/ 描述一下那个虫子 描述 当选择画布上的任何组件时，它会根据设置高亮底部的缩放框。但当再次点击同一个组件时，缩放框会消失。繁殖步骤用提供的HTML代码打开GrapesJS。选择画布上的任意组件以查看底部的缩放框。再次点击同一个组件。注意缩小框消失了。预期行为 底部的缩放框即使在重新选择相同组件后仍应保持可见。实际行为 重新选择同一个组件后，底部的缩放框会消失。代码 '''html <!DOCTYPE html> <html lang=“e...
kanaihyakumar
之前，我需要更清楚地说明重现问题的步骤。以下是制作该期的精细步骤。 重现问题的步骤：直接点击该部分。观察显示的可调整大小选项。点击该部分中有列组件的区域（我为视频中所有元素添加了边框以便清晰）。注意，已选中分区组件，但底部可调整大小选项未显示。 [视频链接]（https://drive.google.com/file/d/1YUEYZxjpD1Un-xaBRUybuKDZO0_Xffmu/view） 实际行为：直接点击该部分时，底部可调整大小选项如预期显示。然而，当点击有列...
kanaihyakumar
相信我，我很幸运能找到这种点击不同地方的悲惨行为，虽然表现不同，但表现不同。
artf
我觉得如果不是按点击键，它不会消失，但这是预料之中的，因为它准备被拖动
#60512024年8月9日作者 SAJAD-CH2 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ 铬 可复制演示链接 ASDASD 描述一下那个虫子 我在安装 NPM 插件包（如 preset-webpage、preset-newsletter）时遇到了问题，在两个地方安装时，检查 node module 文件夹时 css 文件都不见了。我想把 grapejs 集成到 Angularts 里。现在它包含了像 index.d.ts、index.ts 等页面。 行为准则 [X] 我同意遵守本项目的行为准则
artf
@SAJAD-CH，请在打开漏洞问题时提供可复现的实时演示（例如通过 stackblitz 进行）
GJS Helper
你似乎遇到了一个常见问题，比如在将GrapesJS插件集成到现代JavaScript框架（如Angular）中，CSS文件在直接链接nodemodules中不会作为独立文件出现。这是预期中的行为，不是bug。 根本原因解释 现代GrapesJS插件，尤其是通过NPM分发的，设计上是为模块捆绑器（比如Webpack，Angular CLI在底层使用）而设计。这些插件的CSS通常包含在插件的JavaScript发行版中，或者作为单独的CSS文件，旨在导入应用构建过程，而不是直接...
#60392024年8月6日作者 Gryphonn4 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ 铬126 可复制演示链接 https://jsfiddle.net/Gryphonn/ob1pznh6/ 描述一下那个虫子 如何复现这个漏洞？选择任意单词。包装得有型。保持该词被选中。进入通用->显示我想要屏蔽。我点击屏蔽，但没有任何反应。 预期的行为是什么？ 显示值必须是空的，这样我才能立即选择所需的内容。 或者它必须显示所选文本当前的实际显示值。这里是内联显示，而不是块。 目前的行为是什么？ 目前我需要点击两次。 首先，点击除“屏蔽”以外的任何内容。显示字段已激活。 那我应该点击屏蔽。 如果需要执行某些代码以重现该漏洞，请将其粘贴到下面...
artf
是的，问题就在这里： https://github.com/GrapesJS/grapesjs/blob/1e3766f0060e6da502fccf9ba9eb938d5ac860bb/src/style_manager/model/PropertyFactory.ts#L267 添加一个新选项，比如“初始”，并设为默认选项，这样做合理吗？
danstarns
> 你好@Gryphonn，>我试图复现你的问题，但步骤不太清楚，请重新表述。bandicam.2024-08-08.21-07-14-667.mp4 感谢您的详细报告 🙏 看起来我们应该更好地处理默认显示，这样你就不用先切换到另一个显示器再切换回来。
danstarns
你好，@Gryphonn， 我试着重现你的问题，但步骤不太清楚，请重新表述。
#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模型。...
#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
#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', {...