在文本选择后插入HTML元素

Question

我试图在用户在页面上选择一些文本后插入一些HTML。我有它工作但不是最佳的，特别是有一个问题：

它依赖于页面上的元素，但我不希望它出现。我想在代码中完成所有操作，我确信它相对简单，但需要一些帮助：）

我也欢迎任何其他提示/建议/反馈！

可以看到代码在这里工作：http://jsfiddle.net/shE58/（selectionchange库是为了在FF中工作）。

document.addEventListener('selectionchange', function (event) {
    var sel = this.getSelection();

    // If text is being selected by drag, to wait for them to finish selecting.
    jQuery("body").mouseup(function() {
      // Ensure there is some text selected and that it is more than one character.
      if (sel.toString().length > 1) {
        // We only want one #element on the page at a time.
        $("#element").remove();

        // @TODO: Remove dependency on this:
        var el = document.getElementById('selection');
        el.innerHTML = '<div id="element"></div>';
        var frag = document.createDocumentFragment(), node;
        frag.appendChild(el.firstChild);

        var range = sel.getRangeAt(0)
        var startNode = range.startContainer, startOffset = range.startOffset;
        var boundaryRange = range.cloneRange();
        boundaryRange.collapse(false);
        boundaryRange.insertNode(frag);
        boundaryRange.setStart(startNode, startOffset);
        boundaryRange.collapse(true);
        // Clean up
        sel = '';
      }
    });
  });

Answer 1

解决方案1 ​​

删除frag变量并直接在insertNode函数中添加值，如下所示：

boundaryRange.insertNode($('<div id="element"></div>')[0]);

http://jsfiddle.net/N6zz8/

修复了从右到左选择的问题：

使用条件检查endOffset是否小于startOffset。

var startNode = range.startContainer, startOffset = range.startOffset;
if (range.endOffset < range.startOffset) {
    startNode = range.endContainer;
    startOffset = range.endOffset;
}

http://jsfiddle.net/2c4qw/

解决方案2

删除不必要的代码，删除＆＃39; el＆＃39;像这样的变量：

// @TODO: Remove dependency on this:
var frag = document.createDocumentFragment(), node;
$(frag).append($('<div id="element"></div>'));

http://jsfiddle.net/zYSH4/

解决方案3

声明您的变量var el = $("<div></div>")[0];。为了得到这个：

// @TODO: Remove dependency on this:
var el = $("<div></div>")[0];
el.innerHTML = '<div id="element"></div>';
var frag = document.createDocumentFragment(), node;
frag.appendChild(el.firstChild);

http://jsfiddle.net/7L3Kf/