javascript - 在鼠标位置插入子标签

Question

我有一个 div 元素，其中包含文本，可能还有其他子标签(imgs、span 等)。我需要以下内容 - 当用户单击文本上 div 内的某处时，必须将子标签准确插入文本内的该位置。绝对定位不是一个选项 - 我需要修改 div 的innerHTML。

例如，如果 div 是

<div>some text, more text</div>

并且用户在“更多”之后单击，我的 div 应修改如下

<div>some text, more<span>new tag</span> text</div>

Answer 1

您可以将每个单词/字符包装在一个范围内，然后在其后附加新标签。 LetteringJS (http://letteringjs.com/) 可以帮助您。

如果您要使用输入，则可以使用 jCaret ( http://www.examplet.org/jquery/caret.php )，从示例来看，它看起来非常奇特。