2

我正在寻找将光标包装span在 contenteditable 中的标签中div。

示例（由 表示的光标|）：

  • 前：

The fox jumps |

  • 后：

The fox jumps <span>|</span>

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

4

3 回答 3

1

实际上，您可以做一个技巧：

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

在 chrome 中工作：http: //jsfiddle.net/8TTb3/8/

于 2014-11-27T08:53:20.693 回答
1

由于实现问题，这不可能跨浏览器。尝试将插入符号放在空的内联元素中，例如<span>在 WebKit 和 IE 中的 a 中，实际上会将插入符号放在元素之前。以下演示了这一点：它将满足您在 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);
于 2012-11-26T10:01:15.360 回答
0

您唯一可以控制的是光标在 div 的（已解析的）内容中的位置。如果您在其中放置一个跨度，它将在浏览器插入光标之前被解析，此时光标将在它之前或之后。

所以不，我认为这是不可能的。

于 2012-11-25T22:19:04.640 回答