javascript - 在 contenteditable div 中用 html 包裹光标

Question

我希望将光标包裹在 span 中内容可编辑的标签 div .

示例(用 | 表示的光标):

• 之前:

The fox jumps |

• 之后:

The fox jumps <span>|</span>

任何修改 innerHTML 的尝试都会导致光标移动到行尾。我希望将它插入之间新的 HTML span的。

Answer 1

由于实现问题，这不可能跨浏览器。尝试将插入符放在一个空的内联元素中，例如 <span>在 WebKit 和 IE 中，插入符实际上会紧挨在元素之前。下面演示了这一点:它会做你在 Firefox 中所期望的，而不是 WebKit 或 IE。

http://jsfiddle.net/8TTb3/1/

您可以使用 DOM Range和 Selection用于在插入符号位置插入元素的 API，IE < 9 除外，它不支持这些元素，而是拥有自己的 API。

代码:

var range = sel.getRangeAt(0);
var span = document.createElement("span");
range.insertNode(span);
range.setStart(span, 0);
range.setEnd(span, 0);
sel.removeAllRanges();
sel.addRange(range);