Javascript 带Rangy库的虹膜颜色选择器-维护文本选择

我在我的富HTML编辑器中使用Iris colorPicker（），允许用户更新内容可编辑段落中文本的颜色

问题是，在调用第一个“更改”事件后，我将丢失选择，因此不会应用任何后续的颜色更改

我尝试使用Tim Down的Aweasome库来保存选择并在触发更改事件时恢复它。这在第一次调用事件时起作用，但每次调用后都失败

我有这个功能在颜色选择器打开之前保存选择

// Saves current selection.  Colour picker widget is displayed after this is called.
jQuery(".tve_save_selection").on("mousedown", function(e) {
        window.textselection = rangy.saveSelection();
});

这就是虹膜颜色选择器的初始化方式：

var text_colourpicker_options = {
    change: function (event, ui) {
        color = ui.color.toString();
        rangy.restoreSelection(window.textselection);
        var sel = rangy.getSelection();
        if (sel.toString().length) {
         document.execCommand('ForeColor', false, color);
        }
    },
    hide: true,
    palettes: window.tve_custom_colours,
};

颜色选择器似乎没有“关闭”事件，因此在用户确定颜色后，我无法应用execCommand

我认为在document.execCommand（）函数启动后，我可能需要生成一个新的范围，但由于DOM已更改，我不知道如何确定选择的新范围

---

在此方面的任何帮助都将不胜感激

根据您给出的描述，我推断，每次用户更改颜色时，都会调用分配给选项

change

的匿名函数。如果是这种情况，那么您的代码将无法工作

为什么它不起作用 它无法工作，因为您的代码使用同一保存的选择多次调用

rangy.restoreSelection

，而使用保存的选择只能调用此函数一次。这可从以下方面确定：

从以前由rangy.saveSelection（）返回的对象还原选择它删除由该方法创建的任何隐藏标记元素。

（强调添加。）标记是允许save和restore方法工作的，因此如果删除它们，则后续调用将无法工作。这也可以通过查看

restoreSelection

的代码来确定，此处缩写为与此问题相关的内容：

function restoreSelection(savedSelection, preserveDirection) {
    if (!savedSelection.restored) {
        // ...
        // Actual work
        // ...
        savedSelection.restored = true;
    }
}

第一次调用时，

savedSelection.restored

将为false，并将执行恢复选择的实际工作。在对同一选择的后续调用中，

savedSelection.restored

将为true，不会执行任何操作

解决方案 还原选定内容后再次保存它：

rangy.restoreSelection(window.textselection);
window.textselection = rangy.saveSelection();

---

谢谢Louis，我实现了你的建议，效果非常好！