Redactor, un éditeur Wysiwyg riche et léger en jQuery

Redactor est un plugin jQuery qui permet de mettre en place un éditeur Wysiwyg riche en fonctionnalités, arborant une interface simple et intuitive. Le script est entièrement configurable et donne ainsi la possibilité de faire des mises en page complètes : texte, image, couleur, alignement, etc… et bien d’autres fonctionnalités.

« What you see is what you get »

Redactor est multilingue et s’accompagne de plus d’une vingtaine de paramètres pour personnaliser au mieux votre éditeur de texte. On retrouve toutes les fonctionnalités de base d’un Wysiwyg grâce à la barre d’outils qui se décline en deux versions (standard et minimaliste) sur lesquelles vous pouvez ajouter autant de boutons que vous le souhaitez. Vous pouvez également créer vos propres toolbars.

Le script est particulièrement léger pour un Wysiwyg ; seulement 40Kb, soit une exécution 5 fois plus rapide que TinyMCE et 9 fois plus rapide que CKEditor. Moins complet que ses deux prédécesseurs, le Wysiwyg présente tout de même plusieurs fonctionnalités avancées : personnalisation de la barre d’outils, drag & drop de fichiers via HTML5, raccourcis clavier, édition en plein écran, etc.

Autre fonctionnalité pratique, il est possible de mettre en place un système d’upload d’images et de fichiers en ajoutant votre propre couche côté serveur via les paramètres imageUpload et fileUpload. L’éditeur dispose également d’une fonction de sauvegarde automatique qui peut être configurée pour enregistrer les données à un intervalle de temps défini par l’utilisateur. Enfin, Redactor est parfaitement compatible avec jQuery UI Dialog ou Fancybox.

Mise en place de Redactor

Commencez par inclure le framework jQuery et le script Redactor, ainsi que sa feuille de style.

<script src="/js/jquery-1.7.min.js"></script>
<script src="/js/redactor/redactor.js"></script>
<link rel="stylesheet" href="/js/redactor/css/redactor.css" />

Puis placez votre balise textarea avec un id CSS dans votre page web ; c’est grâce à cet id que l’élément HTML sera automatiquement remplacé par le wysiwyg lors de l’appel de Redactor. N’oubliez pas de définir une hauteur à votre balise si vous voulez que le wysiwyg en fasse autant.

<textarea id="redactor_content" name="content" style="height: 560px;"></textarea>

Par défaut, la largeur du wysiwyg sera toujours de 100%. Par conséquent, vous pouvez définir une largeur spécifique en mettant votre textarea dans un conteneur.

<div style="width: 700px;">
   <textarea id="redactor_content" name="content" style="height: 560px;"></textarea>
</div>

Et on termine par l’appel de la fonction redactor() sur notre élément.

$(document).ready(function(){
   $('#redactor_content').redactor();
});

C’est terminé, votre wysiwyg est fonctionnel. Vous pouvez ensuite le personnaliser avec les nombreux paramètres. Par exemple, après avoir conçu votre propre barre d’outils nommée custom (fichier JS à créer dans le dossier toolbars), il vous suffit de l’appeler avec le paramètre toolbar :

$(document).ready(function(){
   $('#redactor_content').redactor({ toolbar: 'custom' });
});

Bref, Redactor est un plugin jQuery qui vous permet de proposer à vos internautes une interface riche et intuitive pour éditer en ligne leurs documents.

[EDIT] : Redactor est désormais sous licence payante.

Requis : jQuery
Compatibilité : Chrome, Firefox, Safari, Opera, IE 7+, Android, iPhone/iPad
Démonstration : http://redactorjs.com/
Licence : CC BY-NC 3.0 (gratuit pour usage non commercial)

Commentaires

  • 40Ko ? Plutôt pas mal en effet. Je vais le regarder de plus près et surtout sur sa capacité à être étendu

  • zatmania

    Merci pour ce billet ! Je ne connaissais pas Redactor mais s’il est plus rapide que Tiny et Fck alors j’achète :D

  • Effectivement très rapide ^^
    Thx pour l’info.

  • Bonjour,

    J’ai des soucis avec internet explorer et l’upload d’image. Il semble que la fonction innerhtml pose probleme. Aucun soucis sous firefox mais besoin d’utiliser ausis sous ie8 .

    As tu eu ce soucis?

  • elfaus

    un éditeur soft qui fait tout ce qu’on lui demande et qui pomb un code propre oO
    we need you !

  • Merci beaucoup ! On vient de l’intégrer sur LearningShelter (www.learningshelter.com) et ça marche à merveille

  • AdelanteWeb

    Cet éditeur, à première vue, est séduisant: belle interface, rapide, il n’y a pas 130 champs que les clients ne vont pas comprendre, et on est prêts à acheter la licence de 99$.

    Malheureusement, après quelques tests il s’avère que cet éditeur est quasiment dépendant de la fonction execCommand, ce qui veut dire qu’il ajoute une balise span ou b ou i pour chaque style ajouté. On se retrouve très vite avec du code imbuvable et l’éditeur bug aussitôt. J’en ai fait l’amer expérience après avoir formé mon client… Impossible d’aligner à droite un texte après l’avoir mis en gros, impossible de descendre une image ou la positionner dessous un texte une fois qu’elle a été insérer au dessus de ce texte. Pas de possibilité de gérer la taille du texte, pas de possibilité de changer la police du texte.

    Et toujours ces bugs qui font raller (les balises P qui s’insère après le texte, pas moyen pour quelqu’un qui ne connait pas le html de récupérer l’erreur sans tout effacer…

    Dommage parce que l’interface est vraiment sympa.

    • Merci pour ce retour.