jquery Farbwähler Spectrum funktioniert nicht im Internet Explorer

Question

Ich benutze Spectrum als jquery plugin für den Farbwähler, um es in den contenteditable divs zu verwenden. In Chrom und Firefox funktioniert es perfekt. Aber im Internet Explorer werden nur die Farbpaletten angezeigt, aber wenn ich nichts auswähle, wird das geändert.

Wenn ich jedoch execCommand direkt auf diese Weise exectute es funktioniert:

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

Was mache ich falsch? Bitte helfen Sie mir, wie man es auch im IE benutzt. Vielen Dank.

jsfiddle

Schnipsel 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> 

Schnipsel 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

Das Problem hier ist, dass IE den Fokus/Auswahl verliert, bevor Sie in die Farbe klicken, und deshalb funktioniert es nicht. Es löst das Ereignis change aus, aber da nichts ausgewählt ist, passiert nichts.

Um dieses Problem zu umgehen, müssen Sie die Auswahl speichern, wenn auf die Spectrum-Schaltflächen geklickt wird, und diese Auswahl wiederherstellen, wenn das Specific-Ereignis change ausgelöst wird.

So etwas:

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); 

Dann in Ihrem Code, können Sie die Auswahl speichern, wenn die Tasten angeklickt:

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

Und in Ihrem change Ereignis, wiederherstellen Sie die Auswahl:

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

Und hier ist your fiddle - aktualisiert und arbeitet in IE.

Answer 2

Sie müssen sich für IE proprietäre Filter hinzufügen

Gradienten Unterstützung

Kasse zu bekommen: http://bgrins.github.io/spectrum/#details-ieImplementation

Answer 3

Wanting eine andere Lösung zu bieten, die für mich gearbeitet hatte:

Fügen Sie den HTML-Attribut unselectable='on' auf diese drei divs, die durch das Spektrum Plugin erzeugt wird (ausgeführt ich den Code nach der Seite fertig geladen hatte):

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

Dies verhindert, dass der Fokus auf den ausgewählten Text verloren geht. Von meinen Tests sollte dies das normale Verhalten in anderen Browsern nicht beeinflussen (getestet in Firefox, Chrome und Opera). Edit: Einfache Farbauswahl funktioniert, aber wenn ich eine vordefinierte Farbe auswählen oder einen anderen Wert manuell in das angezeigte Eingabefeld eingeben möchte, ist die Auswahl immer noch verloren.