Symfony - Geshi sur TinyMCE

Par FlUxIuS 2008-06-27 { Catégorie : PHP }

(Duplicata de l'articles de contribution pour Symfony-Project de Sébastien Dudek (FlUxIuS) )

Utiliser un editeur WYSIWYG tel que TinyMCE est une nécessité lors de la rédaction d'articles. De plus, dans l'informatique, les scripts que l'on partage ne sont pas clairs -> la colorisation de syntaxes est donc un MUST.

Dans ce tutoriel, nous intégrerons facilement Geshi et verrons aussi comment ajouter de nouveaux languages (car mon package est pas mal léger).

Installation

Commencez tout dabord à télécharger : TinyGeshi, ce plugin pour TinyMCE s'installe manuellement et est une adaptation à symfony de l'insertcode (de Maxime Lardenois).

Une fois téléchargé, décompressez les fichiers dans la racine de votre compte contenant Symfony. Normalement ceci ne remplacera pas vos fichiers répertoriés, mais si vous avez un doute faites de manière encore plus manuelle (Supa Mano) :

Placez le répertoire "web/js/tiny_mce/plugins/insertcode" dans le répertoire plugins de TinyMCE
Puis mettez le fichier "geshi.css" dans web/css/

Nous allons maintenant intégrer insertcode au Helper de TinyMCE.

Ouvrez le fichier : lib/symfony/helper/sfRichTextEditorTinyMCE.class.php

Et ajoutez 'insertcode' dans le champs 'plugins:' et créer ou ajouter dans un des 'theme_advanced_buttons', comme ceci :

tinyMCE.init({
  mode: "exact",
  language: "en",
  elements: "'.$id.'",
  plugins: "table,advimage,advlink,flash,insertcode,style",
  theme: "advanced",
  theme_advanced_toolbar_location: "top",
  theme_advanced_toolbar_align: "left",
  theme_advanced_path_location: "bottom",
  theme_advanced_buttons1: "'.$style_selector.'justifyleft,justifycenter,justifyright, justifyfull,separator,bold,italic,strikethrough,separator, sub,sup,separator,charmap,insertcode,",
  theme_advanced_buttons2: "bullist,numlist,separator,outdent,indent,separator,undo,redo,separator, link,unlink,image,flash,separator,cleanup, removeformat,separator,code,tablecontrols",
  theme_advanced_buttons3: "styleselect,formatselect,fontselect,fontsizeselect",
  extended_valid_elements: "img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover |onmouseout|name]",

Pour ceux qui ne voient pas trop :

plugins: "table,advimage,advlink,flash,insertcode,style",

theme_advanced_buttons1: "'.$style_selector.'justifyleft,justifycenter,justifyright,
justifyfull,separator,bold,italic,strikethrough,separator, sub,sup,separator,charmap,insertcode,",

Une fois fait, nous avons plus qu'à mettre notre CSS, qui nous permettera de colorier les syntaxes. Pour cela, rendez-vous dans le module de le module d'édition d'articles et éditez le fichier view.yml dans "config" (vous pouvez aussi le faire de manière plus génerale on éditant le fichier view.yml de l'application elle même.

Voici la configuration :

all:
  stylesheets: [style, geshi]

Vous pouvez dès maintenant voir un nouveau bouton avec des accolades {}.

Cependant, celui-ci manquerait quelques languages dont vous auriez besoin, heureusement que l'adaptation est simple :)

Rajouter des langages

Dans le répertoire web/js/tiny_mce/plugins/insertcode/geshi/geshi, vous trouverez des fichiers d'extensions .php nommés : c.php, php.php, ....

Pour rajouter des languages, téléchargez la class Geshi. Tout comme le répertoire Geshi précède, les fichiers vous intéressant seront dans geshi/geshi (de la classe Geshi). Vous aurez normalement tout les languages vous intéressant et si vous êtes tenté d'en faire un, vous savez où les stocker maintenant.

Pour la phase d'intégration, éditez le fichier web/js/tiny_mce/plugins/insertcode/config/config.php

dans le tableau $icAllowedLanguages, ajoutez votre langages ainsi :

$icAllowedLanguages = array(
		// e.g "name" => "My Code",
		"php" => "PHP",
		"javascript" => "Javascript",
		"xml" => "XML",
		"sql" => "SQL",
		"css" => "CSS",
		"smarty" => "Smarty Template",
		"html4strict" => "HTML",
                "votrelanguage" => "Votre Language"
 
);