- 
Créer un petit éditeur de texte pour forums - Etape 1
- Catégories:
- Ruby On Rails
Vous aimeriez créer un petit éditeur de texte "sécurisé" pour vos forums, commentaires ou tout autre champ texte, mais vous ne savez pas comment faire ? Ce billet et les deux suivants vont vous apprendre comment. (Je découpe volontairement en plusieurs billets pour que le tout ne soit pas trop indigeste). Nous allons utiliser pour cela un plugin JQuery: MarkItUp.
Attention ! Ce premier billet ne vise qu'à mettre en place l'éditeur JavaScript MarkItUp sur vos champs "textarea", ce n'est que dans le deuxième billet que vous verrez comment traduire les balises BBCode en code HTML pour qu'elles s'affichent correctement dans vos pages Web.
Qu'est-ce que le BBCode ou Markdown ?
Vous savez tous qu'il n'est pas très "sécurisé" d'offrir un champ de texte où l'utilisateur peut rentrer directement ses balises html pour afficher une image ou insérer un lien. C'est d'ailleurs pour cette raison que Rails, à partir de sa version 3, "échappe" automatiquement tous les caractères propres à html (comme < >) fourni dans un champ de formulaire avant de les enregistrer dans la base de données.
Mais alors, comment faire alors pour proposer un petit éditeur où les utilisateurs peuvent faire des mises en forme simples pour leur texte ? (Mettre en gras, souligner, etc.)
C'est justement pour répondre à cette problématique de sécurité que le BBCode ou Markdown ont été créé. Au lieu de mettre en gras avec des balises html < strong > < /strong >, on va utiliser :
- [ b ] Mon mot en gras [ /b ] avec le BBCode,
- et des ** Mon mot en gras ** avec Markdown.
A vous de voir quelle écriture vous préférez, mais personnellement, je conseille plutôt Markdown (pour avoir essayé le BBCode), car il est plus intuitif et plus rapide à écrire pour des non-développeurs (pratique pour le client !), mais aussi plus lisible (avec [ ] partout, on s'y perd vite...).
En clair, le BBCode et Markdown sont des substituts au code HTML. Chacun a ses balises qui lui sont propres et bien différentes de l'HTML. Vous pouvez donc (en principe) enregistrer le code BBCode/Markdown fourni par un utilisateur dans un formulaire en toute tranquillité dans votre base de donnée. Lorsque vous récupérerez ce code pour l'afficher, il ne vous "restera" plus qu'à remplacer toutes les balises BBCode/Mardown par leurs équivalent en HTML. Vous aurez ainsi un affichage tout beau tout propre avec mise en forme du texte.
Ce petit rappel est très important, car il pose les bases du mécanisme utilisé au sein de la quasi majorité des forums existant de nos jours. Un petit exemple pour voir pourquoi ça marche et pourquoi cette méthode est plutôt "sûre".
Admettons que l'utilisateur a rempli un formulaire avec le BBCode suivant:
Vous enregistrez donc ça dans la base de données, Rails 3 va enregistrer les balises entre [ ] telles qu'elles le sont. En revanche, comme il "échappe" les caractères HTML par défaut, il enregistrera les caractères "<" et ">" sous leur code HTML équivalent à savoir : "&l t;" et &g t;" (sans espaces normalement).
Lorsque vous afficherez ensuite ce texte, un mécanisme (basé sur du Regexp) remplacera les balises par < strong > < / strong >, mais pas les balises de départ qui ont été échappées. Vous obtiendrez donc:
Sachez que même si le BBCode semble sans faille, il n'en est rien. Il faut bien faire attention au niveau du mécanisme qui remplace les balises BBCode par leurs équivalents. Si c'est mal fait, il est tout à fait possible d'insérer un code malveillant dans certaines balises.
Maintenant que tout ça c'est bien frais dans votre tête, nous pouvons passer à la pratique.
Mise en place de MarkitUp
Pour l'éditeur BBCode/Mardown, il n'y a pas de secret, il vous faut insérer des balises BBCode/Markdown dans le champ que l'utilisateur est en train de remplir lorsqu'il clique sur un bouton. Tout ça se faisant sans rechargement de page (encore heureux), vous en déduisez donc qu'il s'agit d'utiliser JavaScript. Comme en général en tant que développeurs nous n'aimons pas réinventer la roue, nous allons utiliser un des plugins JQuery les plus complets et sérieux (à mon avis) : MarkItUp.
Ce plugin JQuery est vraiment simple à mettre en place et possède une bonne documentation et plein d'éditeurs produisant des balises différentes: Html, Textile, Wiki Syntax, Markdown, BBcode... et on peut même créer son propre éditeur (donc générer ses propres balises). Ce qui est top, puisqu'une fois que vous aurez fini de suivre ce tutoriel, vous pourrez très certainement créer votre propre jeu de balises personnalisées. (En ce qui me concerne, je me suis amusé à ajouter plein de smileys dans l'éditeur du Blog de mon entreprise). Même s'il a été créé à la base pour PHP, sachez que j'ai pu parfaitement et complètement le mettre en place sous Rails, y compris avec la preview.
Ce qui nous intéresse, c'est un éditeur BBCode ou Markdown. Ne prenez pas les deux : c'est à vous de faire votre choix.
Téléchargements
Cliquez donc sur le gros bouton "markItUp pack!" en haut à droite du site, pour télécharger le pack markItUp de base. Celui-ci vient avec le set "HTML", permettant donc - dans le fichier démo.html du pack - d'insérer des balises HTML dans son champ texte. C'est déjà pas mal, mais ce n'est pas ce que nous voulons.
Allez dans l'onglet "Downloads" (à gauche), puis téléchargez le set BBCode de base ou le set Basic Markdown set en fonction de votre choix.
Maintenant que faire avec tout ça ? En Rails, ce n'est pas compliqué du tout, il suffit juste mettre les différents fichiers aux bons endroits. On va dire que vous êtes en Rails 3.1+, donc que vous avez les dossiers "assets" et compagnie. Procédons méthodiquement :
1- Créez un dossier "markitup" dans les sous-dossiers "images", "javascripts" et "stylesheets" du dossier "assets" de vendor.
2- De l'archive Markitup, copiez les fichiers :
- jquery.markitup.js dans le dossier javascripts
- style.css dans le dossier stylessheets (je vous conseille de le mettre en css.scss et de le renommer "markitup_style")
- toutes images dans le dossier images
3- De l'archive BBCode ou Markdown, copiez les fichiers :
- set.js dans le dossier javascripts
- style.css dans le dossier stylessheets (je vous conseille de le mettre en css.scss et de le renommer "bbcode_style" ou "markdown_style")
- toutes images dans le dossier images
Maintenant que nous avons tout bien où il faut, nous allons mettre en place l'éditeur.
Mise en place de l'éditeur
La documentation de MarkItUp nous indique:
1- qu'il faut inclure le JavaScript et le CSS dans le header de notre site,
2- puis, appliquer, en javascript, markItUp à un champ de type "textarea" accessible grâce à un id, une class ou directement à tous les textarea.
Pour la première étape, Rails 3 le fait automatiquement. Il se peut toutefois que vous ayez besoin d'importer les fichiers de base de markitup dans votre fichier javascript:
#= require "markitup/set.js"
#= require "markitup/jquery.markitup.js"
Je pars du principe que vous avez déjà un textarea, disons qu'il a pour id "comment_body", en coffeescript cela vous donne les lignes de code suivantes, à placer dans un fichier .js.coffee :
$ ->
$("#comment_body").markItUp(mySettings)
Poum ! Et voilà, ni plus, ni moins. Votre textarea devrait désormais avoir l'interface d'édition de markitup.
Pour ceux qui ne sont pas habitués à coffeeScript, le code Javascript équivalent est : $(document).ready(function() {$("#comment_body").markItUp(mySettings);});
Ah mais! Où sont passées les images des boutons ?! Relax, et c'est pour cette raison que je vous ai fait passer les fichiers css en .scss, il faut juste modifier les propriétés "background-image" de chaque bouton de markitup du set BBCode, pour lui faire chercher les images au bon endroit. Ouvrez donc le fichier "bbcode_style.css.scss" et remplacez toutes les url par "image-url("markitup/mon-image.png")", avec un bon éditeur de texte, vous devriez pouvoir faire ça rapidement. :)
Notez l'utilisation de "image-url" pour la propriété "background-image" à la place de "url". Si vous ne le saviez pas déjà, le .scss vous permet d'utiliser cette fonction qui va chercher vos images directement dans le dossier "assets/images". Cela fait partie du fonctionnement des Assets dans Ruby On Rails, j'espère avoir le temps de rédiger un article là-dessus. ;)
Rafraîchissez ensuite votre page où se trouve votre "textarea", et c'est bon ! Vous avez une belle barre d'édition de texte !
Si tel n'est pas le cas, vérifiez, à l'aide de Firebug (par exemple) que le CSS est bien parvenu à accéder à votre image "background". Vous avez peut-être remarqué la présence du smiley dans ma barre ? Oui, j'ai ajouté mes smileys, et oui, je vais vous apprendre comment lorsque nous en serons à la partie "personnalisation". ;)
Vérifiez aussi que tout fonctionne bien en cliquant sur tous les boutons. Si tel n'est pas le cas, vérifiez (toujours à l'aide de Firebug) dans l'onglet "console" qu'il n'y a pas d'erreurs javascript lorsque vous cliquez sur les boutons (sachez qu'il est normal que le bouton "preview" génère une erreur, elle sera résolue dans la prochaine partie).
La suite, dans le prochain billet.
Index
--
Article précédent: Commencer son projet en Rails
--
Article suivant: Créer un petit éditeur de texte pour forums - Etape 2
Aucun commentaire - Soyez le premier !