保存选定的文本范围以供以后使用 不工作

2022-01-24 00:00:00 range javascript contenteditable execcommand

我正在使用 contenteditable 并突出显示一些文本.然后我想备份那个文本范围，然后给那个范围(文本)一个不同的颜色.如果我签入我的 zss_editor.restorerange 方法，我确实会返回一个有效的 selection 对象，因此我之前保存该范围的方式一定是不正确的.

I am using contenteditable and highlighting some text. I want to then backup that text range, and at a later time give that range(text) a different color. If I check in my zss_editor.restorerange method I do get back a valid selection object, so it must be something incorrect in how I am previously saving that range.

var zss_editor = {};

// The current selection
zss_editor.currentSelection;

zss_editor.backuprange = function(){
    var selection = window.getSelection();
    zss_editor.currentSelection = selection.getRangeAt(0);
    zss_editor.currentSelection.setEnd(zss_editor.currentSelection.startContainer, zss_editor.currentSelection.startOffset);
}

zss_editor.restorerange = function(){
    var selection = window.getSelection();
    selection.removeAllRanges();
    selection.addRange(zss_editor.currentSelection);
    console.log(zss_editor.currentSelection);
}

zss_editor.setTextColor = function(color) {
    zss_editor.restorerange();
    document.execCommand("styleWithCSS", null, true);
    document.execCommand('foreColor', false, color);
    document.execCommand("styleWithCSS", null, false);
}

zss_editor.setBackgroundColor = function(color) {
    zss_editor.restorerange();
    document.execCommand("styleWithCSS", null, true);
    document.execCommand('hiliteColor', false, color);
    document.execCommand("styleWithCSS", null, false);
}

关于 JS Fiddle 的工作示例:http://jsfiddle.net/zedsaid/gC3jq/11/

Working example on JS Fiddle: http://jsfiddle.net/zedsaid/gC3jq/11/

为什么，当我备份范围并想在以后恢复它时，它不起作用?我需要以其他方式备份范围吗?

推荐答案

可以通过存储startContainer &startOffset 以及 endContainer &结束偏移.要恢复，您只需创建一个新的范围对象并设置该范围对象的开始和结束，然后将其添加到选择中

You can backup the range by storing the startContainer & startOffset as well as the endContainer & endOffset. To restore, you just create a new range object and set the start and end of that range object then add it to the selection

var zss_editor = {};

// The current selection
zss_editor.currentSelection;

zss_editor.backuprange = function(){
    var selection = window.getSelection();
    var range = selection.getRangeAt(0);
    zss_editor.currentSelection = {"startContainer": range.startContainer, "startOffset":range.startOffset,"endContainer":range.endContainer, "endOffset":range.endOffset};

}

zss_editor.restorerange = function(){
    var selection = window.getSelection();
    selection.removeAllRanges();
    var range = document.createRange();
    range.setStart(zss_editor.currentSelection.startContainer, zss_editor.currentSelection.startOffset);
    range.setEnd(zss_editor.currentSelection.endContainer, zss_editor.currentSelection.endOffset);
    selection.addRange(range);
    console.log(range);
}

zss_editor.setTextColor = function(color) {
    zss_editor.restorerange();
    document.execCommand("styleWithCSS", null, true);
    document.execCommand('foreColor', false, color);
    document.execCommand("styleWithCSS", null, false);
}

zss_editor.setBackgroundColor = function(color) {
    zss_editor.restorerange();
    document.execCommand("styleWithCSS", null, true);
    document.execCommand('hiliteColor', false, color);
    document.execCommand("styleWithCSS", null, false);
}

$('#backup').click(function() {
    zss_editor.backuprange();
});

$('#color1').click(function() {
    zss_editor.setTextColor('#007AFF');
});

$('#color2').click(function() {
    zss_editor.setBackgroundColor('#007AFF');
});

相关文章