#50892023年5月2日作者 davidrhoderick3 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Firefox 112.0.1 可复制演示链接 https://github.com/davidrhoderick/grapesjs-检验 描述一下那个虫子 如何复现这个漏洞？跟随入门（你可以用Typescript和SCSS看到我用一个基础的Parcel项目来理解的结构）当你进入“主题”步骤时，尝试导入 Grapes SCSS时会报错。 预期的行为是什么？ 只要我按照“入门教程”操作，一切都能正常工作。 目前的行为是什么？ 当我进入应该允许我用SCSS自定义应用外观的步骤时，出现了以下错误： 如果需要执行某些代码以重现该漏洞，请将其粘贴到下...
davidrhoderick
有趣的是，基于CSS的样式确实有效。
artf
看起来 Parcel 变换器试图导入的是 'codemirror/lib/codemirror.js'，而不是 'codemirror/lib/codemirror.css'： “''CSS @import“codemirror/lib/codemirror”; ``` 所以我建议你在相关包裹上开启问题
GJS Helper
你遇到的问题，@parcel/transformer-sass: expected "{"导入GrapesJSSCSS时，是模块捆绑器如Parcel解析和流程样式表导入时常见的问题，尤其是在处理既有JavaScript又包含CSS组件的第三方库时。 根本原因 GrapesJS 利用 CodeMirror 实现其富文本编辑器和代码编辑器功能。虽然 GrapesJS的核心 SCSS（grapesjs/src/styles/scss/main.scss）对自身组件进行了样式化，但...
#49042023年2月5日作者 handhikadj2 个回答
GrapesJS 版本[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器？ Chrome最新可复制演示链接 https://jsfiddle.net/snj87o6f/1/描述一下那个虫子 背景/描述 我觉得这是个bug，因为我需要用编辑器保存并重新加载数据。storageManager 的 onStore 上的 Parser.parseHtml。更糟的是，当我刷新页面时图层管理器的结构（onLoad 运行）时会坏掉。看起来是编辑器的问题。Parser.parseHtml（） 无法正确解析它 如何复现这个漏洞？拖放倒计时块到画布上查看控制台 预期的行为是什么？ 即使里面有 js，也能生成有效的 html，这样在 sto...
artf
输出是正确的（检查真实控制台，而不是 jsfiddle 坏掉的那个），仔细阅读[本节]（https://grapesjs.com/docs/modules/Storage.html#project-data），绝不应该依赖 HTML/CSS 来加载项目。
GJSBlock
谢谢你举报，@handhikadj。 关于getHtml（）在里面有js时生成无效结构的建议很棒！虽然这个具体功能还没有出现在核心 API 中，但有几种方法可以实现类似的行为。 使用事件系统： “JavaScript editor.on（'component：update'， （component） => { 你的逻辑 }); ``` 替代方法： 听取“selector：add”以获取CSS选择器更改 使用“selector：custom”来表示自定义规则 利用“chang...
#47442022年11月23日作者 ronaldohoch2 个回答
GrapesJS 版本[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器？ 勇敢的最后版本可复制演示链接 https://jsfiddle.net/ptzavm1b/描述一下那个虫子 如何复现这个漏洞？点击一个元素尝试使用StyleManager UI添加此CSS样式： transform:scale(2);你不能。 预期的行为是什么？变换类型栈应当包含或允许类型栈中的 scale 和 rotate 目前的行为是什么？变换类型栈没有 scale 和 rotate 属性。行为准则[X] 我同意遵守本项目的行为准则 这就是我想通过 StyleManager UI 实现的效果：https://jsfiddle.net/mr3...
artf
你应该已经能用默认变换属性实现同样效果，你的自定义变换还不完整。 请尽量参考完整的配置[这里]（https://github.com/artf/grapesjs/blob/483ab96eff13687c4794a8474c7e8cffd7405912/src/stylemanager/model/PropertyFactory.js#L382）。如果你想更新属性，应该可以通过 [getBuiltIn]（https://grapesjs.com/docs/api/style...
GJSBlock
谢谢你举报，@ronaldohoch。 关于变换、缩放和旋转都不正常工作的建议很棒！虽然这个具体功能还没有出现在核心 API 中，但有几种方法可以实现类似的行为。 使用事件系统： “JavaScript editor.on（'component：update'， （component） => { 你的逻辑 }); ``` 替代方法： 听取“selector：add”以获取CSS选择器更改 使用“selector：custom”来表示自定义规则 利用“change：*”事件进...
#47042022年11月2日作者 PaulSchult1 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ 版本 104.0.5112.101 可复制演示链接 https://codesandbox.io/s/awesome-dewdney-bwo5t1 描述一下那个虫子 如何复现这个漏洞？将文本块添加到编辑器内容中打开风格管理器，扩展装饰部门注意红色占位符，通常标准选色器所在的位置（该文本是基本的角度分量）接下来，向下滚动到“背景”标签页，添加一个新的背景再次注意红色占位符文字点击 grapes 内容的主内容，使样式管理器切换到正体设置现在再次点击文本块，向下滚动到背景标签页并展开注意颜色属性的占位符文本没有出现如果你查看浏览器的控制台，你会发...
GJSBlock
谢谢你举报，@PaulSchult。 关于Angular组件作为自定义颜色选择器只创建一次的好建议！虽然这个具体功能还没有出现在核心 API 中，但有几种方法可以实现类似的行为。 使用事件系统： “JavaScript editor.on（'component：update'， （component） => { 你的逻辑 }); ``` 替代方法： 听取“selector：add”以获取CSS选择器更改 使用“selector：custom”来表示自定义规则 利用“chan...
#46812022年10月21日作者 Aar-if3 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Firefox 可复制演示链接 匿名 描述一下那个虫子 目前的行为是什么？ 我创建了一个自定义后端端点来存储我的资产，当我使用资产管理器的上传方法时，它没有向后端发送任何数据，而是发送一个空的对象，我在客户端检查器获取资产数据时也遇到同样的问题，同时在资产管理系统内使用 Axios 发送 资产管理人：{ 上传：“http://localhost:5002/api/grapesjs/assets”， }, 后端获得空物体 我也试过 资产管理人：{ 上传文件：异步 （e） => { var files = e.dataTransfer ? e....
artf
抱歉，但仅仅尝试提交一个资源，我看到的负载是正确的，所以没有可复现的演示，这看起来是你后端的问题（确保有合适的身体解析器）。
Aar-if
谢谢，我用Multer解决了，问题出在身体解析器。
GJSBlock
感谢你举报，@Aar-if。 资产管理器上传向后端端点发送空对象的问题似乎是竞态条件或状态管理时序问题。这通常发生在组件生命周期事件和DOM修改重叠时，导致状态不一致。 尝试什么： 添加setTimeout包装器以确保DOM已稳定： “JavaScript setTimeout（（） => { 你在这里的行动 }, 0); 推荐的下一步步骤： 如果还没测试过，请用最新的GrapesJS版本测试 提供最小可重复的示例（CodeSandbox）——这有助于团队更快识别根本原因...
#46542022年10月11日作者 malonecj3 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Chrome v105 可复制演示链接 https://codesandbox.io/s/fancy-brook-ppyc8v?file=/index.js 描述一下那个虫子 背景： 我正在尝试配置 grapesjs ，使其能够编辑包含[Liquid template language]（https://shopify.github.io/liquid/）的标记。因此，我想创建两种类型的自定义组件。 以 {{some_variable}}形式出现的模板块 以 {% if condition .... %}形式出现的条件块 自定义组件应配置为...
artf
你好@malonecj我不太确定你具体如何期望看到和管理这些组件（尤其是当你在条件内组合模板时），但我觉得你目前在“isComponent”中的处理方式不太正确，因为你必须处理文本节点。 在你的liquidhandle 'isComponent'里，你用的是'el.textContent'，我觉得这应该和liquid condition用'el.nodeValue'类似，因为它只在文本节点上可用（可能最好确认一下它是否真的是文本节点'el.nodeType === 3'）。...
artf
我决定关闭这个，因为核心本身没有问题，如果你还有其他问题@malonecj告诉我。
GJSBlock
谢谢你举报，@malonecj。 关于文本节点自定义组件，包含特殊字符的建议很棒！虽然这个具体功能还没有出现在核心 API 中，但有几种方法可以实现类似的行为。 使用事件系统： “JavaScript editor.on（'component：update'， （component） => { 你的逻辑 }); ``` 替代方法： 听取“selector：add”以获取CSS选择器更改 使用“selector：custom”来表示自定义规则 利用“change：*”事件进行...
#46072022年9月23日作者 RomanGlazkov2 个回答
GrapesJS 版本[x] 我确认使用最新版本 GrapesJS你用的是什么浏览器？ Chrome v104可复制演示链接 https://grapesjs.com/demo.html描述一下那个虫子 如何复现这个漏洞？选择一个元素按住CTRL键，选择子元素尝试移动这些元素 预期的行为是什么？ 编辑器不允许移动 目前的行为是什么？ 搬家没有发生，但出现了 js 错误 ![偷看 2022-09-23 15-20]（https://user-images.githubusercontent.com/66161402/191958965-85b27a78-9e0d-4598-9324-697d67aef2f2.gif） 行为准则[X]...
artf
我想我们应该避免一开始就选择已经选定组件的子节点。
GJSBlock
谢谢你举报，@RomanGlazkov。 关于带子元素移动元素时出现的JS错误的好建议！虽然这个具体功能还没有出现在核心 API 中，但有几种方法可以实现类似的行为。 使用事件系统： “JavaScript editor.on（'component：update'， （component） => { 你的逻辑 }); ``` 替代方法： 听取“selector：add”以获取CSS选择器更改 使用“selector：custom”来表示自定义规则 利用“change：*”事...
#45922022年9月15日作者 harsh2011 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ 104.0.5112.102 可复制演示链接 https://jsfiddle.net/harsh201/obng5cy2/ 描述一下那个虫子 如何复现这个漏洞？在文本块内拖拽“Textable Component”。尝试编辑可文本块内的文本。 预期的行为是什么？ 当双击可文本组件时，光标应移动到可文本块，因为它正在扩展文本。 目前的行为是什么？ 当双击可文本组件时，光标仍聚焦于父文本块，焦点不会切换到文本组件。 粗略浏览时，每当双击文本块时，属性 contenteditable 变为true，允许用户编辑文本块。同样的行为也适用于嵌套在文...
GJSBlock
谢谢你举报，@harsh201。 关于文本组件在文本块中丢弃后变成不可编辑的建议很棒！虽然这个具体功能还没有出现在核心 API 中，但有几种方法可以实现类似的行为。 使用事件系统： “JavaScript editor.on（'component：update'， （component） => { 你的逻辑 }); ``` 替代方法： 听取“selector：add”以获取CSS选择器更改 使用“selector：custom”来表示自定义规则 利用“change：*”事件...
#45122022年8月15日作者 mingodad3 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ 版本 103.0.5060.134（官方构建）基于 Ubuntu，运行于 Ubuntu 18.04（64 位） 可复制演示链接 https://alvarotrigo.com/blog/html-css-tabs/ 描述一下那个虫子 测试上述示例时没有切换或显示标签页内容 https://alvarotrigo.com/blog/html-css-tabs/ 比如这个“4.动画HTML和CSS标签页”，准备导入，下面显示： 行为准则 [X] 我同意遵守本项目的行为准则
mingodad
我查了一下，发现了一个已关闭的问题 https://github.com/artf/grapesjs/issues/2873 基于它，我这样做允许预览模式下勾选/无线电： 现在至少在预览中复选/无线电能用，一些演示也能在“预览”中运行。 如果这些信息能包含在文档里就太好了！
artf
感谢@mingodad我发布了表单插件的新[版本]（https://github.com/artf/grapesjs-plugin-forms/releases/tag/v2.0.5），并增加了对预览的支持。
GJSBlock
谢谢你举报，@mingodad。 本页几乎所有示例都失败于 grapejs 的问题似乎是竞态条件或状态管理时序问题。这通常发生在组件生命周期事件和 DOM 修改重叠时，导致状态不一致。 尝试什么： 添加setTimeout包装器以确保DOM已稳定： 检查初始化顺序 — 确保组件在操作前已完全加载 使用编辑器的事件系统 — 收听完成事件： 推荐的下一步步骤：** 如果还没测试，请用最新的 GrapesJS 版本测试 提供最小可重复的示例（CodeSandbox）——这有助于团...
#45032022年8月5日作者 gustavohleal4 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ 铬 v96 可复制演示链接 https://grapesjs.com/demo-newsletter-editor.html 描述一下那个虫子 如何复现这个漏洞？在控制台标签页打开开发者工具运行下面的代码选择新增的文本用CKEditor编辑内容选择另一个组件 预期的行为是什么？ 预计会从文本组件内的跨度添加内联样式，这样CKEdittor就能理解文本样式，并在打开时保留这些样式。 目前的行为是什么？ 添加原始 HTML 时， editor.addComponent() 确实添加了样式，但一旦你编辑文本并模糊，样式就会从它们应有的文本段落中移...
pety-dc
嘿 我也遇到过类似的问题。我认为情况相当严重，因为通讯和 mjml 演示版都受到了影响。（两者都使用 CKeditor 作为 RTE） 当我导入包含带有样式元素（span）的文本（mj-text）的内容时，导入的内容会被解析，样式元素被识别为独立组件，而不是作为换装文本元素的内容。 示例（根据 mjml.io 有效）： 预期结果： ![图片]（https://user-images.githubusercontent.com/25766885/230409523-b8b57...
raymondmakz
CKeditor 输出： '<div><span style=“color：blue”>ckeditor 中的部分富文本</span></div>” 解析到编辑器后，可以变成： '<div data-gjs-type=“text”>来自 <span 的一些富文本 style=“color：blue” data-gjs-type=“default”>ckeditor</span></div>' 基本上每个主导者都变成了组成部分。 也许可以让开发者选择是否停止添加子节点作为组件...