#51052023年5月11日作者 Baghunts2 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Chrome@latest 可复制演示链接 https://no-link.com 描述一下那个虫子 ![图片]（https://github.com/GrapesJS/grapesjs/assets/133208978/3a5ce51a-fedf-4fd7-9063-a5af519690b9） ![图片]（https://github.com/GrapesJS/grapesjs/assets/133208978/0b990b40-94b1-48c1-94dc-c4d81ADF0368）行为准则 [X] 我同意遵守本项目的行为准则
artf
谢谢@Baghunts，发现得很好。目前的解决方法是 '.addStyle（{ 'border-left'： '...' }）`
GJS Helper
GrapesJS中组件中没有正确应用background-image样式的问题通常有两个常见原因之一：CSSurl()语法错误，或者组件缺乏足够的维度来显示背景。 根本原因分析 缺少url()封装： 在 CSS 中设置background-image时，图像路径必须包含在 url() 函数中。如果你只提供 URL 字符串而没有url()，浏览器会将其视为无效的 CSS 值，样式不会被应用。 错误： "https://example.com/image.jpg" 正确： "u...
#50902023年5月3日作者 FaisalShaikhHA2 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ 112.0.5615.137（官方配置）（arm64） 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子 组件定义： 丢弃、保存和重新加载时，有两个地方调用同一个脚本。一个在保存的 HTML/JSON 里，另一个是 Grapesjs 自己添加的。 如何复现这个漏洞？添加带有脚本函数的自定义组件类型。放下它并保存页面。重新加载页面时，脚本函数运行两次。 预期的行为是什么？ 脚本函数应该只运行一次。 目前的行为是什么？ 脚本函数运行两次。 行为准则 [X] 我同意遵守本项目的行为准则
artf
正如[这里]（https://grapesjs.com/docs/modules/Storage.html#project-data）解释的，编辑项目时不应重新导入输出HTML，只需导入JSON。
GJS Helper
你遇到的组件 script 函数在保存并重新加载页面后运行两次的问题，是 GrapesJS脚本管理系统中的已知行为（或者说是个 bug，视角度而定）。这源于 GrapesJS 如何处理和序列化组件脚本，用于编辑器画布和最终导出的 HTML。 根本原因解释 当你在GrapesJS组件模型中定义script属性为函数时，GrapesJS执行两个主要动作导致双重执行： 内联脚本嵌入： GrapesJS将脚本函数序列化成字符串，并直接嵌入组件HTML结构中的<script>标签中。...
#50862023年5月2日作者 SagarMaria3 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Chrome 版本 112.0.5615.137（官方版本） 可复制演示链接 https://jsfiddle.net/SagarMaria/sunygp2f/3/ 描述一下那个虫子 如何复现这个漏洞？在 jsfiddle 中只需点击“Hello World”组件。 观察大量控制台日志。点击画布上其他地方，重复。 预期的行为是什么？ style:property:update 应该只在所选组件的样式属性更改时触发 目前的行为是什么？ style:property:update 事件反而会多次触发，即使只是选择了某个组件 如果需要执行某些代码...
artf
该行为是正确的，因为“style：property：update”会在风格管理器[属性]（https://grapesjs.com/docs/api/property.html#property）的任何更新时触发（不仅仅是其值）。所以针对你的具体情况，你需要以这种方式更新回调 “''js Editor.ON（'style：property：update'， （{ property， to }） => { 检查房产名称，以及更新是否与价值相关 如果 （property.get...
SagarMaria
你好，@artf感谢你的快速回复，但实际上问题的一部分仍然是，即使你做了更改，比如点击“中心”对齐无线电选项和你建议的 if 语句，后续选择该组件时，'style：property：update' 值仍然会被 loging 出去，'property' 和 'to' 仍是现有值（即使你不改动，只选择组件）。下面有个简短的视频，我也根据你的建议更新了 jsfiddle。 有没有办法直接监听收音机值的变化，或者在样式管理器里点击不同的收音机选项？我也尝试使用属性的“onChang...
GJS Helper
谢谢你举报，@SagarMaria。 关于Style：property：update和Property onChange过度触发的好问题。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'，...
#50792023年4月28日作者 TO-JHummel2 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Firefox 112.0.2（64位） 可复制演示链接 https://github.com/TO-JHummel/grapesjs-子 描述一下那个虫子 如何复现这个漏洞？启动最小的vue+vite页面。将capitalizedfor块放入编辑器中。将一列模块放入编辑器中，放置在另一个模块之外。将capitalizedfor块上的每个div拖拽到1列块中。 预期的行为是什么？ 方块只需直接放入柱中即可。 目前的行为是什么？ 浏览器在放下最后一个块时会卡死。 行为准则 [X] 我同意遵守本项目的行为准则
artf
这和这个[https://github.com/GrapesJS/grapesjs/issues/4497]类似，你必须把编辑器实例放在Vue实例之外，才能绕过它的代理
GJSBlock
谢谢你举报，@TO-JHummel。 关于用Vue+Vite拖入嵌套组件时崩溃的问题很棒。GrapesJS 推荐的方法是使用事件驱动 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'something...
#50532023年4月17日作者 ngoc1992 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ FireFox 112.0（64位） 可复制演示链接 没有演示链接 描述一下那个虫子 我最近从v0.20.1升级到了v0.21.1。 很多在 v0.20.1 中存在的类型在 v0.21.1 中被改成了 any 。 例如， v0.20.1 中的 Components.addType 类型是 AddComponentOptions ![图片]（https://user-images.githubusercontent.com/53241275/232444631-243b6872-1655-490b-b5b4-5c5ad546a315.png）...
artf
谢谢@ngoc199如果之前版本还有其他缺少声明的话，请告诉我
GJS Helper
这是与GrapesJS v0.21.1中TypeScript声明文件（.d.ts）相关的已知问题。问题的出现是因为某些核心功能的类型定义，如Components.addType和自定义组件中的model定义，在该版本中生成不完整或错误，导致TypeScript推断出这些类型的any。 根本原因 GrapesJS 主要使用 JavaScript 编写，但它提供了 TypeScript 声明文件，以提供类型安全和更好的开发者体验。在 v0.21.1 中，这些 .d.ts 文件出...
#50522023年4月16日作者 innothetechgeek2 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ 铬 可复制演示链接 无 描述一下那个虫子 我正在将 grape.js 插件集成到vue.js。我有一个预构建页面，里面有预构建的HTML和CSS。 当我把页面vue.js组件加载到编辑器时，所有vue.js样式都会丢失。但如果我移除 grapeJs 初始化方法，样式就正常工作了。 请帮帮我。我想把通过vue.js入口加载的样式加载到编辑器里 行为准则 [X] 我同意遵守本项目的行为准则
artf
@innothetechgeek遇到真正的bug问题，你应该做一个可复现的演示，因为通常会有一些与核心本身无关的问题。无论如何，根据你的描述，你可能想通过['canvas' options]（https://grapesjs.com/docs/modules/Components-js.html#template-related）定义你的样式条目。
GJS Helper
你遇到的问题是，Vue.js入口加载的样式在初始化时丢失GrapesJS这是常见行为，源于GrapesJS如何隔离其编辑器画布。 根本原因 GrapesJS默认会在一个<iframe>中渲染其编辑画布。iframe 创建了一个独立的浏览上下文，这意味着父文档中定义的样式（你的Vue.js应用运行的对象）不会自动应用到 iframe 内的内容。你的Vue.js样式是正确应用到主应用程序的，但GrapesJS画布作为 iframe 内的独立文档，不会继承这些样式。 解决方案：将...
#50492023年4月13日作者 ronaldohoch4 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ 勇敢的最后版本 可复制演示链接 https://jsfiddle.net/rp7oc96v/1/ 描述一下那个虫子 嗨，亚瑟！ 我正在创建一个新组件，一个链接中的图片，就像 mj-image 组件一样，但我卡在一个配置里，或者说是个bug...... 如何复现这个漏洞？放置“Link na Imagem”块当你尝试从图片中拖拽新组件时， grapesjs 选择图片而不是组件根标签（<a>）如果需要拖动整个组件，我需要使用工具栏中的图标。 预期的行为是什么？子组件没有父元素就不会。 目前的行为是什么？如果子节点 img 元素没有属性 data...
gustavohleal
嗨！ 我测试过你的方案。它确实能正确更改图像，且将图像锁定在主组件内，你可以移动它。模型中的“src”属性会被更改，但当你移动组件时，它会回到占位符图像。如果你更改图片然后打开视图代码模态，你会发现“src”属性不像模型中那样发生变化。我认为这是因为Grapes在导出代码中没有为图片设置“id”。 检查打印件： 在组件丢弃时不设置图像： ![图片]（https://user-images.githubusercontent.com/22385451/232051993-20...
artf
@gustavohleal我的错误，你必须直接更新'src'属性，而不是属性'image.set（{ src： asset.getSrc（） }）;'
artf
使用 'data-gjs-locked=“true”属性忽略图片，正确更新你的自定义组件 “''js 移除runCommand（“open-assets”）; 因为在模型端运行它没什么意义 你可以通过方块激活组件（https://grapesjs.com/docs/api/block.html#properties） 通过使用“激活”属性 init（）{ editor.runCommand（“open-assets”）; } 在视图中处理资产更新 浏览量：{ 事件：{ db...
#50372023年4月6日作者 siddhi13974 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ 铬 可复制演示链接 匿名 描述一下那个虫子 如何复现这个漏洞？...... 预期的行为是什么？ ...当我在编辑器中拖拽外部内容时，它应该会被丢在特定位置 目前的行为是什么？ ...它在该位置被丢弃，但与组件中已有的文本重叠 如果需要执行某些代码以重现该漏洞，请将其粘贴到下面： 行为准则 [X] 我同意遵守本项目的行为准则
siddhi1397
你好@artf， 当我在编辑器中拖动外部内容时，它应该被丢在特定位置，但它与组件中的现有内容重叠。那么，有没有办法让我把文字放在特定位置而不让文字重叠？ 顺便说一下，我用的是canvas：dragdata来获取外部内容。
artf
@siddhi1397请不要把bug问题作为功能或问题打开
siddhi1397
好吧，抱歉。@artf 但请问能否帮忙说明如何实现？
#50192023年3月31日作者 julia-alberici2 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Chrome v111 可复制演示链接 https://codesandbox.io/s/grapesjs-react-components-forked-h3j496？file=/src/index.js 描述一下那个虫子 如何复现这个漏洞？用 Reactjs 启动一个项目 grapesjs 编辑器初始化后立即使用 loadProjectData(data) 通过 editor.onReady(() => { editor.runCommand("preview"); }); （或任何其他方式）设置预览模式 预期的行为是什么？ 编辑器应该...
julia-alberici
声明一下，这其实不算是个bug，我能实现预期的行为，替换了'editor.onReady（（） => { editor.runCommand（“preview”）; }）;' 与 'editor.on（'update'， （） => { editor.runCommand（'preview'）; }）;`
GJS Helper
你遇到的问题是，尽管GrapesJS组件在loadProjectData()后运行了preview命令，仍然保留编辑模式的行为（比如悬停/选择样式），这是与异步操作相关的时序问题。 根本原因 当你初始化GrapesJS并立即调用editor.loadProjectData(data)时，这个操作是异步的。editor.onReady()回调会在编辑器实例本身完全初始化并准备交互时触发，但它不会等待loadProjectData()方法完成将项目组件渲染到画布上。 因此，当e...
#50032023年3月23日作者 ngoc1992 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ 铬111 可复制演示链接 https://jsfiddle.net/9zf4kd6e/——这是设计师模式的演示 描述一下那个虫子 如何复现这个漏洞？添加一个绝对 dragMode 的图像分量上传足够大的SVG图片。你可以使用[此图片]（https://freesvg.org/anime-girl-warrior）拖动图像拖动文本组件 预期的行为是什么？SVG图像在拖拽时不会被调整大小将SVG图像快速移动到正确位置当存在较大的SVG图像时，组件移动速度较快 目前的行为是什么？SVG图像在拖曳时根据光标位置自动调整大小。手动调整图像大小后，可以...
artf
@ngoc199我已经讨论了大部分关于绝对模式的问题[这里]（https://github.com/GrapesJS/grapesjs/issues/3770#issuecomment-944915841）。我觉得调整大小的问题可以很容易地加入，但大型嵌入的SVG图片（默认情况下，没有外部资源存储，图片是内嵌的）看起来更像是浏览器的限制
GJSBlock
谢谢你举报，@ngoc199。 关于Chrome上绝对拖拽速度极慢的问题很棒。推荐的组件方法是使用事件驱动的API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'something changed'））; 组...