Installer TinyMCE sur un projet Ruby on Rails

Mise en place

  1. Ajouter gem 'tinymce-rails' au Gemfile
  2. Si votre application n’est pas accessible à la racine du domaine, ajouter la ligne suivante dans conf/environments/development.rb : config.tinymce.base = "/chemin_vers/assets/tinymce"
  3. Puis dans le fichier assets/javascripts/application.js ajouter la ligne : //= require tinymce
  4. Créer un fichier config/tinymce.yml (exemple ci-dessous)
  5. Placer la classe tinymce sur les textarea souhaités (modifiable via le paramètre selector dans le fichier tinymce.yml)
  6. Ajouter en première ligne de votre vue <%= tinymce :application %>

Cette dernière étape va insérer dans la page HTML le code JavaScript d’initialisation de TinyMCE.

Exemple de fichier de configuration tinymce.yml :

default:
  plugins:
    - image
    - link

application:
  relative_urls: false
  remove_script_host: false
  convert_urls: false
  document_base_url: <%= URL_SITE %>

  selector: .tinymce
  height: 200
  width: 600
  menubar: false
  toolbar_items_size: small
  toolbar1: bold italic underline | image | styleselect | forecolor | backcolor | alignleft aligncenter alignright alignjustify | bullist numlist |
  plugins:
    - table
    - link
    - anchor
    - image
    - visualblocks
    - textcolor
  style_formats:
    -
      block: p
      title: Paragraphe
    -
      block: h2
      title: Titre
    -
      block: h3
      title: Sous-titre

Ajout dynamique en JavaScript

La plupart des solutions proposées sur les sites spécialisés consistent à détruire/recréer l’instance TinyMCE, car il n’est pas possible de retirer/ajouter une classe au sélecteur utilisé, ni n’actualiser les éléments trouvés par le sélecteur à l’initialisation.

On peut en revanche activer TinyMCE sur un textarea avec son id :

tinymce.EditorManager.execCommand('mceAddEditor', false, "id_du_textarea")

L’autre solution consiste à utiliser une méthode non documentée de la gem tinymce-rails, qui fournit le code d’initialisation sans balises script.
On retire alors la ligne : <%= tinymce :application %>
Puis on ajoute le code JavaScript suivant :

function actualiser_tinymce() {
  if (typeof tinymce != 'undefined')
    tinymce.remove();
  <%= tinymce_javascript :application %>
}

Il ne reste plus qu’à appeler la fonction actualiser_tinymce() quand bon vous semble !

Dépannage

Si TinyMCE n’apparait pas, ajouter la ligne suivante dans votre vue :

<script type="text/javascript">
  tinyMCE.baseURL = "http://chemin_vers/assets/tinymce";
</script>

En cas de problèmes, il est conseillé de désactiver turbolinks.

Une réflexion au sujet de « Installer TinyMCE sur un projet Ruby on Rails »

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.