#35642021年6月24日作者 theSC0RP4 个回答
0.17.19 你能重现演示中的bug吗？ 是的 预期的行为是什么？ 我之前问过一个关于iframe刷新（#3413）的问题。[提案的解决方案]（https://github.com/artf/grapesjs/issues/3413#issuecomment-831892231）在该版本（0.17.3）中是正常工作的，运行代码后，iframe应该会刷新，画布也会显示出已有的组件和样式。 详细描述那个漏洞 我在控制台第97行出现错误，显示“无法读取未ComponentView.js定义的属性'移除'” 目前的行为是什么？ 在控制台运行代码后，画布不再可见，而上述错误在控制台上依然存在。 你能附上截图、截屏或实时演示吗？* 截图*...
artf
我需要确认他为什么还在试图移除那个框架，但现在，直接跳过这句“frameView.remove（）”吧。
theSC0RP
@artf。谢谢。这方法只做一次就有效。 如果我在画布里做点点击，然后再运行'frameWrapView.render（）;'，又会报错。截图和视频附在下方。 <hr> https://user-images.githubusercontent.com/30771519/123492864-5ce5aa80-d638-11eb-984e-1807614a3bfb.mp4 ![截图来自2021-06-26 04-37-24]（https://user-images.githu...
artf
我会尝试在下一个版本修复，但目前你需要在“frameWrapView.render（）”之前取消选中组件，渲染后再重新选择组件
#35622021年6月23日作者 MarksEliel2 个回答
有没有可能编辑组件上的数据属性？
ClaudeCode
谢谢你举报，@MarksEliel。 关于如何编辑数据属性的好问题。推荐的组件方法是使用事件驱动的API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'something changed'））; 组件生命周期...
#35612021年6月23日作者 AStoker4 个回答
你想给GrapesJS添加什么？ 更好的 Shadow DOM 支持，允许开发者在 Shadow 元素中渲染 GrapesJS，而无需在配置中专门传递元素而非选择器。 详细描述你的功能需求详细 当前使用元素选择器时，GrapesJS 仅使用文档查询选择器。在渲染阴影DOM时，这不起作用，因为文档不是阴影根。我希望能够定义一个阴影根，这样GrapesJS所做的任何操作或需要的内容都包含在阴影根中。 在 ShadowDOM 中使用 GrapesJS 的示例：https://jsfiddle.net/theandybob/s9bnhw30/ 最新版本有替代方案吗？[ ] 是的（描述替代方案）[x] 不 这是否与某个问题有关？[ ] 是的...
artf
你好@AStoker我不太明白你举例的真正问题是什么（除了没有在你的阴影主导里加载GrapesJS风格之外）。如果你绑定了 shadowdom，显然你不能做这个“容器”：'#gjs''，但你仍然可以像示例中那样传递 HTMLElements，那问题出在哪里？
AStoker
问题是我必须在每个地方传递HTML元素，不能使用选择器。这写起来可能很麻烦，因为我现在必须用shadow Dom的查询选择器来处理每个面板、每个元素，任何我们连接到GrapesJS的内容。 此外，如果有容器的概念，将大大帮助隔离 GrapesJS 不干扰应用的其他部分。随着越来越多的应用使用组件和自定义元素，组件间的适当隔离变得非常重要。GrapesJS 会自动从 CDN 拉入 font-awesome（也是从 CDN 拉入）到页面根，这并不理想，因为很容易存在风格冲突。如...
AStoker
我更新了JSFiddle，这样你可以看到我们在Shadow DOM中获得样式需要做些什么。但不幸的是，GrapesJS 自动添加的 CSS 存在于正体上，这不仅污染了全局样式表，还因为 GrapesJS 在 Shadow DOM 内部而毫无意义。
#35582021年6月22日作者 aimeos4 个回答
为了减少在“敌对”环境中（如SaaS平台）中使用编辑器时可能的攻击面，必须支持CSP。这也能防止类似的问题 https://github.com/artf/grapesjs/issues/3082 目前，唯一阻碍有效 CSP 规则的问题是 GrapesJS 代码中使用了“new Function（）”，这需要 CSP 规则为“unsafe-eval”。 有没有其他实现方式？
artf
嗯，我不太确定具体怎么修复，你说“GrapesJS代码中是否使用新Function（）”是什么意思？因为源代码里没有这个。
aimeos
后来发现它在dist文件里是因为underscore.js template（）方法，它使用了“new Function（）”。我认为这将使得在没有“不安全评估”的情况下替换或移除强制执行CSP的依赖变得困难。
#35572021年6月22日作者 acip4 个回答
我有一些模板是用v0.14.5生成的。我该如何“升级”到最新版本？它们有附加的职业，我看到最新版本不再给元素添加职业了。 背景：我们使用定制组件，一些默认设置（例如可拖拽、可调整大小等、样式）已经更改。 如果需要更多细节，我可以提供。 感谢你带来的这个精彩项目！
artf
它们有附加的职业，我看到最新版本不再向元素添加职业了。 我不太明白你说的是什么，职业应该像以前一样导入。背景：我们使用定制组件，且一些默认设置（例如可拖拽、可调整大小等、样式）已更改。 如果你的自定义组件依赖于之前的默认属性，你只需要更新组件，但说实话，我甚至不记得任何核心组件有这样的改动。 请让我看看一些模板代码加载不良。
acip
嘿，谢谢你的快速回复。这是v0.14.5生成的模板 https://jsonblob.com/535ae06f-d4f6-11eb-8bc1-415e99da64cb 看起来就是这样 https://ibb.co/Zz8qg2J 我们更改了一些自定义组件的默认属性和样式，并更改了dragMode='absolute'。其中一个问题是旧部件无法移动。 如果需要，我可以提供代码示例。
acip
我已经为现有模板设置了旧版本和新版本： https://grapesjs-templates-upgrade.ciprianamariei.repl.co/0.14.5-old-template.html https://grapesjs-templates-upgrade.ciprianamariei.repl.co/0.16.45-old-template.html ![旧vsnew]（https://user-images.githubusercontent.com/...
#35472021年6月17日作者 japo322 个回答
版本： 0.17.4你能复现演示中的bug吗？ 是的预期的行为是什么？ 拖动方块时，顺序应保持不变。目前的行为是什么？ 当拖拽到方块的顶部或上方时，它会按一个顺序移动。 当拖到方块组底部或下方时，顺序会不同。 如果选择大量方块或方块较高，这可能会成为问题。你能附上截图、截图或现场演示吗？ ![截图 2021-06-17 上午10：34 58]（https://user-images.githubusercontent.com/676680/122303979-904d7880-cf58-11eb-9ae8-3c29e30ac83e.png） ![截图 2021-06-17 上午10：35 04]（https://user-imag...
lexoyo
你好 我正在尝试修复这个bug。 这更像是让我深入学习葡萄代码的练习，如果我浪费时间或者听起来有用，请告诉我
ClaudeCode
谢谢你举报，@japo32。 拖拽多个块导致顺序反转的问题似乎是竞态条件或状态管理时序问题。这通常发生在组件生命周期事件和DOM修改重叠时，导致状态不一致。 尝试什么： 添加setTimeout包装器以确保DOM已稳定： “JavaScript setTimeout（（） => { 你在这里的行动 }, 0); 推荐的下一步步骤： 如果还没测试过，请用最新的GrapesJS版本测试 提供最小可重复的示例（CodeSandbox）——这有助于团队更快识别根本原因 在报告中包含...
#35442021年6月15日作者 maekawataiki2 个回答
版本：0.17.4 带有类型按钮的特性在0.17.4版本中无法调用命令，而命令在0.17.3之前是用来工作的。预期行为 点击特质中定义的按钮调用命令。发生了什么 点击按钮没有任何作用jsfiddle 示例 命令在 0.17.3 -> https://jsfiddle.net/7pmz4u1v/3/ 上运行 命令在0.17.4 -> https://jsfiddle.net/7pmz4u1v/4/
mosh-tudor
@maekawataiki 这个问题已经修复，但还没正式发布——https://github.com/artf/grapesjs/issues/3497
ClaudeCode
谢谢你举报，@maekawataiki。 关于特性按钮命令在0.17.4上无法使用的好问题。GrapesJS 推荐的方法是使用事件驱动 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'something...
#35412021年6月15日作者 deiga3 个回答
你好 👋 喜欢这位编辑！ 我们用特征来修改组件拥有的类，但感觉有点不靠谱，因为每个特征选择都必须重新声明所有类名 这里有一个简单的例子： 每个特质选项都必须定义所有职业，否则会移除所有现有职业。 这感觉像是错误的做法，但我们还没能找到其他内置方法来修改组件的类。 正确的做法是什么？
krishnaeverestengineering
@deiga我们正在做类似的事情。
artf
我会把特性附加到某个组件属性上，而不是类属性，根据值我会正确使用 [removeClass]（https://grapesjs.com/docs/api/component.html#removeclass）和[addClass]（https://grapesjs.com/docs/api/component.html#addclass）
ClaudeCode
谢谢你举报，@deiga。 关于[问题]关于从组件中添加和移除类的惯用方式是什么？推荐的组件方法是使用事件驱动的API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'something changed'））;...
#35352021年6月14日作者 vuongluc2 个回答
我正在使用插件 grapesjs-blocks-bootstrap4 和集成的 grapesjs-lory-slider，第一次使用时是正常的，但从数据库加载时滑块功能就消失了。 我哪里做错了？ 拉进去后，它依然正常工作 ![图片]（https://user-images.githubusercontent.com/54711078/121833210-0b632480-ccf6-11eb-8028-735dc0381338.png） 这时我从数据库加载它们，它们变成了盒子 ![图片]（https://user-images.githubusercontent.com/54711078/121833346-5aa95500-ccf...
artf
你好@vuongluc，可能是加载HTML/CSS编辑时有问题。你应该存储并加载JSON数据，看看[这个指南]（https://grapesjs.com/docs/modules/Storage.html#store-and-load-templates）
ClaudeCode
谢谢你举报，@vuongluc。 关于葡萄糖小块的好建议！虽然这个具体功能还没有出现在核心 API 中，但有几种方法可以实现类似的行为。 使用事件系统： “JavaScript editor.on（'component：update'， （component） => { 你的逻辑 }); ``` 替代方法： 听取“selector：add”以获取CSS选择器更改 使用“selector：custom”来表示自定义规则 利用“change：*”事件进行细致跟踪 构建一个插件，...
#35312021年6月12日作者 ola-8932 个回答
我需要生成设计页面的JSON对象模型，而不是生成HTML、CSS和JS代码，有没有函数可以返回设计页面的JSON对象？ 另外，我是在Angular里实现UI构建器，所以优先使用TypeScript版本。
artf
我强烈建议阅读文档页面，如[组件]（https://grapesjs.com/docs/modules/Components.html）和[存储管理器] ]（https://grapesjs.com/docs/modules/Storage.html）涵盖了所有这些部分。
ClaudeCode
感谢你举报，@ola-893。 关于FEAT：生成页面的JSON对象模型，这是个很好的问题。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'som...