1

我想建立另一个所见即所得的编辑器。我已经有一个脚本可以在当前选择周围包装标签，即使对于 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]);
        }
    }
}
}

对不起，我来自荷兰的英语不好。

4

1 回答 1

2

您当前的代码并不遥远，尽管对于从一个块元素（例如 a<p>或<div>）开始并以另一个块元素结束的范围，您可能会遇到不希望的行为。您缺少的基本位是您需要设置每个范围以包含包装的内容（使用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]);
            }
        }
    }
}
于 2012-07-06T23:27:43.067 回答