Comment changer la couleur du texte sélectionné à l'aide colorpicker

Question

Je suis en train d'utiliser jquery colorpicker pour changer la couleur du texte du texte sélectionné à partir d'un div.Here est mon code

var colorpickerOptions = { 

    select: function (event, color) { 
    var color_in_hex_format = color.formatted; 
    document.execCommand('foreColor', false, '#'+color_in_hex_format); 
    $('.colorpicker').css('background-color','#'+color_in_hex_format); 
}  

,inline: false 
}; 

$('.colorpicker').colorpicker(colorpickerOptions); 

Mais document.execCommand('foreColor', false, '#'+color_in_hex_format); ne fonctionnait pas quand je choisis un couleur de colorpicker.Why?

Voici le code de démonstration FIDDLE

Answer 1

Comme par mozilla documentation about execCommands:

foreColor: 
Changes a font color for the selection or at the insertion point. This requires a color value string to be passed in as a value argument. 

Donc, dans votre code, même si vous sélectionnez quoi que ce soit de la contenteditable, une fois que vous cliquez sur le bouton colorpicker, votre sélection est perdu donc votre execCommand ne fonctionne pas. Vous pouvez vérifier le texte sélectionné en utilisant la console et cela montre qu'aucun texte n'est sélectionné.

Voici le test de code:

var colorpickerOptions = { 
select: function (event, color) { 
    var color_in_hex_format = color.formatted; 
    console.log(window.getSelection().toString());//Checks for selected text 
    //document.execCommand('foreColor', false, '#'+color_in_hex_format); 
    $('[contenteditable]').css('color', '#' + color_in_hex_format); 
    $('.colorpicker').css('background-color', '#' + color_in_hex_format); 
},inline: false 
}; 
$('.colorpicker').colorpicker(colorpickerOptions); 

Ainsi, la solution simple sera soit d'appliquer le color css pour compléter div comme:

$('[contenteditable]').css('color', '#' + color_in_hex_format); 

en remplaçant la ligne execCommand avec ce qui précède ligne. Démo: http://jsfiddle.net/lotusgodkk/6V7hL/144/

PS: Je n'ai pas répondu à votre question.

Answer 2

Vous pouvez envelopper le texte sélectionné avec un élément span et ajouter de la couleur à cette durée, vous devez enregistrer le code sélectionné sur mouseup sur la div, puis utiliser .html() pour envelopper le texte avec span.

Obtenir le code texte sélectionnécode from TimDown

function getSelectionHtml() { 
    var html = ""; 
    if (typeof window.getSelection != "undefined") { 
     var sel = window.getSelection(); 
     if (sel.rangeCount) { 
      var container = document.createElement("div"); 
      for (var i = 0, len = sel.rangeCount; i < len; ++i) { 
       container.appendChild(sel.getRangeAt(i).cloneContents()); 
      } 
      html = container.innerHTML; 
     } 
    } else if (typeof document.selection != "undefined") { 
     if (document.selection.type == "Text") { 
      html = document.selection.createRange().htmlText; 
     } 
    } 
    return html; 
} 

Enregistrer le texte sélectionné sur la souris jusqu'à

var selection = ""; 
$('[contenteditable]').on('mouseup',function(){ 
selection = getSelectionHtml(); 

}); 

texte Wrap avec une durée

$('[contenteditable]').html(function(){ 
     return this.textContent.replace(selection,'<span style="color:#'+color_in_hex_format+'">'+selection+'</span>'); 
    }); 

DEMO

Une autre version

Si vous voulez changer la couleur de plus d'une sélection, vous pouvez modifier le code html comme celui-ci

$('[contenteditable]').html(html.replace(selection,'<span style="color:#'+color_in_hex_format+'">'+selection+'</span>')); 

DEMO