TinyMCE est un petit éditeur de texte open-source et sympathique à insérer dans un site, pour permettre aux utilisateurs de saisir du texte avec une mise en forme de type « traitement de texte ».
C’est plus complet qu’un simple champ de saisie multi-ligne « textarea », et il reste à mes yeux le plus simple à installer.
Il a toutefois un inconvénient pénible (outre le fait qu’il est en anglais !), c’est sa difficulté à permettre les copier-coller de textes pré-formatés issu d’un copier depuis Microsoft Word. Il existe pourtant une solution extrêmement simple pour résoudre ce problème…

J’utilise souvent TinyMCE pour les back-office des sites, de façon à permêttre à mes clients de saisir des descriptions d’articles ou des zones de nouvelles évènementielles par exemple.

Le problème est donc qu’il est difficile de les empêcher de faire des copier-coller issus de leur logiciel préféré pour ce type de saisie, à savoir Microsoft Word… même avec une formation idoine et des messages d’avertissements sur leurs pages d’administrations.

Lors de ces copier-coller, Word transmet sa mise en forme (alignements, gras, italique, couleurs, titres, etc…) sous la forme d’un code incroyablement long, compliqué, non valide W3C et, ce qui arrange le tout, incompatible avec Internet Explorer (toutes versions confondues, 8 y compris). la page ne s’affiche tout simplement plus …

A titre d’exemple, voici le code généré par ce simple texte :

<style> <!-- /* Font Definitions */ @font-face {font-family:Wingdings; panose-1:5 0 0 0 0 0 0 0 0 0;} @font-face {font-family:"Cambria Math"; panose-1:2 4 5 3 5 4 6 3 2 4;} @font-face {font-family:Cambria; panose-1:2 4 5 3 5 4 6 3 2 4;} @font-face {font-family:Calibri; panose-1:2 15 5 2 2 2 4 3 2 4;} /* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal {margin-top:0cm; margin-right:0cm; margin-bottom:10.0pt; margin-left:0cm; line-height:115%; font-size:11.0pt; font-family:"Calibri","sans-serif";} h1 {mso-style-link:"Titre 1 Car"; margin-top:24.0pt; margin-right:0cm; margin-bottom:0cm; margin-left:0cm; margin-bottom:.0001pt; line-height:115%; page-break-after:avoid; font-size:14.0pt; font-family:"Cambria","serif"; color:#365F91;} p.MsoListParagraph, li.MsoListParagraph, div.MsoListParagraph {margin-top:0cm; margin-right:0cm; margin-bottom:10.0pt; margin-left:36.0pt; line-height:115%; font-size:11.0pt; font-family:"Calibri","sans-serif";} p.MsoListParagraphCxSpFirst, li.MsoListParagraphCxSpFirst, div.MsoListParagraphCxSpFirst {margin-top:0cm; margin-right:0cm; margin-bottom:0cm; margin-left:36.0pt; margin-bottom:.0001pt; line-height:115%; font-size:11.0pt; font-family:"Calibri","sans-serif";} p.MsoListParagraphCxSpMiddle, li.MsoListParagraphCxSpMiddle, div.MsoListParagraphCxSpMiddle {margin-top:0cm; margin-right:0cm; margin-bottom:0cm; margin-left:36.0pt; margin-bottom:.0001pt; line-height:115%; font-size:11.0pt; font-family:"Calibri","sans-serif";} p.MsoListParagraphCxSpLast, li.MsoListParagraphCxSpLast, div.MsoListParagraphCxSpLast {margin-top:0cm; margin-right:0cm; margin-bottom:10.0pt; margin-left:36.0pt; line-height:115%; font-size:11.0pt; font-family:"Calibri","sans-serif";} span.Titre1Car {mso-style-name:"Titre 1 Car"; mso-style-link:"Titre 1"; font-family:"Cambria","serif"; color:#365F91; font-weight:bold;} .MsoPapDefault {margin-bottom:10.0pt; line-height:115%;} @page Section1 {size:595.3pt 841.9pt; margin:70.85pt 70.85pt 70.85pt 70.85pt;} div.Section1 {page:Section1;} /* List Definitions */ ol {margin-bottom:0cm;} ul {margin-bottom:0cm;} --> </style><div class=Section1> <h1>Mon texte est pré-formaté avec Word&nbsp;:</h1> <p class=MsoListParagraphCxSpFirst style='text-indent:-18.0pt'><span style='font-family:Symbol'>·<span style='font:7.0pt "Times New Roman"'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></span><b>Du gras</b></p> <p class=MsoListParagraphCxSpMiddle style='text-indent:-18.0pt'><span style='font-family:Symbol;color:red'>·<span style='font:7.0pt "Times New Roman"'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></span><span style='color:red'>De la couleur</span></p> <p class=MsoListParagraphCxSpLast style='text-indent:-18.0pt'><span style='font-family:Symbol'>·<span style='font:7.0pt "Times New Roman"'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></span><i>Et de l’italique</i></p> </div>

celà se passe de commentaire …

Pour nettoyer ce code Word copier-coller dans tinyMCE,

il suffit d’utiliser l’option « valid_elements » qui interdit l’enregistrement de tous les éléments HTML qui n’auront pas été préalablement déclarés.

Dans mon exemple j’utilise la version la plus simple de TinyMCE (qui suffit dans 90% de cas pour un éditeur de texte destiné à un affichage sans risque par des néophytes !), c’est à dire avec 6 boutons de mise en forme :

(NB : l’intégration de TinyMCE n’est pas développée ici , vous pouvez vous référer à la documentation officielle ou à ce petit PDF bien fait en Français)
Toute mise en forme autre que le gras, l’italique, le soulignement, le barré ou les listes sera donc à « nettoyer » depuis les copier-coller de Word.

Il suffit donc de rajouter dans les en-têtes des pages sur lesquelles se trouve le textarea couplé à l’éditeur TinyMCE :

<script type="text/javascript" src="tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
mode : "textareas",
valid_elements : "em/i,strike,u,strong/b,div[align],br,
#p[align],-ol[type|compact],-ul[type|compact],-li"
});
</script>

C’est fini… Après un copier-coller depuis Word, lorsque votre utilisateur cliquera sur le bouton d’envoi de son texte, toute balise autre que celles que vous avez spécifié (dans notre exemple : em/i,strike,u,strong/b,div[align],br,p[align],-ol[type|compact],-ul[type|compact],-li) sera supprimé lors de son insertion dans votre base des données !

thx

PS : Pour info, j’ai rajouté un petit tuto sur la façon d’intégrer sur un site TinyMCE en mode simple