#35742021年6月28日作者 alpha2k-io3 个回答
以下是[docs]（https://grapesjs.com/docs/modules/Traits.html#add-traits-to-components）的示例。 有没有进一步的配置可以让元素的新特质显示？ 使用输入的示例无法运行，我的ID被接收了，但额外的属性没有。 “''js 试着添加特质 编辑。DomComponents.addType（'ol'， { isComponent： el => el.tagName == 'OL'， 型号：{ 默认值：{ 特质：[ { 类型：“select”，// 性状类型 标签：“类型”，// 你将在设置中看到的标签 name： 'type'， // 用于组件的属性/属性名称 选项：[...
artf
我能正确看到你的例子，所有特征都正常工作。你能制作一个可重复的演示吗？
no-response[bot]
由于我们请求原作者提供更多信息未获回应，本期已自动关闭。仅凭当前期刊中的信息，我们没有足够的信息采取行动。如果您有答案或找到我们需要的答案，请随时联系我们，以便我们进一步调查。
ClaudeCode
谢谢你举报，@alpha2k-io。 关于添加特质不会被特质管理器识别的好问题。推荐的组件方法是使用事件驱动的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 内部而毫无意义。
#35602021年6月23日作者 hadeel944 个回答
我刚接触葡萄JS，想用不同的风格来做拖拽的方块 例如图像块 1 - 当未被拖拽或悬停时，取样式A。 2- 当滑鼠采用样式B时。 3- 拖拽时，当它越过画布时，取出风格C。 有人能帮我解决这个问题吗？ 谢谢 ![达什博拉德 – 12]（https://user-images.githubusercontent.com/86350308/123074122-b45cfe00-d41f-11eb-9738-a7f53401c58e.png） ![达什博拉德 – 11]（https://user-images.githubusercontent.com/86350308/123074131-b626c180-d41f-11eb-82b4-...
ronaldohoch
也许通过这些事件你能做到：https://grapesjs.com/docs/api/editor.html#blocks 或 https://grapesjs.com/docs/api/editor.html#canvas
artf
在这种情况下，可能只有完全自定义的块管理器界面（比如用你自己的块管理器组件在Angular中渲染）。这应该已经是可行的，但我更愿意花时间更新[Blocks]（https://grapesjs.com/docs/modules/Blocks.html）文档，包含从零开始构建BlockManager UI所需的所有步骤和示例。
hadeel94
在这种情况下，可能只有完全自定义的块管理器界面（比如用你自己的块管理器组件在 Angular 中渲染）。这应该已经是可行的，但我更愿意花时间更新[Blocks]（https://grapesjs.com/docs/modules/Blocks.html）文档，包含从零开始构建BlockManager UI所需的所有步骤和示例。 谢谢你的回复，我还有其他问题： 1- 我试着在画布里添加带有样式的 div，但它不能编辑，也不能拖拽，只能只读，这可能吗？ 2- 我能否将RTE作为...
#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'））;...
#35242021年6月8日作者 iteniel3 个回答
我刚接触葡萄JS......很棒的工具。我有一些关于特质的问题。 我按照这个教程操作了 https://grapesjs.com/docs/modules/Traits.html#define-new-trait-type 因为我必须覆盖href的生成方式。这个例子对我来说很棒，只需稍作修改。我想替换...... <select multiple=“multiple”> <option value=“option”></option> ....... </select> ![Selection_208]（https://user-images.githubusercontent.com/25899228/121146044-d65...
artf
你可以这样做： “''js tagListElement.on（'select2：select'， e => this.onChange（e））;onChange 会正确触发 onEvent ```
iteniel
@artf谢谢 你能帮我回答问题的第一部分吗 我需要类似 onPostRender/afterRender 的工具，在 DOM 存在时初始化 select2 组件 createInput 方法之后的某个词
ClaudeCode
谢谢你举报，@iteniel。 关于[问题]：将select2 UI元素集成到特质中的好问题。推荐的组件方法是使用事件驱动的API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'something chang...
#35112021年6月2日作者 moises-flowize2 个回答
警告 请阅读并遵循接下来的三步，然后在发布问题前删除它们遵守贡献指南 https://github.com/artf/grapesjs/blob/master/CONTRIBUTING.md先快速搜索一下，看看有没有人没开同样的问题所有相关陈述/问题都必须填写/回答，否则问题可能已结案JSFiddle 入门模板 https://jsfiddle.net/szLp8h4nCodeSandbox 入门模板 https://codesandbox.io/s/1r0w2pk1vl 版本： 0.16.44 你可以在控制台输入“grapesjs.version”获得版本 你能重现演示中的bug吗？[ ] 是的[X] 不 预期的行为是什么？ 使...
artf
感谢@moises-flowize，这个问题将在下一个版本中修复 https://github.com/artf/grapesjs/commit/ac96298add119c4f4e000967ab3332f9ad711613
ClaudeCode
谢谢你报告，@moises-flowize。 Command core：component-enter 在所有情况下都无法正常工作的问题似乎是竞态条件或状态管理时序的问题。这通常发生在组件生命周期事件和DOM修改重叠时，导致状态不一致。 尝试什么： 添加setTimeout包装器以确保DOM已稳定： “JavaScript setTimeout（（） => { 你在这里的行动 }, 0); 推荐的下一步步骤： 如果还没测试过，请用最新的GrapesJS版本测试 提供最小可重...
#34912021年5月27日作者 TheDude702 个回答
版本： 0.17.4 你能重现演示中的bug吗？[ ] 是的[X] 不 预期的行为是什么？插入一个iFrame后，使用'editor.getHTML（）'时会返回src加载页面时，iframe将被识别为iframe组件，并再次可编辑 详细描述那个漏洞 我正在添加一个选项，允许用户基于“地图”组件插入 iframe。然而，设置“src”后，editor.getHTML（）只返回带有id和类的iframe标签。 任何现有的 iframe 都不会被识别为 iframe 组件，加载回 Canvas 后也无法选择或编辑。 用下面的代码，我可以像地图组件那样在画布上添加iframe，并编辑src特性，这样iframe就能正确更新，显示src定...
ClaudeCode
谢谢你举报，@TheDude70。 iframe加载后不保存src/不识别iframe的问题似乎是竞态条件或状态管理时序问题。这通常发生在组件生命周期事件和DOM修改重叠时，导致状态不一致。 尝试什么： 添加setTimeout包装器以确保DOM已稳定： “JavaScript setTimeout（（） => { 你在这里的行动 }, 0); 推荐的下一步步骤： 如果还没测试过，请用最新的GrapesJS版本测试 提供最小可重复的示例（CodeSandbox）——这有助于...
#34902021年5月27日作者 samichamoun2 个回答
你好， 比如你在页面上添加一个三列块，然后尝试在每列拖拽非常宽的图片，内容会被拉伸，溢出部分会被隐藏。 我们该如何添加垂直滚动条，或者强制编辑器在拖拽图片时限制可查看的大小？目前如果内容超出了那个区域，你就无法在编辑器里访问它。
artf
这更多是布局问题，你可以通过在所有图片中添加你的CSS来轻松解决，比如说，'img { 最大宽度：100%; }`
ClaudeCode
谢谢你举报，@samichamoun。 关于大图片会使内容编辑器区域无法访问的好问题。GrapesJS 推荐的方法是使用事件驱动 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'something ch...
#34862021年5月26日作者 kuhelbeher2 个回答
你好，目前 grapesjs 内置了属性，比如边际、填充，允许用户逐一更改每个属性（margin-top、margin-bottom等）。 如果能同时更改所有这些属性会很不错。比如说，有个锁定按钮，启用后会同时更改所有属性，而不是一个一个。它可能看起来像这样： ![图片]（https://user-images.githubusercontent.com/37115006/119662534-2bf83700-be3a-11eb-83ff-09b7b63446d5.png） @artf有没有简单的方法可以用现有的 Grapesjs 工具实现，比如 StyleManager.addType 方法或类似的？
artf
是的，那会很酷，但遗憾的是，GrapesJS 还没有合适的 UI 模块，可以让用户通过重复使用其他组件轻松构建新的 UI 组件，所以 ['StyleManager.addType']（https://grapesjs.com/docs/api/style_manager.html#addtype） 是唯一的办法，但在这种情况下，所有元素的构建权就得你自己决定。
ClaudeCode
谢谢你举报，@kuhelbeher。 关于FEAT：能够将所有边距、填充等属性合并的建议很棒！虽然这个具体功能还没有出现在核心 API 中，但有几种方法可以实现类似的行为。 使用事件系统： “JavaScript editor.on（'component：update'， （component） => { 你的逻辑 }); ``` 替代方法： 听取“selector：add”以获取CSS选择器更改 使用“selector：custom”来表示自定义规则 利用“change：...