Modifier la taille du texte sélectionné uniquement

Bonjour,

Dans le cadre d'un exercice ayant pour objectif de développer un mini-éditeur de texte comment, en utilisant Jquery, je pourrais augmenter la taille du texte sélectionné uniquement?

La taille de police est celle sélectionnée dans la liste déroulante que j'ai définie avec la balise "select" dans mon HTML.

Merci d'avance.

Bonsoir,
je ne devrais sans doute pas résoudre l’exercice à ta place, mais la tentation est trop grande :P

La sélection du texte se manipule via deux interfaces exposées par le DOM : Selection et Range. En avoir deux paraît excessif ; en réalité, ça couvre les cas rares où la sélection contient plusieurs « fragments » (ranges), ce qu’on peut obtenir en maintenant la touche ctrl et en sélectionnant plusieurs portions de texte à la souris.

Dans la plupart des cas, on n’a besoin de travailler que sur un seul range, et il n’y a pas de convention établie qui dicte comment devrait se comporter un script quand la sélection comporte plusieurs ranges. Personnellement, je considère qu’on peut se permettre de simplement déselectionner les ranges supplémentaires.

Un exemple peut être trouvé sur la page de doc de removeRange. Je l’ai un peu retravaillé ici :

Code:

---

1 2 3 4

let sel = window.getSelection(); for (let i = 1; i < sel.rangeCount; i++) { sel.removeRange(sel.getRangeAt(i)); }

---

Une fois éliminé le problème des ranges multiples, on accède au premier range comme ceci :

Code:

---

let range = sel.getRangeAt(0);

---

C’est cet objet range qui contient les méthodes intéressantes. Dans ton cas, surroundContents paraît convenir (je viens de traduire la page :D), mais en pratique elle lève des exceptions un peu trop souvent pour être confortable. On préfèrera utiliser la technique alternative présentée dans la doc :

Code:

---

1 2	newNode.appendChild(range.extractContents()); range.insertNode(newNode);

---

newNode doit être un nœud DOM que tu as créé au préalable. Pour augmenter la taille du texte, il est donc utile de créer un élément dont le type d’affichage est inline, typiquement un <span>, et lui ajouter une classe pour pouvoir y appliquer un style CSS.
En n’oubliant pas de « traduire » tout ça en jQuery, ça donne :

Code:

---

1 2 3

let newNode = $("<span>").addClass("bigger-text"); newNode.append(range.extractContents()); range.insertNode(newNode.get(0));

---

On doit utiliser .get() pour obtenir l’élément « nu », car insertNode ne sait pas travailler avec les objets jQuery.

Et le code CSS qui va avec :

Code:

---

1 2 3

.bigger-text { font-size: 120%; }

---

Ou un truc du genre.

Tu auras peut-être envie d’ajouter directement le style depuis ton code JS, sans passer par une classe. C’est moins propre, mais pour l’exercice je suppose que c’est tolérable. Et ça te permettra de gérer plus facilement les différentes valeurs fournies par ton <select>.

:idea: Note, la « propreté » du code est une notion subjective ; ce que je veux dire, c’est qu’un code JS n’est pas censé manipuler directement du code CSS (même si on voit souvent cette pratique). C’est un principe parfois appelé orthogonalité : le JS manipule des classes, le CSS décore des classes, chacun son rôle.

Et sinon, j’ai supposé que tu maîtrisais déjà le principe des évènements, notamment le $('select').on('change', ... ). Mais si ce n’est pas le cas, n’hésite pas à poser d’autres questions ;)

Merci pour votre réponse :)

En fait je voulais changer la taille de l'élément sélectionné selon la valeur de la balise "select".

Voici mon code mais ça ne marche pas encore:

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

$(function() { $('select').on('change', function() { var val=window.getSelection(); var range=val.getRangeAt(0);   var newNode = $("<span>").addClass("Modif-taille"); newNode.append(range.extractContents());   var n=$("select option:selected").val(); $(".Modif-taille").css("font-size",n); range.insertNode(newNode.get(0));   }); });

---

Bonjour,
plus trivialement et sans rentrer dans le détail de la (re)construction du DOM tu peux regarder du côté de document.execCommand, cela fait bien le job et c'est souvent suffisant.

Bonjour,
J'ai utilisé execCommand pour mettre en gras, en italique et en souligné. Ça a très bien marché.

Mais pour la taiĺle de police ça ne marche pas car execCommand: nécessite que la taille d'une police HTML (1-7) soit transmise en tant qu'argument de valeur. Alors que pour mon éditeur la taille de police varie de 8 à 72.

Merci.

Est ce que tu as regardé plus avant la commande styleWithCSS ou peut être insertHML, il y sûrement moyen de faire avec.

Je veux trouver une solution possible avec jquery. Avec javascript uniquement j'ai utilisé le innerHtml et ça a très bien marché.

Au niveau de la console pas d'erreur.

Au niveau du html c'est un <select......avec des options>. Et ça marche avec la version javascript du code mais je voudrais trouver la solution avec jquery.

Merci pour votre aide.

Bonjour !

Code:

---

$(".Modif-taille").css("font-size", n);

---

Citation:

---

Envoyé par geek150699

Mais pour la taiĺle de police ça ne marche pas car execCommand: nécessite que la taille d'une police HTML (1-7) soit transmise en tant qu'argument de valeur. Alors que pour mon éditeur la taille de police varie de 8 à 72.

---

Il faut faire une interpolation linéaire. Je ne rentre pas dans les détails, en gros il s’agit de trouver les constantes d’une fonction affine. Dans ton cas ça donne ça :

Code:

---

1 2 3

function interpolate(x) { return (32*x - 8) / 3; }

---

Cette fonction agit comme un « adaptateur » de valeurs.

Code:

---

1 2 3 4 5 6 7

x interpolate(x) --- -------------------- 1 8 2 18.666666666666668 3 29.333333333333332 ... ... 7 72

---

Sinon, à propos de cette ligne :

Code:

---

var n=$("select option:selected").val();

---

Tu n’as pas besoin de option:selected, normalement jQuery fait le travail tout seul.

Code:

---

let n = $("select").val();

---

Une autre remarque :

Code:

---

1 2 3

$("<span>").addClass("Modif-taille"); ... $(".Modif-taille").css("font-size", n);

---

Je ne sais pas si le script fait exactement ce que tu voudrais qu’il fasse. La deuxième instruction, ici, sélectionne tous les éléments ayant la classe .Modif-taille, et leur applique à tous la modification CSS. Elle ne modifie pas directement le code CSS.
En utilisant l’inspecteur DOM du panneau F12, tu pourras voir que l’élément <span> reçoit un attribut style.

Voici une autre façon de faire. Supposons qu’il y a 7 valeurs différentes dans ton <select>. On va créer 7 classes CSS différentes :

Code:

---

1 2 3 4

.taille-1 { font-size: 8pt; } .taille-2 { font-size: 18pt; } /* etc. */ .taille-7 { font-size: 72pt; }

---

Note : j’ai supposé que l’unité était pt. On est obligé de mettre les unités en CSS.

Si les valeurs du <select> sont simplement les chiffres de 1 à 7, on peut construire le nom de classe correspondant :

Code:

---

$("<span>").addClass( "taille-" + $("select").val() );

---