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

您当前的代码并不遥远，尽管对于以一个块元素（例如<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]);
            }
        }
    }
}

Javascript - 在它周围的换行标签后重新选择文本不起作用？所见即所得

1 个答案: