Javascript - 在环绕标签后选择文本不起作用？所见即所得

Question

我想构建另一个 WYSIWYG 编辑器。我已经有一个脚本可以在当前选择周围包装标签，即使对于 Firefox 多重选择也是如此，但在我编辑 html 后它不会重新选择范围。怎么会这样？

这是我的代码:

function wrap(tagName)
{
    var selection;
var elements = [];
var ranges = [];
var rangeCount = 0;
if (window.getSelection)
{
    selection = window.getSelection();
    if (selection.rangeCount)
    {
        rangeCount = selection.rangeCount;
        for (var i=0; i<rangeCount; i++)
        {
            ranges[i] = selection.getRangeAt(i).cloneRange();
            elements[i] = document.createElement(tagName);
            elements[i].appendChild(ranges[i].extractContents());
            ranges[i].insertNode(elements[i]);
            selection.addRange(ranges[i]);
        }
    }
}
}

抱歉我来自荷兰的英语不好。

Answer 1

您当前的代码与此相差不远，但对于以一个 block 元素(例如 <p> 或 <div>)开始并以另一个 block 元素结束的范围，您可能会遇到不希望的行为。您缺少的基本位是您需要设置每个范围以包含包装的内容(使用 selectNode() )，并且您需要从选择中删除所有范围并在单独的步骤中将它们添加回去。

现场演示:http://jsfiddle.net/timdown/dmhPH/1/

代码:

function wrap(tagName)
{
    var selection;
    var elements = [];
    var ranges = [];
    var rangeCount = 0;
    var frag;
    var lastChild;
    if (window.getSelection)
    {
        selection = window.getSelection();
        if (selection.rangeCount)
        {
            var i = selection.rangeCount;
            while (i--)
            {
                ranges[i] = selection.getRangeAt(i).cloneRange();
                elements[i] = document.createElement(tagName);
                elements[i].appendChild(ranges[i].extractContents());
                ranges[i].insertNode(elements[i]);
                ranges[i].selectNode(elements[i]);
            }

            // Restore ranges
            selection.removeAllRanges();
            i = ranges.length;
            while (i--)
            {
                selection.addRange(ranges[i]);
            }
        }
    }
}