picture picture
juillet 17, 2009 JavaScript 8 Commentaires

Comment rendre TinyMCE compatible avec les copier-coller de Word

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

8 Responses to “Comment rendre TinyMCE compatible avec les copier-coller de Word”

8 Commentaires

  1. ange@luckyluke dit :

    oui, j’ai renoncé au debuger Word de Tiny MCE : marche à moitié voire pas du tout :[ ce qui est proposé ici me parait bien plus judicieux.

  2. luckyluke dit :

    Bonjour,
    J’utilise la toute dernière version (septembre 09) et il est prévu, dans le mode avancé, un bouton spécial pour le copier/coller de documents Word. Cependant, il me semble y avoir un bug dans le script, car, si le texte formaté apparaît bien dans la petite fenêtre de dialogue, il perd une grande partie de sa mise en forme dès qu’on le colle dans l’éditeur. :""( . Quelqu’un a-t-il observé la même chose ? Ou sait-il le pourquoi …

    La remarque sur la sécurité me semble justifiée ! Gare !

    Cordialment.

  3. webtolosa@33_225 dit :

    si tu veux donner a tes éditeurs la possibilité de mettre des tableaux à partir d’une icone, il faut passer en mode "avancé" en insérant dans ton head l’attribut suivant :
    tinyMCE.init({
    theme:"advanced",
    mode:"textareas",
    etc…
    voir la doc sur le site de tinyMCE !

  4. webtolosa@vivicente dit :

    je t’ai fait un tuto ici : http://www.webtolosa.com/index.p...
    thx

  5. vivicente dit :

    Comment on fait , une fois que l’on a inséré le contenu du textearea dans un champs de la base de données, pour le récupérer en conservant la bonne mise en page ???

    merci

  6. 33_225 dit :

    Trop bien ton blog, je viens de modifier mon tinyMCE, et ça marche mieux, mais par contre, comment je fais pour les tableaux? :bravo:

  7. Valéry dit :

    En ce qui concerne le copier/coller de Word, j’ai déjà observé qu’il pouvait aussi compromettre la sécurité du site si le document Word est infecté.

  8. Jules75 dit :

    tout simple, comme j’aime :)
    merci man pour tob blog, une mine …

Commentaire

Name

Mail (ne sera pas publié)

Website

Laisser ces deux champs tels quels :
:D :-) :( :o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: