在HTML中选择后持久保留范围对象的更改

小编典典

在HTML中选择后持久保留范围对象的更改

javascript

有没有一种方法来保存更改，例如更改跨越多个标签的HTML文本的背景，以便在再次加载时将所做的更改反映在HTML页面中。

编辑：详细说明。

加载HTML页面后，将使用range对象和executeCommand选择并突出显示文本：

             document.execCommand("BackColor", false, 'yellow');

更改（将文本突出显示为黄色）将一直保留，直到重新加载页面为止。但是，当重新加载页面时，这些更改不存在。我想要以某种方式保存这些更改（例如在本地DB
sqlite中），以便在重新加载/刷新页面时应显示HTML页面中的更改。

任何想法如何做到这一点。我是否需要保存其范围的起始偏移量和结束偏移量，可在下次加载页面时用于创建范围。请提供您的见解。

阅读 455

2020-05-01

共1个答案

小编典典

对于每个选择，您可以将所选范围序列化为字符偏移量，并在重新加载时使用如下所示再次将其反序列化：

码：

var saveSelection, restoreSelection;

if (window.getSelection && document.createRange) {
    saveSelection = function(containerEl) {
        var range = window.getSelection().getRangeAt(0);
        var preSelectionRange = range.cloneRange();
        preSelectionRange.selectNodeContents(containerEl);
        preSelectionRange.setEnd(range.startContainer, range.startOffset);
        var start = preSelectionRange.toString().length;

        return {
            start: start,
            end: start + range.toString().length
        };
    };

    restoreSelection = function(containerEl, savedSel) {
        var charIndex = 0, range = document.createRange();
        range.setStart(containerEl, 0);
        range.collapse(true);
        var nodeStack = [containerEl], node, foundStart = false, stop = false;

        while (!stop && (node = nodeStack.pop())) {
            if (node.nodeType == 3) {
                var nextCharIndex = charIndex + node.length;
                if (!foundStart && savedSel.start >= charIndex && savedSel.start <= nextCharIndex) {
                    range.setStart(node, savedSel.start - charIndex);
                    foundStart = true;
                }
                if (foundStart && savedSel.end >= charIndex && savedSel.end <= nextCharIndex) {
                    range.setEnd(node, savedSel.end - charIndex);
                    stop = true;
                }
                charIndex = nextCharIndex;
            } else {
                var i = node.childNodes.length;
                while (i--) {
                    nodeStack.push(node.childNodes[i]);
                }
            }
        }

        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
    }
} else if (document.selection) {
    saveSelection = function(containerEl) {
        var selectedTextRange = document.selection.createRange();
        var preSelectionTextRange = document.body.createTextRange();
        preSelectionTextRange.moveToElementText(containerEl);
        preSelectionTextRange.setEndPoint("EndToStart", selectedTextRange);
        var start = preSelectionTextRange.text.length;

        return {
            start: start,
            end: start + selectedTextRange.text.length
        }
    };

    restoreSelection = function(containerEl, savedSel) {
        var textRange = document.body.createTextRange();
        textRange.moveToElementText(containerEl);
        textRange.collapse(true);
        textRange.moveEnd("character", savedSel.end);
        textRange.moveStart("character", savedSel.start);
        textRange.select();
    };
}

2020-05-01