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