#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...
#54782023年10月21日作者 bryanjamesmiller2 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ 铬 可复制演示链接 版本 118.0.5993.88（官方构建）（arm64） 描述一下那个虫子 如何复现这个漏洞？ 视频演示第一部分： https://github.com/GrapesJS/grapesjs/assets/8781182/bfbbf6ea-7780-417e-880b-61992897c740 第二部分： https://github.com/GrapesJS/grapesjs/assets/8781182/c61fa3b5-c62a-459d-bdf2-d8dc106E310b 第三部分： https://github...
artf
感谢@bryanjamesmiller所有的见解，我会去调查解决办法。
GJS Helper
这确实是一个有效的错误报告，你准确地识别了 GrapesJS块分类处理中经典的JavaScript陷阱。问题在于自定义块类别被用内置 Object.prototype 方法命名。 根本原因 GrapesJS和许多 JavaScript 应用一样，内部使用纯 JavaScript 对象来管理项目集合，比如块类别。在这个结构中，你提供的类别名称（例如 'constructor'）会成为内部对象中的一个键。例如： JavaScript的对象属性查找机制涉及原型链。当你尝试访问像...
#54642023年10月13日作者 MaulikAarrsol2 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ 铬 117.0.5938.152 可复制演示链接 不 描述一下那个虫子 如何复现这个漏洞？...... grapesjs 页面，多个页面，导入CSS而非访问...导入 CSS 不起作用 预期的行为是什么？ ... 目前的行为是什么？ ... 如果需要执行某些代码以重现该漏洞，请将其粘贴到下面： 行为准则 [X] 我同意遵守本项目的行为准则
artf
请正确遵循错误问题模板如果你没有标明一个可复现的演示，并附带相对步骤来重现该漏洞，问题可能已经解决了。
GJS Helper
问题描述“导入CSS时多页无法访问”和“导入CSS无法正常工作”相当模糊，但它反映了GrapesJS对CSS范围和外部样式表导入处理的普遍误解，尤其是在处理多页面时。根本原因很可能是样式没有正确关联到目标页面，或者外部CSS文件没有加载到GrapesJS画布环境中。 GrapesJS CSS 范围解析 在GrapesJS中，每个“页面”是一个独立实体。当你使用editor.Pages模块创建多个页面时，每个页面对象通常会存储自己的HTML组件（component）和CSS规...
#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）输出了指定页面的所有内容。不过，它似乎无法正确输出“样式”（我总是被设置为未定义），所以我通过编辑器检索了激活页面的样式，...
#54572023年10月11日作者 boardmain4 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Chrome 117.0 可复制演示链接 本地主持 描述一下那个虫子 grapesjs“： ”^0.21.7“， editor.loadProjectData({ “资产”： []， “风格”： []， “pages”： [{ “组件”： “<div>TEST TEST TEST</div>” }] }) 编辑冻结 行为准则 [X] 我同意遵守本项目的行为准则
antoinematyja
Hi, I encountered the same issue using Vue 3 and using a vue 0 to store the editor. Not sure if this is a good idea though. 代码复制品大致如下： 解决办法：不要用 ref 😅
artf
你能提供一个可复现的演示吗？试了你的例子，我没看到冻结......
boardmain
尝试使用最新版本21.7 我试着把它放到网上，但我只是用自定义命令粘贴了 HTML，粘贴了源代码，但之后编辑器卡住了（我需要关闭页面）。 例如： ~~~ btnImp.onclick = （） => { editor.runCommand（'core：canvas-clear'） 编辑。css.clear（） editor.setComponents（codeViewer.getContent（）.trim（）） 编辑。Modal.close（） } ~~~ 其中 code...
#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></...
#54422023年10月3日作者 kishanp1024 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ 镀铬 可复制演示链接 https://jsfiddle.net/a3xgLm7c/3/ 描述一下那个虫子 如何复现这个漏洞？选择文本并应用文本颜色选择相同的文本并应用背景色 预期的行为是什么？两种颜色都应适用 目前的行为是什么？背景色应在应用文本颜色后应用 如果需要执行某些代码以重现该漏洞，请将其粘贴到下面： 行为准则 [X] 我同意遵守本项目的行为准则
mapsmarketing
你好@kishanp102， 我尝试按照步骤重现问题，但文字和背景颜色都被应用了（请参见截图）。 <img width=“318” alt=“image” src=“https://github.com/GrapesJS/grapesjs/assets/79551469/74b22828-610a-4530-9582-96c0c120a805”>
kishanp102
拖放文本组件，然后应用字体颜色，再点击外部，点击文本并放置它未应用的背景色 [screencast-jsfiddle.net-2023.10.11-091942.webm]（https://github.com/GrapesJS/grapesjs/assets/43177161/1f7e270d-a144-41fa-84c1-763c7896ae18）
mapsmarketing
没错，你说得对@kishanp102它不会在你已经设置好背景色后给它应用新的背景色。这绝对是个bug。
#54412023年10月3日作者 padcom2 个回答
GrapesJS版本[X] 我确认使用最新版本GrapesJS你用的是什么浏览器？ Chrome最新款可复制演示链接 https://github.com/padcom/grapesjs-无ID-for-element-示例描述一下那个虫子 在创建自定义GrapesJS组件时，如果这些组件具有script()（组件的运行时行为），且该组件没有样式，那么根元素没有id属性，这会导致document.querySelectorAll('#<id-goes-here')失败，运行时脚本也不会被调用。 在给出的示例中，我创建了一个特殊的自定义元素，称为<content-preview>（https://github.com/padcom/...
artf
问题源于'jsInHtml： false'的使用以及内部JS生成器的处理方式。 我会尽量在下一个版本里修复这个问题。
GJS Helper
你描述的问题是GrapesJS中已知的行为，涉及HTML序列化过程中组件ID的生成和优化。当自定义组件有script()函数但没有显式样式应用时，GrapesJS可能会在最终HTML输出中省略组件根元素中的id属性（由editor.getHtml()生成）。这是因为GrapesJS主要使用ID来引用组件以进行样式设计。如果没有样式，ID可能被认为内部GrapesJS操作中没有必要，从而省略。 这种遗漏会破坏依赖document.querySelectorAll('#<com...
#54322023年9月29日作者 mahmudz1 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Chrome 117.0.5938.132 可复制演示链接 https://jsfiddle.net/bx8rtseh/2/ 描述一下那个虫子 如何复现这个漏洞？设置远程商店管理器加载一些带有tailwindCSS类的html 样本 预期的行为是什么？ 未变的级别名称 目前的行为是什么？ 意外更改了职业名称 ![图片]（https://github.com/GrapesJS/grapesjs/assets/22455598/c4a4cc2b-4228-4f56-bd53-0e0d23fc5fb8）行为准则 [X] 我同意遵守本项目的行为准则
GJS Helper
你遇到的问题，比如TailwindCSS类md:w-1/2在加载到GrapesJS时会变成md:w-1-2，这源于GrapesJS内部的类管理和解析逻辑。 根本原因 GrapesJS默认处理加载HTML中的所有类名，创建内部Selector模型。这些Selector模型被样式管理器及其他核心功能使用。/字符虽然在TailwindCSS工具类中有效（由Tailwind的PostCSS插件处理），但在CSS标识符（类名）中并非标准有效字符，除非被转义（例如w-1\/2）。 当G...