UseRichText

Approved by Moyo and JMD

1. Objectifs attendus

- Utilisation d’un système de copier-coller pour optimiser l'upload des copies d'écrans
- Pouvoir créer un fil dans la description de son ticket : exemple : du texte, suivi d'une copie d'écran, puis encore du texte, puis 2 copies d'écran etc.
- Pouvoir envoyer dans le mail de suivi, la description telle que souhaitée (du texte, suivi d'une copie d'écran etc.)
- Activation/désactivation de l'édition du contenu en mode "Rich text"

2. Ajout d'un bouton dans le formulaire du ticket pour uploader des copies d'écrans

Le bouton d'ajout d'une image apparait sur l'interface de TinyMce et permet d'ouvrir une fenêtre modale ou il est possible de coller une image (ctrl+v).

3. Ouverture d'un popup modale qui utilise pour l'upload

La gestion du copier/coller d'une image à partir du "clipboard" de l'OS est différente selon les navigateurs. Elle est prise en compte sur les dernières versions des navigateurs. La fonction isIE est utilisée pour différencier le cas spécifique d'internet explorer. Deux plugin Jquery sont développés pour mettre en place le dispositif :
  • Plugin Jquery pour Chrome/Firefox
    Pour Chrome et Firefox le copier/coller peut être directement géré en JavaScript
  • Plugin Jquery pour IE
    Par contre pour Internet Explorer, il est nécessaire d’utiliser un applet Java pouvant supporter le copier/coller
Source :

4. Enregistrement des copies d’écran en tant que document lié au ticket

Toutes les images ajoutées dans la description du ticket sont enregistrées et liées au ticket, avec un « tag » unique permettant de les identifier.

5. Génération d'un tag unique permettant au technicien de l'ajouter dans la description TinyMce;

Le tag permet à GLPI de reconnaitre une image. Ce tag est affiché dans l’onglet document du ticket pour chaque image. Exemple de tag : #sefds54sd
Il peut être utile lorsqu’on souhaite utiliser une image dans la description. Il suffit alors de copier/coller le « tag » dans la description du ticket, puis à la validation, ce « tag » est converti par la balise HTML de l’image permettant sont affichage.

6. Envoi des documents joints ou copies d’écrans liés au ticket dans les notifications.

Les documents associés au ticket peuvent être envoyés dans les notifications.
Pour cela il faut tout d’abord configurer le champ adéquat dans l’onglet « configuration/générale/assistance »

Lorsqu’une notification est envoyée concernant le ticket, deux comportements existent :
  • L’image est contenue dans le corps du mail (dans la description du ticket) :
    Elle doit donc être ajoutée au mail avec la fonction « AddEmbededImage » de la classe « phpmailer », qui permet d’enregistrer l’image à afficher.
    Une balise est ensuite insérée avec le tag de l’image, par exemple : <img src=‘cid:#sefds54sd’>
  • L’image n’est pas affichée dans le corps du mail, elle est donc envoyée en pièce jointe avec la fonction « AddAttachment » de la classe « phpmailer ». Les documents n’étant pas des images sont traités de la même façon.

7. Gestion du contenu des mail du collecteur. (afficher les images du corps du mail dans la description du ticket)

Les images des mails récupérés dans le collecteur peuvent aussi être affichées dans la description du ticket après l’import.
Le corps du mail est traité pour permettre l’affichage des images dans la description du ticket. Pour se faire, toutes les balises HTML <img> sont remplacées par un tag.
Ce « tag » permet de reconnaitre l’image qui a été enregistrée comme document lié au ticket.
Après l’ajout des images comme document liés au ticket, chaque « tag » est converti en balise HTML compatible avec GLPI, permettant d’afficher l’image dans la description du ticket.

8. Retaillage de l'image

Une fonction supplémentaire de retaillage de l’image collée a été mise en place :
  • Avec Jcrop uniquement supporté par le plugin Chrome/Firefox
    Une fois l’image collée il est possible de sélectionner la zone qui devra être enregistrée.
    En cliquant sur « sauvegarder » les nouvelles coordonnées de l’image sont insérées dans le formulaire du ticket, pour être ensuite traitées dans la fonction « resize » de la classe « Toolbox ».
  • Retaillage de l’image à 500 pixels en hauteur et largeur maximum
    Une autre fonctionnalité consiste à imposer une taille maximum d’image à 500x500 pixels. Ceci permet d'éviter de polluer l'affichage de GLPI avec des images trop grandes.

9. Configuration pour passer du Rich text au mode text

Une configuration supplémentaire permettrait de choisir le mode d'édition des zones de texte. Elle permettrait d'accepter ou non les balises html dans la saisie de texte,
et par conséquent d'utiliser ou non l'éditeur TinyMce.

Cette configuration implique un problème majeur lors du passage "Rich text" au "text".
Cela aurait pour conséquence de supprimer les balises HTML, c'est à dire le formatage du contenu et les images.

Pour éviter de perdre les images qui ont été ajoutées au texte, il serait possible d'utiliser un fonction de conversion des images avec leurs tags associés.
Par exemple une image sur GLPI définie par :
<object id='#sefds54sd' data='glpi/front/document.send.php?docid=1&tickets_id=1' type='image/png'>
<param name='src' value='glpi/front/document.send.php?docid=1&tickets_id=1'>
</object>

Deviendrait : '#sefds54sd' dans la zone de texte

Récapitulatif

Passage du Rich text/text :
  • Fonction de conversion des images HTML en tag
  • Fonction Html::Clean sur les "textareas", pour supprimer les balises HTML
  • Pas d'affichage avec TinyMce
  • Prévenir l'utilisateur qu'il va perdre toute la mise en forme des messages
Passage du text/Rich text :
  • Fonction de conversion des tags en images
  • Fonction nl2br
  • Affichage avec TinyMce

10. Post first commit

  • Les tags à allonger et à encadrer par des # : #lfdslkjdsfdskjmdskjflkjsjds# par exemple
    • MoYo : peut-être pas à allonger en fait car là on a déjà 36^9 possibilités (si on utilise pas les majuscules, encore plus sinon)
    • Tsmr : stock tag without delimiter
    • MoYo : mais autre question comment on assure l'unicité du tag ? comment le tag est généré ?
    • Tsmr : use Rule::getUuid function
    • MoYo : quand on supprime le document du ticket, on a toujours l'affichage. Il doit falloir nettoyer la desc dans ce cas pour supprimer l'image
    • Tsmr : Effectivement a la suppression du lien du document à la description, on doit parser la description pour supprimer le lien.
  • A voir aussi après la généralisation de l'association pour les autres objets utilisant tinymce (reminder, KB , solution...)
  • Le drag & drop depuis le file manager est possible directement dans la description = ca c'est à interdire
  • Par contre le drag & drop dans les fichiers liés au ticket (sans l'utilisation de la modale) devrait générer un tag (nouveau système d'upload du coeur)
    • MoYo : un tag devrait être généré pour tous les anciens docs également.
    • MoYo : l'affichage du tag dans les listes de docs et le form des docs devrait être conditionné à use_rich_text tout comme le SearchOption. Par contre le tag doit tout le temps être généré dans le cas d'une bascule.
    • Jmday : Une requête tag = id à la mise à jour.
  • Il faut que le drag & drop soit fonctionnel à la fois dans la modale et directement dans le ticket (hors description pour éviter les data-uri)
  • Bug à essayer de corriger : le textarea n'est plus dimensionnable une fois tinymce chargé (apparemment but tinymce): http://www.tinymce.com/forum/viewtopic.php?id=5090
  • Relocalisation d'install : URL fausse. Si on change l'URL d'accès à GLPI /glpi vers /nouveauglpi, toutes les URL vont être fausses.
  • Problème copie écran à création ticket. Sans joindre d'image pas de soucis. Avec image ca bloque au niveau CSR, dans les données postées il n'y a pas le token CSRF donc ca pete. Idem en édition. Idem en désactivant le controle CSRF. A priori problème de taille des données postées : si je poste une valeur à la place du contenu de l'image con ca marche. Même en croppant l'image ca merde

XACA : Avoir si même souci sur le plugin redmine qui utilise le code javascript : https://github.com/peclik/clipboard_image_paste

11. Envoi des documents du ticket en PJ

  • Discussion à avoir sur l'envoi de tous les docs rattachés à un ticket :
  • Aller plus en avant dans la mise en œuvre :
    • Déporter l'option dans les notifications
    • Utilisation des tags et lien vers les documents dans l'email envoyé au lieu d'envoyer les PJ

12. Nouvelle proposition d'implémentation pour une gestion plus clean et une experience utilisateur simplifiée

Cf PJ

10. Post second commit

  • Tsmr : stock tag without delimiter : OK
  • Tsmr : use Rule::getUuid function : OK
  • Tsmr : Effectivement a la suppression du lien du document à la description, on doit parser la description pour supprimer le lien. : OK
  • MoYo : un tag devrait être généré pour tous les anciens docs également. : OK
  • Jmday : Une requête tag = id à la mise à jour. : OK

Proposition.png (51.7 KB) jmd, 07/25/2013 08:25 PM