JQuery Comment puis-je appliquer CSS au texte sélectionné

J'essaie d'appliquer CSS au texte sélectionné. J'ai essayé ce qui suit et cela ne fonctionne pas. J'utilise Firefox.

$(document).keyup(function(){ savedRange = selection.getRangeAt(0); $(savedRange).wrap('<span style="color:red"></span>'); }); 

J'ai aussi essayé

 savedRange = selection.getRangeAt(0); $(savedRange).css('color', 'red'); 

Je peux le faire avec contentEditable en utilisant execcommand, mais execcommand applique des tags html plutôt que des styles inline. Ex: <font/> au lieu de style="font.." . Je dois appliquer un style en ligne et des tags html non obsolètes. J'aimerais utiliser la propriété jQuery css() pour appliquer des styles.

Je recommanderais le module d'application de classe CSS de ma bibliothèque Rangy pour cela. Il fonctionne dans tous les principaux navigateurs et pour toute sélection. Il va également activer ou désactiver les cours CSS.

Voici un exemple d'une autre question: Comment puis-je envelopper une sélection de texte à partir de window.getSelection (). GetRangeAt (0) avec une balise html?

Exemple:

 <style type="text/css"> span.red { color: red; } </style> <script type="text/javascript"> var redApplier; window.onload = function() { rangy.init(); redApplier = rangy.createCssClassApplier("red", true); }; function makeSelectionRed() { redApplier.applyToSelection(); } </script> 

METTRE À JOUR

Si l'utilisation de classes n'est pas une option, vous pouvez encore utiliser une variation, bien que ce soit légèrement le rond-point: vous pouvez utiliser Rangy pour appliquer une classe, puis utiliser jQuery pour trouver des intervalles avec cette classe et ajouter votre CSS à chacune. Voici un exemple:

 function makeSelectionRed() { var randomCssClass = "rangyTemp_" + (+new Date()); var classApplier = rangy.createCssClassApplier(randomCssClass, true); classApplier.applyToSelection(); // Now use jQuery to add the CSS colour and remove the class $("." + randomCssClass).css({"color": "red"}).removeClass(randomCssClass); } 

JsFiddle: http://jsfiddle.net/z2mdw/2/

Ce thread de questions sur la gestion des gammes enregistrées peut aider. Il ne vous explique pas spécifiquement comment ajouter des CSS, mais cela vous aidera à envelopper votre gamme, puis vous pouvez probablement associer une fonction .css () à cela.

 var range = window.getSelection().getRangeAt(0); var newNode = document.createElement("span"); range.surroundContents(newNode); 

Ensuite, vous devriez pouvoir appliquer css à cette période.

MODIFIER:

Pour appliquer CSS à la sélection de gamme, vous pouvez effectuer les opérations suivantes. Voir mon exemple de travail sur jsfiddle .

Vous pouvez définir directement le style CSS sur le nœud d'extension avec Javascript:

 // Get the selection range var range = window.getSelection().getRangeAt(0); // create a new DOM node and set it's style property to red var newNode = document.createElement('span'); newNode.style.color = "red"; // surround the selection with the new span tag range.surroundContents(newNode); 

Ou encerclez simplement la gamme avec une étiquette d'extension, et sélectionnez cette balise d'extension avec jQuery pour utiliser une syntaxe .css ().

 // get the selection var range = window.getSelection().getRangeAt(0); // create a new span node and give it an id 'testing'. var newNode = document.createElement('span'); newNode.id = "testing"; // wrap the selection range with the <span id="testing"></span> node. range.surroundContents(newNode); // select that new node with jquery and use the jQuery .css() method to apply styles. $("#testing").css("color", "green"); 

De toute évidence, ce javascript n'est pas idéal pour la réutilisation car j'ai codé un identifiant dans le deuxième exemple, mais j'espère que vous avez l'idée d'utiliser vos besoins.