Le blogue d'

Vous le savez sans doute, TYPO3 à un éditeur de texte (RTE/Wysiwyg) par défaut qui s’appelle « htmlarea », une solution assez bien connue dans le monde des éditeurs opensource, mais qui commence à se faire vieille et qui n’est plus supporté par aucune communauté me semble t’il. Sans doute connaissez-vous mieux FCK Editor (utilisé par Drupal) ou bien TinyMCE (utilisé par WordPress, TWiki …)

Voici une capture de l’éditeur actuel :

Pour ma part, je trouve l’intégration de cet éditeur dans TYPO3, assez bien faite ! Je n’ai pas à me plaindre. Puis depuis qu’il est intégré au noyau de TYPO3, on à de nouvelles options à chaque nouvelle version majeure de TYPO3, alors on a pas se plaindre. Il est même annoncé pour la version 4.3 que l’intégration avec Internet Explorer sera meilleure, de quoi satisfaire tous nos clients chanceux qui utilisent encore Internet Explorer 6

Sauf que d’autres développeurs travaillent à l’intégration d’un autre éditeur, TinyMCE (ou TinyRTE) et comme une mise à jour récente a été réalisé dans une de ces extensions, je me suis décidé à en tester plusieurs, pour voir ce que ces extensions pouvaient apporter de mieux par rapport au RTE par défaut.

Quoi qu’il en soit, après avoir lu ce qui suit, je pense que vous allez être un peu comme moi, car j’ai vraiment été bluffé par le niveau d’intégration existant avec ces extensions peu connues de ma part.

Y’a quoi dans le TER de TYPO3 ?

J’ai trouvé plusieurs extensions, qui portaient le nom de Tiny dans leur clé d’extension, j’ai pris celle qui était les plus récentes, et donc qui pourraient évoluer encore.

Ce qui nous donne concrètement 2 extensions :

• tinyrte (mise à jour le 28 novembre 2008)
• tinymce_rte (mise à jour le 4 février 2009)

D’autres extensions existent, mais leur mise à jour date de 2007. Les différents tests ont été réalisés avec une version 4.2.5 de TYPO3, dans un environnement Linux et sous Firefox 3.0.5

TinyRTE

Nous allons donc commencer par « tinyrte » et voir ce qu’elle a dans le ventre. Vous aurez besoin de désinstalelr au préalable le RTE par défaut et c’est tout de suite opérationnel. D’ailleurs, je vous laisse consulter les notes des utilisateurs ici, tout le monde semble satisfait de cette intégration avec TYPO3 !

C’est une extension qui a commencé d’être développée en 2006 (3 ans maintenant !). Vous pouvez un tas d’information sur le site officiel du développeur : http://tinyrte.outraxx.de/ (générateur de bouton, forum, documentation, nouvelles …)

Configuration de l’extension

Lors de l’installation, nous avons plusieurs champs à remplir pour la configuration.

Voici un aperçu des options :

On peut par exemple donner le chemin pour charger une feuille de style personnalisée, définir la largeur et la hauteur de l’éditeur par défaut ou bien encore autoriser ou non le redimensionnement. Je trouve ça vraiment excellent de pouvoir redimensionner l’éditeur facilement lorsqu’on est en pleine rédaction. Donc +1 pour cette fonctionnalité.

Ce que j’ai apprécié aussi avec cette extension, c’est la possibilité de pouvoir gérer l’affichage de certains boutons à des groupes d’utilisateurs. En effet, si vous éditez un groupe d’utilisateur « backend » vous pourrez découvrir un menu et sélectionner les différents boutons de l’éditeur que vous souhaitez autoriser. Dans ce cas là, il ne faudra pas hésiter à configurer les boutons de base en TS CONFIG comme vous le feriez avec l’éditeur RTE.

Voici un aperçu du menu :

Configuration TS CONFIG

Nous avons également de la configuration à mettre dans la zone TS CONFIG de votre site. Si je me réfère au manuel, nous retrouvons des choses identiques à l’éditeur de base de TYPO3, ce qui n’est pas trop dépaysant.

Je n’ai pas testé, juste lut la documentation, ce qui nous donne :

• Afficher ou cacher certains boutons
• Spécifier le chemin de la feuille de style du rte
• Fournir le nom des classes pour les styles de paragraphe (sinon tout sera chargé par défaut)
• Définir la position des boutons pour les 4 lignes disponibles
• Créer des gabarits (je ne sais pas vraiment à quoi ça peut servir, peut être intégré des paragraphes ou tableaux facilement dans l’éditeur
• Vous pouvez injecter des paramètres pour l’éditeur, tels la position de la barre d’état, le choix du correcteur orthographique, etc.. Un lien vers la documention officielle de l’éditeur vous indique quoi faire : http://wiki.moxiecode.com/index.php/TinyMCE:Configuration
• Vous pouvez définir des balises qui seront supprimées lors de l’enregistrement
• Autoriser la création d’un nouveau paragraphe lorsqu’on utilise la touche ENTRER du clavier
• etc..

Dans l’ensemble, nous avons l’essentiel et ça semble bien plus simple qu’avec l’éditeur par défaut de TYPO3. Il faudrait regarder de plus près, voir s’il ne manque pas des options vraiment essentielles, mais ça ne semble pas être le cas.

Intégration avec TYPO3

Voici une section, qui être très importante, car si l’intégration avec TYPO3 n’est pas réussite alors l’utilisation de cet éditeur ne vaut pas la peine. Quand je parle d’intégration, je veux parler ici de la possibilité d’ajouter des images ou d’effectuer un lien vers un contenu de TYPO3.

Avant de commencer, je trouve que le texte qui s’affiche dans l’éditeur est un peu petit, mais j’imagine que cela pourrait être corrigé avec la feuille de style de l’éditeur que vous allez injecter.

Voici une capture d’écran de l’éditeur :

Du côté de l’insertion d’image, nous avons beaucoup plus d’options que l’éditeur de TYPO3.

Aperçu du premier onglet :

Nous avons classiquement l’ajout d’un texte alternatif et d’un titre, mais aussi un aperçu et si on le souhaite on peut remplacer l’image par une autre en naviguant dans le répertoire fileadmin de TYPO3. On peut en profiter pour déposer une nouvelle image sur le serveur au besoin.

Aperçu du deuxième onglet :

Ensuite, on a un onglet apparence, qui permet de définir la position de l’image ou de lui attribuer une class en css. Mais la chose la plus intéressante, est de pouvoir changer la largeur ou la hauteur de l’image tout en gardant les porportions ! C’est tout bonnement phénoménal, car l’image d’origine bien entendu n’est pas altérée, mais vous pouvez ainsi insérer une image d’une taille très grande juste en modifiant sa largeur en pixels, sans vous soucier de la hauteur. Magnifique ! J’en bave encore même si dans WordPress c’est encore mieux fait, mais bon..

Aperçu du troisième onglet :

Enfin le dernier onglet, offre des options qui sont utiles pour l’accessibilité je dirais,  par exemple pour fournir une description longue (on regrette ici qu’il ne soit pas possible d’insérer un lien plus facilement)

Donc comme vous le voyez, l’ajout d’une image n’a pas a rougir, bien au contraire ! Il ne manquerait que l’option « cliquez pour agrandir » que l’éditeur par défaut de TYPO3 offre, mais que je n’ai jamais pu faire fonctionner

Maintenant, venons-en à l’ajout d’un lien, c’est une fonctionnalité avec laquelle je n’ai eu aucun souci lors de mes tests. On peut faire un lien vers une page, un contenu de page, un fichier, une url externe, une adresse de courriel et même vers une nouvelle (tt_news). La configuration pour cette dernière option ne m’a pas permis de sélectionner la page de détail malheureusement, mais cela doit se faire j’imagine.

Aperçu pour l’insertion d’un lien :

Le seul manque que j’ai trouvé, c’est de ne pouvoir ajouter l’attribut TITLE sur un lien, donc côté accessibilité ce n’est pas bon (j’ai quand même déposé une demande sur leur forum.. croisons les doigts)

Quant aux autres options de l’éditeur, elles sont toutes autant intéressantes, je pense ici au tableau qui offre bien plus d’options que celui de TYPO3 (organisé sous forme d’onglet) et plusieurs sont là pour l’accessibilité (id, summary, etc ..)

Il y a également une option de prévisualisation quipeut être utile lors de l’utilisation des gabarits j’imagine ? L’option d’insertion des caractères spéciaux est elle aussi vraiment conviviale.

Et les problèmes ?

Eh oui, tout n’est si rose que cela. D’abord, je n’ai pas fait de test avec DAM. Sur le forum, il semblerait que des choses vont s’en venir de ce côté là. Certains boutons dans l’éditeur ne semblent pas actifs, tels celui pour nettoyer le code ou le correcteur orthographique (pour sur le site de l’auteur il est indiqué que si Aspell n’est pas disponible sur le serveur, les services de Google sont utilisé). De plus, il faut mettre son interface en anglais, car il ne semble pas y avoir de traduction en français (oups ! Je viens de trouver une extension qui met permet d’utiliser l’interface en français : lang_tinyrte)

Mais ceci n’est pas le pire, ce que je trouve le plus gênant c’est la fenêtre qui apparaît lorsqu’on veut insérer un nouveau lien ou une image. Ça n’est pas une vraie fenêtre dans le sens « pop up », mais une sorte de DIV flottant qui ne sort pas du cadre de droite de TYPO3. Sur son site l’auteur indique que c’est un avantage contre les bloqueurs de « pop-up ». Du coup si vous avez une résolution assez petite (1024×768 pixels), vous ne pourrez pas utiliser cet éditeur, car il sera difficile d’utiliser cette fenêtre. Je suis en 1400 et je n’avais pas remarqué ce problème-là, donc ça n’est pas un vrai problème en soi me direz-vous. Il vous suffira au pire de réduire le cadre du milieu en cliquant sur la barre du centre (TYPO3 4.2 seulement)

Conclusion

Ma conclusion c’est que c’est un très bon éditeur, il reste à le tester un peu plus profondément avec la configuration Typoscript au complet pour voir si tout est fonctionnel (feuille de style css, cacher ou placer les boutons, nettoyage du code et des balises de type font-size, nettoyage du code provenant de Word, etc …). Enfin, j’ai un doute sur le faite d’utiliser cet éditeur sur un site qui a déjà utilisé l’éditeur par défaut de TYPO3. Car la façon dont les informations sont stockées dans la base de données me semble différente de l’éditeur de base. Je n’ai pas eu l’occasion de tester ce cas de figure, car mon site de test était presque vide !

Je testerais l’autre éditeur prochainement, afin de ne pas retarder la publication de ce billet, j’ai préféré le découper en deux parties.