划分跨度文本

Question

我想写一个小的wysiwyg编辑器（只是文本）。目前，我正在尝试正确应用跨度。要围绕选定的内容，我使用以下代码：

var sel = window.getSelection ? window.getSelection() : document.selection.createRange(); // FF : IE
if(sel.getRangeAt){ // thats for FF
    var range = sel.getRangeAt(0);
    var newNode = document.createElement("span"); 
    newNode.setAttribute('class', 'green');
    range.surroundContents(newNode);
} else { //and thats for IE7
    sel.pasteHTML('<span style="color:green">'+sel.htmlText+'</span>');
}

请注意，这不是我的代码，我在stackoverflow上找到它。

在这个例子中这很好用： “我要回家了”，所以当我标记我和后记回家时，一切正常，我得到<span class="green">I</span> go <span class="green">Home</span>。

但现在，当我选择'm till hom时，我收到此错误

  

InvalidStateError：尝试使用不可用或不再可用的对象

原因是跨度会设置在错误的位置（至少我认为如此） 所以正确的输出是：<span class="green">I</span><span class="green">'m go hom</span><span class="green">e</span>。

那么我怎么能管理跨度设置正确/分割并在任何附加插件的地方设置新的？

如果有任何不清楚的地方，请发表评论。

https://jsfiddle.net/equalsound/2waoepm6/3/