Bộ chọn màu jquery Spectrum không hoạt động trên Internet explorer

Question

Tôi đang sử dụng Spectrum làm plugin jquery cho bộ chọn màu để sử dụng nó trong các div có thể chỉnh sửa được. Trong chrome và firefox nó hoạt động hoàn hảo. Nhưng trong Internet explorer nó chỉ hiển thị các bảng màu nhưng khi tôi chọn không có gì thay đổi.

Tuy nhiên, nếu tôi exectute execCommand trực tiếp theo cách này nó đang làm việc:

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

Tôi đang làm gì sai? Xin vui lòng giúp tôi làm thế nào để sử dụng nó trong IE quá. Cảm ơn bạn.

jsfiddle

đoạn 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> 

đoạn 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

Vấn đề ở đây là IE đang mất tiêu điểm/lựa chọn trước khi bạn nhấp vào màu, và đó là lý do tại sao nó không hoạt động. Nó kích hoạt sự kiện change, nhưng vì không có gì được chọn, không có gì xảy ra.

Để giải quyết sự cố, bạn phải lưu lựa chọn khi các nút Spectrum được nhấp vào, sau đó khôi phục lựa chọn đó khi sự kiện change của Spectrum được kích hoạt.

Something như thế:

var WinSelection = (function(w, d) { 
    var currentSelection = null; // create a variable to save the current selection 

    function saveSelection() { // saveSelection copied from another SO answer 
    if (w.getSelection) { 
     sel = w.getSelection(); 
     if (sel.getRangeAt && sel.rangeCount) { 
     return sel.getRangeAt(0); 
     } 
    } else if (d.selection && d.selection.createRange) { 
     return d.selection.createRange(); 
    } 
    return null; 
    } 

    function restoreSelection(range) { // restoreSelection copied from another SO answer 
    if (range) { 
     if (w.getSelection) { 
     sel = w.getSelection(); 
     sel.removeAllRanges(); 
     sel.addRange(range); 
     } else if (d.selection && range.select) { 
     range.select(); 
     } 
    } 
    } 

    return { // return an object with two public methods: saveSelection and restoreSelection 
    saveSelection: function() { 
     currentSelection = saveSelection(); 
    }, 
    restoreSelection: function() { 
     restoreSelection(currentSelection); 
    } 
    }; 
})(window, document); 

Sau đó, trong mã của bạn, bạn có thể lưu các lựa chọn khi các nút bấm:

$('#wysiwyg-editor li a').click(function() { 
    WinSelection.saveSelection(); 
}); 

Và bên trong sự kiện change của bạn, bạn khôi phục lại các lựa chọn:

/* ... */ 
change: function (color) { 
    WinSelection.restoreSelection(); 
    document.execCommand('foreColor', false, color.toHexString()); 
}, 
/* ... */ 
change: function (color) { 
    WinSelection.restoreSelection(); 
    document.execCommand("BackColor", false, color.toHexString()); 
}, 
/* ... */ 

Và đây là your fiddle - được cập nhật và làm việc tại I E.

Answer 2

Bạn cần phải thêm bộ lọc độc quyền cho IE để nhận được hỗ trợ độ dốc

Checkout: http://bgrins.github.io/spectrum/#details-ieImplementation

Answer 3

Muốn cung cấp một giải pháp mà đã từng làm việc cho tôi:

Thêm thuộc tính html unselectable='on' đến ba divs sẽ được tạo ra bởi các plugin phổ (Tôi thực hiện các mã sau khi trang web đã tải xong):

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

Điều này sẽ không làm mất tập trung vào văn bản đã chọn. Từ các thử nghiệm của tôi, điều này không ảnh hưởng đến hành vi bình thường trong các trình duyệt khác (được thử nghiệm trên Firefox, Chrome và Opera). Chỉnh sửa: Lựa chọn màu đơn giản, nhưng nếu tôi muốn chọn màu được xác định trước hoặc nhập giá trị khác bằng tay vào trường nhập được hiển thị, lựa chọn vẫn bị mất.