IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

Modifier la taille du texte sélectionné uniquement


Sujet :

jQuery

  1. #1
    Membre à l'essai
    Femme Profil pro
    Enseignant
    Inscrit en
    Novembre 2014
    Messages
    12
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : Tunisie

    Informations professionnelles :
    Activité : Enseignant

    Informations forums :
    Inscription : Novembre 2014
    Messages : 12
    Points : 11
    Points
    11
    Par défaut 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.

  2. #2
    Expert éminent
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    Juin 2010
    Messages
    3 093
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : Juin 2010
    Messages : 3 093
    Points : 6 754
    Points
    6 754
    Par défaut
    Bonsoir,
    je ne devrais sans doute pas résoudre l’exercice à ta place, mais la tentation est trop grande

    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 ), 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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 css : Sélectionner tout - Visualiser dans une fenêtre à part
    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>.

    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
    La FAQ JavaScript – Les cours JavaScript
    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

  3. #3
    Membre à l'essai
    Femme Profil pro
    Enseignant
    Inscrit en
    Novembre 2014
    Messages
    12
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : Tunisie

    Informations professionnelles :
    Activité : Enseignant

    Informations forums :
    Inscription : Novembre 2014
    Messages : 12
    Points : 11
    Points
    11
    Par défaut
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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)); 
     
     	});	
    });

  4. #4
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 112
    Points
    44 112
    Par défaut
    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.

  5. #5
    Membre à l'essai
    Femme Profil pro
    Enseignant
    Inscrit en
    Novembre 2014
    Messages
    12
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : Tunisie

    Informations professionnelles :
    Activité : Enseignant

    Informations forums :
    Inscription : Novembre 2014
    Messages : 12
    Points : 11
    Points
    11
    Par défaut
    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.

  6. #6
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 112
    Points
    44 112
    Par défaut
    Est ce que tu as regardé plus avant la commande styleWithCSS ou peut être insertHML, il y sûrement moyen de faire avec.

  7. #7
    Membre à l'essai
    Femme Profil pro
    Enseignant
    Inscrit en
    Novembre 2014
    Messages
    12
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : Tunisie

    Informations professionnelles :
    Activité : Enseignant

    Informations forums :
    Inscription : Novembre 2014
    Messages : 12
    Points : 11
    Points
    11
    Par défaut
    Je veux trouver une solution possible avec jquery. Avec javascript uniquement j'ai utilisé le innerHtml et ça a très bien marché.

  8. #8
    Membre à l'essai
    Femme Profil pro
    Enseignant
    Inscrit en
    Novembre 2014
    Messages
    12
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : Tunisie

    Informations professionnelles :
    Activité : Enseignant

    Informations forums :
    Inscription : Novembre 2014
    Messages : 12
    Points : 11
    Points
    11
    Par défaut
    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.

  9. #9
    Expert éminent
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    Juin 2010
    Messages
    3 093
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : Juin 2010
    Messages : 3 093
    Points : 6 754
    Points
    6 754
    Par défaut
    Bonjour !

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    $(".Modif-taille").css("font-size", n);
    Citation Envoyé par geek150699 Voir le message
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    function interpolate(x) {
      return (32*x - 8) / 3;
    }
    Cette fonction agit comme un « adaptateur » de valeurs.
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    var n=$("select option:selected").val();
    Tu n’as pas besoin de option:selected, normalement jQuery fait le travail tout seul.
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    let n = $("select").val();
    Une autre remarque :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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 CSS : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    $("<span>").addClass( "taille-" + $("select").val() );
    La FAQ JavaScript – Les cours JavaScript
    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [Débutant] modifier la taille du texte des header via ressourcesDictionary
    Par igorzup dans le forum Windows Presentation Foundation
    Réponses: 4
    Dernier message: 12/06/2012, 19h17
  2. modifier la taille d'une Text
    Par caro_caro dans le forum SWT/JFace
    Réponses: 1
    Dernier message: 07/10/2008, 12h39
  3. Réponses: 11
    Dernier message: 23/11/2006, 16h32
  4. modifier la taille du texte dans un JButton?
    Par Zoroastre dans le forum AWT/Swing
    Réponses: 3
    Dernier message: 14/01/2006, 19h46
  5. Comment modifier la couleur du texte sélectionné ?
    Par VincentR dans le forum Composants VCL
    Réponses: 4
    Dernier message: 14/06/2005, 23h29

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo