J’ai une relation amour/haine avec le plugin paste dans TinyMCE, l’éditeur JavaScript WYSIWYG qui est livré avec WordPress. Dans les versions récentes, TinyMCE est devenu très bon pour désinfecter le texte collé à partir de MS Word, mais c’est encore beaucoup plus permissif que je ne le voudrais.

Un problème de longue date est que les classes sont ajoutées à chaque paragraphe et à chaque portée lorsque je colle du texte dans l’éditeur :

[pastacode lang= »markup » manual= »%3Cp%20class%3D%22p1%22%3EThis%20is%20%3Cspan%20class%3D%22s1%22%3Epasted%3C%2Fspan%3E%20text%3C%2Fp%3E » message= » » highlight= » » provider= »manual »/]

Ce comportement étrange est cohérent dans de nombreuses applications – InDesign, TextEdit, Mail – donc je soupçonne qu’il peut se produire au niveau du système d’exploitation. En tout cas, je ne veux pas que les attributs de classe trouvent leur chemin dans le balisage à moins que je les mette là !

Un problème plus important est que TinyMCE ne filtre pas les balises HTML du contenu collé. Si vous copiez et collez du texte d’un site Web, vous pourriez, sans le savoir, apporter son balisage pour le trajet et finir avec quelque chose comme ceci :

[pastacode lang= »markup » manual= »%3Cdiv%20class%3D%22row%22%3E%20%3Cdiv%20class%3D%22col-8%22%3E%20%3Ctable%3E%20%3Ctr%3E%20%3Ctd%3E%3Cp%3EThis%20is%20pasted%20text%3C%2Fp%3E%3C%2Ftd%3E%20%3C%2Ftr%3E%20%3C%2Ftable%3E%20%3C%2Fdiv%3E%20%3C%2Fdiv%3E » message= » » highlight= » » provider= »manual »/]

Je suis sûr que vous pouvez imaginer à quel point ce balisage supplémentaire pourrait être désastreux sur la page d’accueil de votre site Web.

Malheureusement, TinyMCE n’a pas d’option de configuration pour spécifier quelles balises sont autorisées dans le balisage collé. L’option valid_elements nous permet de définir quels éléments resteront dans le texte édité lorsque TinyMCE enregistre, mais c’est une solution trop zélée. À l’occasion, vous pourriez avoir besoin d’ajouter des balises via TinyMCE, et valid_elements le supprimerait à nouveau lorsque vous enregistrez votre message. Ce qu’il faut, c’est un moyen de nettoyer le texte lorsqu’il est collé dans TinyMCE, tout en permettant à l’utilisateur de taper des balises dans l’éditeur s’il le souhaite.

La solution se présente sous la forme de l’option paste_preprocess, qui nous permet de spécifier un callback qui sera exécuté lorsque le contenu est inséré dans l’éditeur. Dans ce rappel, nous pouvons supprimer toutes les balises que nous ne voulons pas, et supprimer les classes, id et tout autre attribut indésirable de notre contenu.

Dans WordPress, vous pouvez vous connecter à la configuration de TinyMCE en utilisant le filtre tiny_mce_before_init. Dans le fichier functions.php de votre thème :

[pastacode lang= »php » manual= »add_filter(‘tiny_mce_before_init’%2C’configure_tinymce’)%3B%0A%0A%2F**%0A%20*%20Customize%20TinyMCE’s%20configuration%0A%20*%0A%20*%20%40param%20%20%20array%0A%20*%20%40return%20%20array%0A%20*%2F%0Afunction%20configure_tinymce(%24in)%20%7B%0A%20%20%24in%5B’paste_preprocess’%5D%20%3D%20%22function(plugin%2C%20args)%7B%0A%20%20%20%20%2F%2F%20Strip%20all%20HTML%20tags%20except%20those%20we%20have%20whitelisted%0A%20%20%20%20var%20whitelist%20%3D%20’p%2Cspan%2Cb%2Cstrong%2Ci%2Cem%2Ch3%2Ch4%2Ch5%2Ch6%2Cul%2Cli%2Col’%3B%0A%20%20%20%20var%20stripped%20%3D%20jQuery(‘%3Cdiv%3E’%20%2B%20args.content%20%2B%20’%3C%2Fdiv%3E’)%3B%0A%20%20%20%20var%20els%20%3D%20stripped.find(‘*’).not(whitelist)%3B%0A%20%20%20%20for%20(var%20i%20%3D%20els.length%20-%201%3B%20i%20%3E%3D%200%3B%20i–)%20%7B%0A%20%20%20%20%20%20var%20e%20%3D%20els%5Bi%5D%3B%0A%20%20%20%20%20%20jQuery(e).replaceWith(e.innerHTML)%3B%0A%20%20%20%20%7D%0A%20%20%20%20%2F%2F%20Strip%20all%20class%20and%20id%20attributes%0A%20%20%20%20stripped.find(‘*’).removeAttr(‘id’).removeAttr(‘class’)%3B%0A%20%20%20%20%2F%2F%20Return%20the%20clean%20HTML%0A%20%20%20%20args.content%20%3D%20stripped.html()%3B%0A%20%20%7D%22%3B%0A%20%20return%20%24in%3B%0A%7D » message= » » highlight= » » provider= »manual »/]

Nous utilisons jQuery pour remplir le DOM avec le contenu collé, puis traverser le DOM et supprimer les tags et les classes que nous ne voulons pas. Enfin, nous extrayons le balisage HTML nettoyé et le renvoyons à l’éditeur. Cette approche peut sembler alambiquée, mais elle est beaucoup moins sujette à l’erreur que l’utilisation d’expressions régulières pour assainir notre contenu.

Tout ce que vous avez à faire est de modifier la variable whitelist, qui contient une liste de balises pour permettre de passer votre filtre.

Une dernière chose : vous remarquerez peut-être que toute notre fonction JavaScript est contenue dans une chaîne de caractères. Cela peut sembler étrange, mais c’est nécessaire car WordPress stocke les options de configuration de TinyMCE sous la forme d’un tableau de chaînes de caractères.

 

Source : https://jonathannicol.com/blog/2015/02/19/clean-pasted-text-in-wordpress/