在contenteditable元素中插入带样式文本的技巧

本文探讨如何在contenteditable元素的光标处插入带样式的文本，并分析几种不同的实现方法：

方法一：创建样式化文本节点

这种方法直接在光标位置插入一个包含样式信息的文本节点。 简单易懂，但连续插入多个不同样式的文本时，节点数量会急剧增加，影响性能。

方法二：利用HTML标签包裹

使用HTML标签包裹待插入文本，并通过CSS样式控制其外观。此方法能有效减少节点数量，但需要额外的HTML标签处理逻辑。

方法三：巧用HTML样式注释

类似于方法二，使用HTML样式注释标记插入文本，同样通过CSS控制样式，避免了多余的HTML标签。

方法四：内容可编辑样式

直接在contenteditable元素上应用内容可编辑样式，并在光标处设置所需样式。 这种方法方便快捷，但需要浏览器对内容可编辑样式提供良好支持。

选择哪种方法取决于具体应用场景和性能要求。 对于简单的样式应用，方法一可能足够；而对于复杂的样式和大量文本插入，方法二或方法三更佳。 方法四则提供了更优雅的解决方案，但需要考虑浏览器兼容性。