jquery renk seçici Spectrum, Internet Explorer'da çalışmıyor

Question

İçerik seçimli div'larda kullanmak için renk seçici için jpeery eklentisi olarak Spectrum kullanıyorum. Krom ve firefoks'ta mükemmel çalışıyor. Ama Internet Explorer'da sadece renk paletlerini gösteriyorum ama hiçbir şey seçmediğimde. Ben bu şekilde doğrudan execCommand exectute eğer

Ancak çalışıyor: Neyi yanlış yapıyorum

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

? Lütfen bana IE'de nasıl kullanılacağını bana da yardım edin. Teşekkür ederim.

jsfiddle

pasajı 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> 

pasajı js: Sen degrade destek almak için IE için özel filtreler eklemek gerekir

$(".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

Sorun burada IE, rengi tıklatmadan önce odak/seçimi kaybediyor ve işte bu yüzden çalışmıyor. change olayını tetikler, ancak hiçbir şey seçilmediğinden hiçbir şey olmaz. Geçici çözüm olarak, Spectrum düğmelerinin tıklatıldığında seçimi kaydetmeniz ve ardından change Spectrum olayı tetiklendiğinde bu seçimi geri yüklemeniz gerekir. Üste | Böyle

şey:

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

Ardından, kodda, sen düğme tıklandığında seçimi kaydedebilirsiniz:

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

Ve change olayı içinde, sen seçimini geri yükleyin:

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

Ve işte your fiddle - güncelleştirildi ve çalışıyor IE. Benim için çalışmış bir başka çözüm sunmak isteyen

Answer 2

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

Answer 3

:

spektrum eklenti tarafından oluşturulur bu üç div html özelliğini unselectable='on' Ekle (site bitmiş yükleme vardı sonra kod çalıştırılır):

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

Bu, seçilen metindeki odağı kaybetmeyi önler. Testlerimden, diğer tarayıcılarda normal davranışları etkilememelidir (Firefox, Chrome ve Opera'da test edilmiştir). Düzenleme: Basit renk seçimi çalışır, ancak önceden tanımlanmış bir renk seçmek veya görüntülenen giriş alanına elle başka bir değer girmek istiyorsanız, seçim hala kaybolur.