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

JavaScript Discussion :

Comment supprimer la mise en forme (formatage) ?


Sujet :

JavaScript

  1. #1
    Membre expert
    Homme Profil pro
    Inscrit en
    Octobre 2011
    Messages
    2 874
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Octobre 2011
    Messages : 2 874
    Points : 3 721
    Points
    3 721
    Par défaut Comment supprimer la mise en forme (formatage) ?
    Salut,

    - Comment supprimer la mise en forme (formatage) ? Par exemple celle du texte sélectionné dans une page HTML ? Ou supprimer le formatage sélectionné pour que le texte qu'on tape ensuite soit sans formatage (formatage par défaut).
    On trouve cela dans certains éditeurs comme celui de ce présent forum, vous savez quand on clique sur Nom : del.PNG
Affichages : 3504
Taille : 796 octets...

    - Peut-être plus difficile : comment supprimer une partie du formatage : genre par exemple je supprime la couleur mais je laisse le gras...

    Merci.

    EDIT : Ceci dit j'aurais dû préciser que je cherche une solution "automatique" un peu comme l'éditeur du forum où on clique sur et hop le formatage du texte sélectionné est supprimé... Je voudrais faire cela sur une page html éditable (contentEdit="true").

  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
    Salut, voilà plusieurs pistes de réflexion.

    Sous Chrome et Firefox tu as un inspecteur HTML qui s'ouvre avec Ctrl+Maj+C. Repère le plus proche parent commun aux éléments qui constituent ton texte formaté. Sa propriété textContent te donnera le texte brut, non formaté, qu'il contient. Si tu as sélectionné l'élément dans l'inspecteur, tu peux l'utiliser directement dans la console avec la variable $0 :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    $0.innerHTML = $0.textContent;
    Avec l'inspecteur, toujours, tu peux repérer les éléments que tu as envie de « déformater » et les remplacer à la main. Tu peux aussi repérer un point qu'ils ont en commun (par exemple une même classe) et utiliser querySelectorAll pour les remplacer tous :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    var redSpans = document.querySelectorAll('span.red');
     
    // variante « boucle for classique »
    for (var i = 0, len = redSpans.length; i < len; i++) {
      var $redSpan = redSpans[i];
      var textNode = document.createTextNode($redSpan.textContent);
      $redSpan.parentNode.replaceChild(textNode, $redSpan);
    }
     
    // variante « forEach »
    Array.prototype.forEach.call(redSpans, function ($redSpan) {
      var textNode = document.createTextNode($redSpan.textContent);
      $redSpan.parentNode.replaceChild(textNode, $redSpan);
    });
    Si ton objectif est de copier-coller le texte, sache que le presse-papiers (clipboard) véhicule plusieurs types d'informations. En JavaScript, ces informations sont accessibles via la propriété dataTransfer de l'objet event lorsque tu traites les évènements du presse-papiers ou de glisser-déposer. Si tu copies du contenu HTML formaté et que tu colles dans un logiciel de traitement de texte riche (genre Word), il y a de grandes chances que le formatage soit conservé ; mais si tu colles dans un éditeur de texte (Notepad), tu ne verras que le texte brut.

    Pour examiner les différents types transmis par un évènement du presse-papiers, fais-toi une page avec une <textarea> et ce script :
    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
    18
    19
    20
    21
    22
    23
    // pour Chrome parce que Chrome est stupide
    if (!('contains' in Array.prototype)) {
      Array.prototype.contains = function contains(item) {
        for (var i = this.length; i--; ) if (this[i] === item) return true;
        return false;
      };
    }
     
    // surveille l'évènement « coller » dans la <textarea>
    document.querySelector('textarea')
      .addEventListener('paste', function (event) {
        var data = event.clipboardData;
        if (data.types.contains('text/html')) {
          // affiche le texte formaté dans la console
          console.log('*** HTML data: ***');
          console.log(data.getData('text/html'));
        }
        if (data.types.contains('text/plain')) {
          // affiche le texte non formaté dans la console
          console.log('*** plain text data: ***');
          console.log(data.getData('text/plain'));
        }
      });
    La FAQ JavaScript – Les cours JavaScript
    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

  3. #3
    Membre expert
    Homme Profil pro
    Inscrit en
    Octobre 2011
    Messages
    2 874
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Octobre 2011
    Messages : 2 874
    Points : 3 721
    Points
    3 721
    Par défaut
    Merci et +1.

    J'apprécie les infos sur le copier/coller car justement je me pose des questions à ce propos mais je reviendrai dessus plus tard...

    Ceci dit j'aurais dû préciser que je cherche une solution "automatique" un peu comme l'éditeur du forum où on clique sur Nom : del.PNG
Affichages : 3504
Taille : 796 octets et hop le formatage du texte sélectionné est supprimé... Je voudrais faire cela sur une page html éditable (contentEdit="true").

    Sinon j'ai testé le deuxième point (suppression de la couleur rouge) ici : http://jsfiddle.net/3v7x7btt/5, cela fonctionne sauf dans quelques cas particuliers que j'ai testés en ajoutant d'autres fonctions...

    Je vais éditer mon premier poste pour préciser les choses...

  4. #4
    Membre expert
    Homme Profil pro
    Inscrit en
    Octobre 2011
    Messages
    2 874
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Octobre 2011
    Messages : 2 874
    Points : 3 721
    Points
    3 721
    Par défaut
    Salut,

    Je viens de voir ce plugin : http://ckeditor.com/addon/removeformat pour ckeditor mais cela ne me parait pas évident (ils utilisent leur librairie...).

    Mais je ne sais pas pourquoi il ont fait leur propre fonction car j'ai vu qu'il y a une fonction qui fait cela apparemment : document.execCommand('RemoveFormat')...

    Je l'ai testée et ça marche plutôt bien même quand le texte sélectionné n'est pas entièrement compris à l'intérieur d'une seule balise.

    Mais je n'ai pas tout testé, il y a peut être des inconvénients qui justifieraient que certains aient fait leur propre fonction.

    A suivre...

  5. #5
    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
    Je n'ai jamais utilisé execCommand, mais s'il supprime le formatage correctement, je ne vois pas de raison de ne pas s'en servir. Les problèmes, d'après ce que j'ai entendu dire, se produisent plutôt avec les commandes qui rajoutent des balises.

    Pour retirer seulement certains styles, et de manière automatisée, ça va être un peu laborieux. Heureusement, je me suis déjà essayé à la gestion de la séléction et je peux te donner quelques conseils
    La doc. (Si tu tombes sur des 404, repasse plus tard, je suis en train d'essayer d'arranger ça.)

    En gros tu as un objet range que tu as obtenu avec selection.getRangeAt (pour bien faire il faut gérer les cas, rares mais pas impossibles, où selection.rangeCount > 1 – quand tu sélectionnes plusieurs bouts de texte en maintenant la touche Ctrl).

    1. La première chose à vérifier, c'est range.collapsed. Si c'est true ça veut dire que la séléction est de longueur 0, autrement dit c'est juste un curseur clignotant ; dans ce cas tu choisis : soit tu ne fais rien, soit tu retires le style à la position du curseur, c'est selon ce qui te paraît le plus logique.
    2. Les propriétés startContainer et endContainer de range renvoyant très souvent (toujours ?) des nœuds #text, Tu vas te retrouver à devoir manipuler cette sorte de nœuds, chose dont on n'a pas l'habitude.

      Pour rappel les nœuds #text sont les nœuds dont le nodeType est égal à Node.TEXT_NODE, à savoir 3. C'est les nœuds qu'on obtient avec document.createTextNode.

      Les méthodes intéressantes sont Text.splitText, Node.normalize et les méthodes de CharacterData, en particulier appendData. J'ai profité du vieux Windows XP que j'ai sous la main pour vérifier ce qui marche sous IE8 – je ne dis pas qu'il faut supporter IE8, mais ça donne une idée de ce qui est possible – et :
      • Les nœuds #text ont les méthodes splitText et appendData, mais pas normalize ;
      • Les nœuds Element (en gros, les balises HTML) ont la méthode normalize. Conclusion : si tu fais comme dans l'exemple du MDN, tu n'auras pas de problèmes.

    3. Utilise parentNode pour accéder aux balises de styles contenant les nœuds #text, et vérifie qu'elles correspondent à un style que tu veux retirer ou pas. Pour ça je te conseille de prévoir une classe (attribut class) par style, c'est ce qui me paraît le plus simple pour marcher sous la plupart des navigateurs. Et puis, ça respecte le principe de l'orthogonalité, ça ne peut pas faire de mal
      Le reste du travail, c'est des coups de ciseaux et du scotch si tu vois ce que je veux dire. Tu split, tu append et tu normalize, en faisant attention aux offsets, on a vite fait d'oublier un +1 ou un -1.


    Voilà, j'espère que ça t'inspire
    La FAQ JavaScript – Les cours JavaScript
    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

  6. #6
    Membre expert
    Homme Profil pro
    Inscrit en
    Octobre 2011
    Messages
    2 874
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Octobre 2011
    Messages : 2 874
    Points : 3 721
    Points
    3 721
    Par défaut
    Encore merci et +1 !

    J'ai regardé la doc que tu as indiquée, elle est très bien, claire et concise, je me suis baladé ici et là...

    Merci pour la petite synthèse des fonctions et des étapes à suivre, j'y réfléchi...

    Les propriétés startContainer et endContainer de range renvoyant très souvent (toujours ?) des nœuds #text, Tu vas te retrouver à devoir manipuler cette sorte de nœuds, chose dont on n'a pas l'habitude.
    J'ai testé ce point avec un objet "selection" et on peut avoir un focusNode qui ne soit pas une nodetext (type 3)...

    En plus, même si les extrémités de la sélection se trouvent dans une nodetext à l’intérieur on peut avoir toute sorte d’élément... Par exemple les extrémités de la sélection peuvent se trouver dans deux paragraphes différents...

    A suivre...

Discussions similaires

  1. Réponses: 13
    Dernier message: 28/11/2011, 13h55
  2. Supprimer la mise en forme d'un texte
    Par Stormy31 dans le forum Langage
    Réponses: 5
    Dernier message: 02/02/2009, 16h59
  3. Réponses: 5
    Dernier message: 17/06/2008, 15h17
  4. Comment garder la mise en forme d'un textarea ?
    Par dns78 dans le forum Langage
    Réponses: 4
    Dernier message: 09/06/2007, 14h53
  5. comment fixer la mise en forme
    Par tenderstoune dans le forum Balisage (X)HTML et validation W3C
    Réponses: 17
    Dernier message: 04/05/2007, 09h08

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