Spectrum颜色选择器手动设置默认颜色异常问题及解决方法

我在使用Spectrum颜色选择器为FullCalendar日历事件设置颜色时，新建事件的选色功能正常，但修改事件时遇到了问题：需要让修改用的Spectrum选择器默认选中当前事件的颜色，最初的设置方式导致异常。

创建Spectrum颜色选择器的代码 #

$("#color-picker > li > div").spectrum({
    preferredFormat: "hex",
    showInput: true,
    showPalette: true,
    palette: [
      ["#3c8dbc", "#f56954", "#00a65a", "#f39c12", "#00c0ef", "#d2d6de"]
      // 可自定义添加更多调色板颜色
    ],
    change: function(color) {
      // 保存选中的颜色
      currColor = color.toHexString();
      // document.getElementById("color-picker-btn").setAttribute('style', 'color:'+currColor+';');
    },
    cancelText: "Cancelar",
    chooseText: "Elegir",
    clearText: "Limpiar",
    noColorSelectedText: "Ningún color seleccionado",
    togglePaletteMoreText: "Más",
    togglePaletteLessText: "Menos"
});

最初错误的默认颜色设置方式 #

我一开始尝试重新调用初始化方法来设置默认颜色，代码如下：

$("#color-picker > li > div").spectrum({
    color: evento.borderColor
}); 

这种方式会引发异常，因为Spectrum实例已经初始化完成，重复调用初始化方法会导致实例冲突或异常。

正确的颜色更新方式 #

经过排查，正确的做法是使用Spectrum提供的set方法来更新已初始化实例的颜色：

$("#color-picker > li > div").spectrum("set", evento.borderColor);

内容的提问来源于stack exchange，提问作者MakiMH3