Tutorial partie 3: Un peu de javascript pour agrémenter la saisie

De Mozaic Framework.
Aller à : Navigation, rechercher

Pourquoi ?

Comme vous l'avez certainement constaté, la saisie du texte dans la création/modification d'un billet est assez roots. Pour faire de la mise en forme HTML, il faut se l'envoyer à la main, ce qui est bien, mais pas top.

Nous allons donc mettre en place l'éditeur TinyMCE pour simplifier la mise en forme des billets.


Intégration de TinyMCE

Normalement, il est dans www/js/tinymce.

Ce que nous devons faire, c'est attacher le fichier tiny_mce.js dans les pages qui en ont besoin.

Dans notre create.html, dérivons le bloc {head} pour y intégrer tiny_mce.js :

 {block "head"}
     {resource "js" "js/tinymce/jscripts/tiny_mce/tiny_mce.js"}
 {/block}

Puis en bas du bloc content, ajoutons l'initialisation de tinyMCE :

<script type="text/javascript">
        tinyMCE.init({
                mode : "textareas",
                theme : "simple"
        });
</script>

Pour avoir une zone de saisie de taille appréciable, j'ai modifié la largeur et la hauteur du textarea concerné : 500px et 300px.

Ouvrons la page de création : magie !

Tinymce 1.png


On n'a qu'à répéter l'opération pour la page edit.html et ce sera parfait.

Outils personnels
Espaces de noms
Variantes
Actions
Navigation
Boîte à outils