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 Pièce jointe 202803...

- 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 http://www.developpez.net/forums/att...atage/del.png/ et hop le formatage du texte sélectionné est supprimé... Je voudrais faire cela sur une page html éditable (contentEdit="true").

Salut, voilà plusieurs pistes de réflexion.

:arrow: 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:

---

$0.innerHTML = $0.textContent;

---

:arrow: 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:

---

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); });

---

:arrow: 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:

---

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')); } });

---

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 Pièce jointe 202803 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...

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...

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 :)

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...

Citation:

---

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...