（类型问题）在添加新的 rte 动作时无法通过 HTMLElement 作为图标

Question

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ 铬 可复制演示链接 https://jsfiddle.net/vmeywbk8/11/ 描述一下那个虫子 我们遇到一个小问题——在给 RichTextEditor 添加动作时，RichTextEditorAction 的“icon”属性被标记为字符串。 但在 addAction 中 （https://github.com/GrapesJS/grapesjs/blob/793599cbd5493c0104db1134bd4b1684341274a7/src/richtexteditor/model/RichTextEditor.ts#L363） 如果我们传递一个 HTMLElement，它会被附加到按钮上。这在运行时仍然有效，但如果你尝试传递字符串以外的内容，TypeScript 会判定类型不匹配错误。 “图标”属性可能应该标记为“string |HTMLElement”来解决这个问题——我想把这个问题作为我的第一项贡献来解决 行为准则 [X] 我同意遵守本项目的行为准则

GJS Helper · Accepted Answer

你准确地指出了GrapesJS关于富文本编辑器（RTE）动作icon属性的类型不匹配。RichTextEditor.addAction方法确实设计成接受string（针对SVG路径或类名）和对icon属性的 HTMLElement实例，但TypeScript对RichTextEditorAction['icon']的定义目前过于严格，只允许string。 根本原因 正如你指出的，addAction方法通过isString(icon)检查提供的icon是否是字符串。如果是字符串，则设置为innerHTML或textContent。如果不是字符串（根据使用情况隐含为HTMLElement），则直接附加到按钮元素上。这种运行时行为正确且灵活，允许自定义SVG元素或其他复杂HTML结构作为图标。 然而，TypeScript 接口的 RichTextEditorAction（或其 icon 属性的类型定义）并未体现这种灵活性，导致开发者在尝试直接传递HTMLElement时，即使底层 JavaScript 逻辑能够正确处理，也会导致类型错误。 提出的修复与变通方案 修复方法是更新RichTex...

（类型问题）在添加新的 rte 动作时无法通过 HTMLElement 作为图标

问题

GrapesJS 版本

你用的是什么浏览器？

可复制演示链接

描述一下那个虫子

行为准则

回答（1）

相关问答

传播组件默认值在引入子注释时可能会破坏层

Issue with rich text editor Indent action for Lists

Lists not working with default RTE

无法添加链接：getModel（）失败，TypeError： $ 不是函数

与此问题匹配的付费插件

相关教程

Introducing Search on GJS.Market

GrapesJS的Claude技能：AI如何改变我们构建可视化编辑器的方式

Lighthouse for GrapesJS：无需离开编辑器即可访问审计和SEO。

浏览插件分类

问题