Javascript html文本区域如何对文本区域内的内容应用样式

我知道这个话题已经被讨论过了，因为我可以在网上看到痕迹。人们普遍认为这是不可能的。但我知道至少有一种产品（TinyMCE）能够做到这一点。注意：我不想用TinyMCE来做这件事

我想在textarea元素的文本内容中添加一些图标。如果你也能点击图标那就太好了

---

也许这里已经有人调查过TinyMCE，知道他们是怎么做的。这是使用Javascript完成的吗？或者这是一些特定于浏览器的浏览器机制，比如拼写检查？

从我的理解库中，像这样使用

contentEditable

div。这允许像textarea一样编辑html元素。

从我的理解库中，像这样使用

contentEditable

div。这允许像textarea一样编辑以及html元素。

TinyMCE隐藏文本区域，并将其替换为内容可编辑的iframe（使用iframe文档的

设计模式

属性或iframe的

元素的

内容可编辑

属性）。我相信textarea仍然保留在文档中，并且随着用户编辑可编辑iframe中的内容，其值也会更新，这样TinyMCE生成的HTML就会被提交，就好像它已经被输入到textarea中一样。

TinyMCE会隐藏textarea，并用内容可编辑的iframe替换文档中的textarea（使用iframe文档的

designMode

属性或iframe的

元素的

contentEditable

属性）。我相信文本区域仍然保留在文档中，并且随着用户编辑可编辑iframe中的内容，文本区域的值也会更新，因此TinyMCE生成的HTML会像输入文本区域一样提交