Question

我在我的富HTML编辑器中使用Iris Colourpicker（http://automattic.github.io/Iris/），以允许用户更新可疑段落中的文本颜色。

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

我尝试使用Tim Down的真棒Rangy库来保存选择并在触发更改事件时恢复它。这是第一次调用事件时有效，但每次都失败。

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

// 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已经更改，我不知道如何确定选择的新范围。

对此的任何帮助将不胜感激！

Answer 1

根据您给出的描述判断，我推断每次用户更改颜色时都会调用分配了选项change的匿名函数。如果是这种情况，那么您的代码将无法正常工作。

为什么不起作用

它无法正常工作，因为您的代码使用相同的已保存选择多次调用rangy.restoreSelection，而此功能只能使用已保存的选择一次调用。这可以从the documentation确定：

从rangy.saveSelection（）先前返回的对象中恢复选择。 删除该方法创建的所有隐藏标记元素。

（强调添加。）标记允许保存和恢复方法工作，因此如果删除它们，则后续调用无法工作。这也可以通过查看restoreSelection的代码来确定，此处缩写为与此问题相关的内容：

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

首次调用savedSelection.restored将为false，将执行恢复选择的实际工作。在对同一选择的后续调用中，savedSelection.restored将为真，并且不会完成任何工作。

解决方案

恢复后再次保存选择：

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

与Rangy图书馆的虹膜颜色选择器 - 维护文本选择

1 个答案:

为什么不起作用

解决方案