Imperavi Redactor, un WYSIWYG ultra léger

Imperavi Redactor, un WYSIWYG ultra léger

Si comme moi vous avez l'habitude de développer des outils d'administration pour les sites de vos clients, ce billet devrait vous intéresser. Il concerne l'implémentation des outils WYSIWYG comme peuvent l'être CKEditor ou Tiny MCE.

Place aux scripts légers

Une admin qui n'est pas visible par les internautes ne doit pas pour autant être une 2CV. L'expérience utilisateur est aussi importante dans le back-office que sur le front-office. Encore plus quand certains clients n'ont pas la fibre web dans le sang. Vous connaissez mon goût pour l'affichage rapide des mes sites. J'applique la même méthodologie de travail pour les admins de mes clients. Cela doit être simple à utiliser et rapide à charger.

Du coup, j'ai longtemps cherché un enrichisseur de textes performant et léger pour remplacer CKEditor qui, bien qu'amélioré dans sa dernière version, est vieillissant d'un point de vue du code source. Quand je vois le nombre de fichiers nécessaires à son fonctionnement comparé à Imperavi Redactor, il y a de quoi devenir chauve. :)

Si vous n'avez pas peur de dépenser quelques euros pour vous offrir la licence payante à 99 € en version développeur avec les mises à jour à vie et l'installation illimitée sur les sites que vous développez, il faut foncer !

Et je vous le dis amis lecteurs, ce script est une tuerie pour les développeurs. Non seulement à installer puisqu'il possède seulement 3 fichiers (2 javascript et 1 css) mais également à paramétrer. Il suffit juste d'appeler l'instance sur la page où il est destiné et de régler les paramètres selon vos besoins ou utiliser ceux proposés par défaut. Ainsi vous pouvez régler la hauteur de l'éditeur, customiser la barre d'outils, interdire l'utilisation de balise (script, html, body, head, etc.) par exemple.

Barre d'outils d'Imperavi Redactor

Avantages et inconvénients de Redactor

La liste est longue des avantages par rapport aux éditeurs que vous avez l'habitude d'utiliser que les inconvénients sont finalement insignifiants. Aucun script n'est idéal mais celui-ci frôle toutefois la perfection en terme d'utilisation.

En plus de sa légèreté, Redactor se distingue par sa facilité pour l'utilisateur à uploader des images et des fichiers sur le serveur. Un simple glisser-déposer suffit pour l'envoyer en ligne. Si vous êtes comme moi perfectionniste, vous pouvez développer un script en PHP pour choisir les dossiers, renommer les fichiers à la volée en ajoutant un horodatage au nom afin d'éviter les doublons.

Depuis la version 9, l'édition est facilitée afin de modifier la balise Alt et le calage à gauche ou à droite de l'image. Tout comme le redimensionnement des images à l'aide d'un curseur qu'il suffit de déplacer pour l'afficher à votre convenance. J'ai apporté mon petit lot d'améliorations pour qu'il soit un peu plus conforme à mes attentes comme le centrage ou l'ajout d'une balise Titre en plus du Alt.

De plus, il est désormais possible de sélectionner la zone d'une image dans Photoshop et de la copier directement dans l'éditeur sans passer par la fenêtre d'upload. Vu les modifications que j'ai apporté quant à la gestion des dossiers, je ne l'utiliserais sans doute pas. Mais sachez que cette possibilité existe. Et ça c'est fort je trouve !

Fenêtre d'upload d'Imperavi Redactor

La gestion des vidéos est quant à elle admirable. Soit vous copiez le code d'intégration (iframe) de la vidéo Youtube, Viméo ou Dailymotion dans la fenêtre approprié, soit vous copiez le lien de la page et Redactor s'occupe de la convertir automatiquement dès que vous pressez la touche Entrée de votre clavier. Niveau facilité d'utilisation, il est difficile de faire beaucoup mieux.

Étant donné que je vends beaucoup de prestations de rédaction, j'utilise énormément Word. J'ai enfin trouvé l'outil qui me permet de copier-coller le texte directement dans l'éditeur sans avoir besoin de nettoyer le code pourri généré par le logiciel de Microsoft ni de passer par un logiciel tiers comme passerelle.

Les dernières technologies au service de la simplicité

Redactor supporte le HTML5, Amazon S3 et peut intégrer différents plugins que vous pouvez développer par vous-même si vous touchez votre bille en javascript ou télécharger ceux proposés par la communauté. Pour un annuaire par exemple, le plugin pour compter les mots est très utile.

Du côté des inconvénients, la principale faiblesse que je lui trouve est l'ajout par moment de balises qui n'ont rien à faire comme le br par exemple. Il semblerait que dans la version 9 (j'utilise encore la version 8) que ce ne soit plus le cas. Si c'est confirmé, je lui trouverais encore moins de défauts. :-)

Si on est tatillon, on peut aussi regretter l'absence d'une bibliothèque multimédia pour gérer les images et les fichiers sur le serveur afin de les supprimer. Certains d'entre vous me connaissent, j'ai compensé cette absence par un code maison. Finalement, il répond à mes attentes et tient en seulement quelques lignes de PHP.

Vu la vitesse des développeurs à améliorer l'outil j'ai hâte de voir les prochaines versions. Il devrait y avoir de belles nouveautés. Je finis ce billet en vous donnant le lien pour aller jeter un coup d’œil et je vous propose une courte vidéo à propos de la gestion des images et des vidéos.

Pour visiter le site officiel : http://imperavi.com/redactor/

Catégorie Ressources - Écrit par le 07/12/2013 - Article lu 1 381 fois - 11 commentaires

11 réflexions sur ce billet

Écrit par Arnaud du site http://www.apimo.net/
Le 07/12/2013 à 09h17

Salut,

Nous avons aussi depuis plusieurs mois basculé sur Redactor, d'abord pour le côté léger / design / html5 très mignonet.

Puis on a un peu bloqué sur le fait qu'il ajoute des balises à foison, et surtout qu'il ne nettoie / tidy pas les codes copiés / collés. C'est quelque chose que TinyMCE fait très bien le Paste from Word par exemple, et qui manque un peu à Redactor pour être vraiment parfait.

Sinon je n'avais pas vu pour la version 9 il faut regarder ça en effet cette version résout peut être les dernières difficultés.

Merci pour le topo

D'un point de vue utilisateur, c'est très clairement le meilleur éditeur que j'ai pu utiliser. Pas de choses "gadget" qui ne servent à rien, un accès au code source ultra simple si besoin, la gestion des images et vidéos, un vrai bonheur.

Bref s'il n'y avait que moi, ça serait installé sur tous les CMS que j'utilise ;-)

Écrit par Hervé
Le 07/12/2013 à 13h51

@Arnaud : étrange ce que tu dis à propos des copier-coller de Word parce que c'est quelque chose qu'il fait très bien justement. Tu as du utiliser une ancienne version. :)

Écrit par Rodrigue du site http://www.cree1site.com/
Le 09/12/2013 à 14h11

Salut Hervé, merci pour la présentation.

Je ne suis pas client de ce type d'éditeur puisque je ne développe pas (oui je suis 100% WP je voulais pas en parler). Mais je te rejoins sur un point, l'expérience utilisateur se mesure AUSSI en back office, et je constate que sur ce point, Imperavi Redactor à l'air de bien se défendre, avec le côté light (mais fonctionnel) de la chose.

En revanche ce serait cool de mettre à disposition ton bout de code, pour les médias ;) car tu risques de donner l'envie à certains.

Écrit par Hervé
Le 09/12/2013 à 14h14

Salut Rodrigue

Bien tenté pour le script des médias. Sauf que cela fait partie de la R&D que je mets uniquement à disposition des clients qui utilisent mon CMS. :-)

Écrit par Laurent du site http://www.coeurduweb.com/
Le 09/12/2013 à 14h19

Bonjour,

Oui, Imperavi Redactor (précédemment appelé "redactor.js") est un excellent éditeur que je connais depuis la version 7.

Pour compléter, suivant le cas :

- si vous utilisez un framework PHP tel que YII et LARAVEL (d'autres ?), sachez que Redactor est licencié en version OEM
- vous pouvez utiliser la version Open Source en dernière version 8.1.2 disponible partout

Écrit par Hervé
Le 09/12/2013 à 14h24

Salut Laurent

Oui il existe une version Open Source qui ne dispose pas des dernières fonctionnalités.

Personnellement, je préfère payer la licence non seulement pour remercier les créateurs de leur travail mais aussi pour avoir accès au support et participer aux améliorations. Encore une fois, 99 euros pour l'installer sur autant de sites que l'on veut, il n'y a rien de scandaleux.

Le tout gratuit a des limites dont il faut savoir parfois se passer.;)

Écrit par Yoann du site http://www.ifyouweb.fr/
Le 09/12/2013 à 16h41

@arnaud : Lu sur le site de Redactor : "The tool cleans up text automatically on paste. Simply copy text from MS Word, paste it into Redactor and you’re done, crystal clean text ready for you to use."

Donc normalement c'est OK.

Écrit par Hervé
Le 09/12/2013 à 16h55

@Yoann : pour l'utiliser au quotidien, je confirme que le copier-coller de Word fonctionne nickel, tout le code est nickel quand tu regardes la source.

Juste un petit soucis dans la coupure des paragraphes dans la dernière version. J'ai écrit au support et j'attends leur réponse.

Écrit par Norel
Le 20/03/2014 à 00h50

Salut,

Mon client m'a "imposé" d'utiliser redactor pour mon application symfony, et je n'arrive vraiment pas du tout à gérer l'upload d'image, est-ce que tu pourrais me donner des pistes de développement pour la configuration ? Je suis un peu perdu et personne sur symfony ne semble utiliser redactor sur une appli symfony.

Écrit par Hervé
Le 20/03/2014 à 20h22

@Norel : Tout est expliqué clairement dans la doc => http://imperavi.com/redactor/docs/upload/

Les commentaires de ce billet sont fermés

Haut de page