在插入符号位置插入HTML而不创建对象

Posted 2023-05-07

【中文标题】在插入符号位置插入HTML而不创建对象

【英文标题】：insertHTML in the caret position without creating object

【发布时间】：2014-12-20 04:58:42

【问题描述】：

我有内容可编辑的 div，并且里面有文本。

<div contenteditable="true"><span> Some text.. </span></div>

我需要插入代替插入符号关闭和打开跨度标签。喜欢：

<div contenteditable="true"><span> Some </span><span> text.. </span></div>

我尝试通过 inserthtml 来实现：

document.execCommand('insertHTML', false, '</span><span>');

它在 Crome 中工作，但 Firefox 生成 span 对象并在此处插入（插入有效的 html）。事实证明：

<div contenteditable="true"><span> Some <span></span> text.. </span></div>

有谁知道如何在 contenteditable div 中拆分 span 标签？提前致谢

【问题讨论】：

那么，你真正想要的是将每个单词分成它自己的<span> 标签？你可以使用第三方库，比如 jQuery 吗？

@TomasLycken，哦。我不想将每个单词分成<span> 标签。这就是我需要的：jsfiddle.net/cwm3tbtu 但它在 Firefox 中不起作用。

【参考方案1】：

您可以只使用 innerHTML 属性插入任何 HTML 代码，这是一个使用 javascript 的示例：

document.getElementById("myDiv").innerHTML = "<span>Here is the new Content!</span>";

然后给你的 div id="myDiv"。

【讨论】：

我需要将插入符号保留在同一个位置。在这种情况下，插入符号会跳到末尾

@VasyaShmarovoz 我真的不明白你的意思，但你也可以给跨度元素一个 id 并在跨度内插入带有 innerHtml 的文本，如果这是你要求的？

@VasyaShmarovoz 是的，事实上，这还不够清楚，但您只需要最初在要添加内容的地方放置一个空 div 并使用 innerHTML 来填充它。

@chsdk，如何在有插入符号的地方划分跨度？

@VasyaShmarovoz，使用JavaScript String split() Method here is an example 来划分跨度，但获得插入符号的位置是最重要的。看看这里，有一些问题：First和Second。