我想在“rte.selection（）”周围添加一个带有内联样式的新HTML元素。以下面的例子来说，HTML还可以，但JSON部分可能不太行： “''js const editorRte = this.editor.RichTextEditor // ... editorRte.add（'fontSize'， { 图标：” Size 8 pixels 12像素 16像素 72像素 , 事件：“变化”，结果：（RTE，动作） => { const selectedValue = action.btn.firstElementChild.value ||action.btn.firstChild.value rte.insertHTML（'<sp...

抢先体验

PageKit — 可自托管的 GrapesJS 建站工具，附完整源码。获取抢先体验

问题 #3218💬 已回答提出于 2021年1月5日作者 bgrand-ch2 个反应

提问 style-manager 文档 typescript

How to add new HTML element with inline styles?

快速解答作者 artf❤ 1

@bgrand-ch，你说的“可能”是什么意思？😅

阅读下方完整回答 ↓

问题

我想在“rte.selection（）”周围添加一个带有内联样式的新HTML元素。以下面的例子来说，HTML还可以，但JSON部分可能不太行： “''js const editorRte = this.editor.RichTextEditor // ... editorRte.add（'fontSize'， { 图标：” <select> <option value=“” 已禁用已选中>Size</option> <option value=“8px”>8 pixels</option> <option value=“12px”>12像素</option> <option value=“16px”>16像素</option> <option value=“72px”>72像素</option> </select> , 事件：“变化”，结果：（RTE，动作） => { const selectedValue = action.btn.firstElementChild.value ||action.btn.firstChild.value rte.insertHTML（'<span style=“font-size： ${selectedValue}; line-height： 100%;”>${rte.selection（）}</span>'） } }) }, ``

回答（4）

artf• 2021年1月6日

@bgrand-ch，你说的“可能”是什么意思？😅

bgrand-ch• 2021年1月6日

@artf感谢你的快速回复🙂，更新到“0.16.30”后我的问题就解决了。 🎉

bgrand-ch• 2021年1月5日

https://github.com/artf/grapesjs/issues/3069 🤔

GJSBlock• 2026年5月17日

谢谢你举报，@bgrand-ch。关于如何添加带有内联样式的新HTML元素？的好问题。ProseMirror 推荐的方法是使用事件驱动的 API。从这里开始：查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/）寻找“on（）”事件监听器方法大多数操作可以通过监听编辑器和组件事件来实现常见模式： “JavaScript 留意变化 editor.on（'change'，（） => console.log（'something changed'））; 组件生命周期 editor.on（'component：mount'，（c） => co...

在 GitHub 上查看完整讨论 →