Installation de markItUp avec preview dans une application Rails3

Publié le 02/06/2011 à 00:00

Il est fréquent d'avoir besoin d'un éditeur dit WYSIWYG dans un site web. Il en existe de deux types. Les éditeurs pur WYSIWYG où vous éditez directement du HTML en mode rendu final et les éditeurs de syntaxe qui se basent par exemple sur le format Wiki, Textile ou Markdown.

markItUp est de la deuxième catégorie. Dans le cas d'un éditeur de syntaxe, il est toujours plus confortable de disposer d'une preview avant de valider ce qu'on a écrit.

Voici un petit tutoriel sur comment installer markItUp dans une appli Rails3 en utilisant Sinatra pour générer la preview.

Pour ce tutoriel, je choisirai la syntaxe markdown et mon moteur de transformation de markdown vers HTML sera RDiscount.

Prérequis

markItUp se base sur jQuery, vous aurez donc besoin d'une application Rails utilisant jquery-rails. Je ne détaillerai pas ici la procédure d'installation qui est relativement simple et très bien expliquée sur la page github de jquery-rails.

Installation de markItUp

Commencez par télécharger la dernière version de markItUp depuis le site officiel. Sauvez l'archive dans RAILS_ROOT/public/javascripts/. Décompressez la et déplacez le dossier RAILS_ROOT/public/javascripts/latest/markitup dans RAILS_ROOT/public/javascripts/markitup. Vous pouvez ensuite supprimer latest.

Pour récupérer les CSS et images contenues dans markitup, le plus simple est de créer un lien symbolique vers markitup dans public/images et public/stylesheets.

cd RAILS_ROOT/public/images
ln -s ../javascripts/markitup ./

cd RAILS_ROOT/public/stylesheets
ln -s ../javascripts/markitup ./

Vous aurez ensuite besoin d'un set pour gérer Markdown. Il en existe plusieurs. Mon choix se portera ici sur Markmin.

Téléchargez son archive et décompressez la dans markitup/sets/.

Une fois cela fait, il faut ajouter les balises qui vont bien dans le layout de l'application.

<head>
  <title>Ma super appli Rails 3</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <%= stylesheet_link_tag :all %>

  <%= stylesheet_link_tag 'markitup/skins/simple/style.css' %>
  <%= stylesheet_link_tag 'markitup/sets/markmin/style.css' %>

  <%= javascript_include_tag :defaults %>
  <%= javascript_include_tag 'markitup/jquery.markitup.js' %>
  <%= javascript_include_tag 'markitup/sets/markmin/set.js' %>

  <%= csrf_meta_tag %>
</head>

On récupère donc la CSS du style Simple de markItUp ainsi que celle spécifique à Markmin.
De la même manière, on récupère le script de markItUp et le set spécifique à Markdown.

Mise en place de markItUp sur une textarea

Pour activer markItUp sur une textarea, cela se fait de manière très simple.
Le set activé fournit de base une variable mySettings que vous pouvez utiliser telle quelle ou modifier à votre convenance.

Dans public/javascripts/application.js, ajoutez le code suivant :

$('textarea.markItUp').markItUp(mySettings);

Lorsque vous voulez activer markItUp, ajoutez la classe markItUp sur la textarea de votre choix :

<%= f.text_area :content, :class => 'markItUp' %>

Mise en place du système de preview avec Sinatra

Pour commencer, nous allons ajouter Sinatra et RDiscount dans notre Gemfile :

gem 'sinatra'
gem 'rdiscount'

Installons nos nouvelles gems grâce à l'ami Bundler :

bundle

Écrivons ensuite notre application Sinatra qui va nous demander un long travail. Vous êtes prêt ? C'est parti !

# RAILS_ROOT/lib/markitup_preview.rb
class MarkitupPreview < Sinatra::Base
  post '/markitup-preview' do
    RDiscount.new(params[:code]).to_html
  end
end

Hop, terminé ! C'est tout... Bon maintenant, il faut faire en sorte que notre application soit atteignable au travers de Rails.
Commençons par inclure le fichier markitup_preview.rb dans config/application.rb :

Bundler.require(:default, Rails.env) if defined?(Bundler)

require 'lib/markitup_preview'

module MyRailsApp
  class Application < Rails::Application

Il nous faut également ajouter la route Rails menant à notre application :

# RAILS_ROOT/config/routes.rb
post 'markitup-preview' => MarkitupPreview, :format => false

Contacter le système de preview depuis le JavaScript

Il nous faut retourner dans application.js et personnaliser notre mySettings.

mySettings['previewParserPath'] = '/markitup-preview';
mySettings['previewParserVar']  = 'code';

mySettings['markupSet'].push({
  name:       'Preview',
  className:  'preview',
  call:       'preview'
)};

$('textarea.markItUp').markItUp(mySettings);

Conclusion

On a un système fonctionnel de preview. Par dessus tout, on a évité de créer un contrôleur qui aurait eu pour seule utilité de faire cette preview. Cool !