Question

我使用Spectrum作为颜色选择器的jquery插件，以便在contenteditable div中使用它。在chrome和firefox中它的工作完美。但是在Internet Explorer中它只是显示调色板，但是当我选择时什么都没有改变。

但是，如果我以这种方式直接执行execCommand它正在运行：

$('#btn-color_font').click(function() {
    document.execCommand('foreColor', false, "#ff0000");
});

我做错了什么？请帮我在IE中如何使用它。谢谢。

jsfiddle

摘录html：

<li class="main-btn">
    <a href="#" id="btn-color_font" class="wysiwyg-color-spectrum-cF">cF</a>
</li>
<li class="main-btn" >
    <a href="#" id="btn-color_background" class="wysiwyg-color-spectrum-bF">cB</a>
</li>

摘录js：

$(".wysiwyg-color-spectrum-cF").spectrum({
    showPaletteOnly: true,
    togglePaletteOnly: true,
    togglePaletteMoreText: 'more',
    togglePaletteLessText: 'less',
    color: 'blanchedalmond',
    change: function (color) {
        document.execCommand('foreColor', false, color.toHexString());
    },
    hideAfterPaletteSelect: true,
    palette: [
        ["#000", "#444", "#666", "#999", "#ccc", "#eee", "#f3f3f3", "#fff"],
        ["#f00", "#f90", "#ff0", "#0f0", "#0ff", "#00f", "#90f", "#f0f"],
        ["#f4cccc", "#fce5cd", "#fff2cc", "#d9ead3", "#d0e0e3", "#cfe2f3", "#d9d2e9", "#ead1dc"],
        ["#ea9999", "#f9cb9c", "#ffe599", "#b6d7a8", "#a2c4c9", "#9fc5e8", "#b4a7d6", "#d5a6bd"],
        ["#e06666", "#f6b26b", "#ffd966", "#93c47d", "#76a5af", "#6fa8dc", "#8e7cc3", "#c27ba0"],
        ["#c00", "#e69138", "#f1c232", "#6aa84f", "#45818e", "#3d85c6", "#674ea7", "#a64d79"],
        ["#900", "#b45f06", "#bf9000", "#38761d", "#134f5c", "#0b5394", "#351c75", "#741b47"],
        ["#600", "#783f04", "#7f6000", "#274e13", "#0c343d", "#073763", "#20124d", "#4c1130"]
    ]
});

Answer 1

希望提供另一种对我有用的解决方案：

将html属性unselectable='on'添加到将由频谱插件生成的这三个div中（我在网站加载完成后执行了代码）：

jQuery(".sp-replacer").attr("unselectable", "on");
jQuery(".sp-preview").attr("unselectable", "on");
jQuery(".sp-preview-inner").attr("unselectable", "on");

这可以防止失去对所选文本的关注。从我的测试来看，这不应该影响其他浏览器的正常行为（在Firefox，Chrome和Opera上测试）。编辑：简单的颜色选择有效，但如果我想选择预定义的颜色或手动输入另一个值到显示的输入字段，选择仍然会丢失。

Answer 2

您需要为IE添加专有过滤器以获得渐变支持

结帐：http://bgrins.github.io/spectrum/#details-ieImplementation

jquery颜色选择器Spectrum无法在Internet Explorer上运行

2 个答案: