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

Javascript - Reselect text after wrap tags around it doesnt work? WYSIWYG

本文关键字：选择 文本 所见即所得 不起作用 新选择 标签 Javascript      更新时间：2023-09-26

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

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

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