Linea21

{{>toc}}

h1. Configuration de [[TinyMCE]]

Dans la configuration par défaut fournie par Linea21, peu de fonctions et icônes sont apparentes pour la rédaction des actualités, publications, newsletter... Ce tutoriel basique explique un paramétrage possible de l'éditeur WYSIWYG [[TinyMCE]], permettant d'enrichir les fonctionnalités et le comportement de [[TinyMCE]].

h1. Le fichier de configuration par défaut dans linea21

Les fichiers de configuration des divers éditeurs WYSIWYG se trouvent dans */lib/js/*. Pour [[TinyMCE]], le fichier de configuration est le suivant :

*/lib/js/tinymce/jscripts/tiny_mce/config.js*.

Afin de créer un fichier pérenne de configuration, utilisez l'"override":http://dev.linea21.com/wiki/Personnalisation%20de%20l%27interface#Lestemplatesetloverride. Pour ce faire, créez très simplement votre fichier à l'emplacement suivant : _/templates/admin/MONTHEME/override/lib/js/tinyMCE/jscripts/tiny_mce/config.js_ ou MONTHEME est le thème actif. Par défaut, il a la valeur *default*.

Ce fichier comprend une série de couples "paramètre:valeur" séparés par une virgule (par exemple, _mode : "textaeras",_). Il peut y avoir plusieurs valeurs à la suite d'un paramètre (par exemple, _plugins : "inlinepopups,fullscreen",_).

Par défaut dans Linea21, le fichier comprend les options de configurations suivantes :

<pre>

tinyMCE.init({

	mode : "textareas",

	language : lang,

	theme : "advanced",

	plugins : "inlinepopups,fullscreen",

  	dialog_type : "modal",

	remove_script_host : false,

	relative_urls : false,

	entity_encoding : "raw",

	theme_advanced_toolbar_location : "top",

	theme_advanced_resizing: true,

	theme_advanced_resize_horizontal:false,

	theme_advanced_path : false,

	theme_advanced_statusbar_location: "bottom",

	theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,formatselect",

	theme_advanced_buttons2 : "bullist,numlist,|,outdent,indent,|,undo,redo,|,link,unlink,anchor,image",

	theme_advanced_buttons3 : "hr,removeformat,visualaid,|,sub,sup,|,charmap,|,cleanup,help,code,fullscreen",

	theme_advanced_toolbar_align : "right"

});

</pre>

L'interface est alors la suivante :

[[Image(tinymce_basique.png)]]

h1. Quelques-uns des paramètres disponibles

 1. *mode* : spécifie comment les éléments sont convertis dans l'éditeur [[TinyMCE]] WYSIWYG. 

 2. *language* : contient le code de langue du pack de langue à utiliser avec [[TinyMCE]]. Pour voir si votre langue est disponible, vérifiez le contenu de _tinymce / jscripts / tiny_mce / langs_ (exemple : _fr.js_ pour le français).

 3. *theme* : indique quel thème grahique utiliser avec l'éditeur. Le thème correspond au nom d'un des répertoires se trouvant dans _tinymce / jscripts / tiny_mce / themes_ :

** _advanced_ --> valeur par défaut. ce thème permet aux utilisateurs d'ajouter ou supprimer des boutons et des panneaux ; il est beaucoup plus souple que le thème simple. 

** _simple_ --> c'est le thème le plus basique pour [[TinyMCE]]. Il ne contient que les fonctions de base. 

 4. *plugins* : contient une liste de _greffons_, séparée par des virgules. Les _greffons_ sont chargés depuis les répertoires présents dans _/ jscripts / tiny_mce / plugins_ et leur nom correspond au nom du répertoire. Ces "plugins" apportent des fonctionnalités supplémentaires (exemple : le greffon _preview_ ajoute un bouton d'aperçu à l'éditeur ; en le pressant une fenêtre s'ouvre, affichant le contenu de l'éditeur dans sa forme finale).

 5. *dialog_type* : spécifie comment les boîtes de dialogue sont ouvertes. Valeurs possibles :

** _window_ --> ouverture d'une fenêtre normale (valeur par défaut)

** _modal_ --> ouverture d'une boîte de dialogue

   Remarque : actuellement, ceci ne fonctionne que dans Internet Explorer (dans les autres navigateurs, _window_ est l'unique option possible).

 6. *remove_script_host* : utilisé avec MCFileManager (greffon non libre et payant, non présent dans linea21)

 7. *relative_urls* : utilisé avec MCFileManager (greffon non libre et payant, non présent dans linea21)

 8. *entity_encoding* : contrôle la manière dont les caractères sont traités par [[TinyMCE]]. Valeurs possibles : _named_, _numeric_ ou _raw_.

 9. *theme_advanced_layout_manager* : cette option gère les fonctionnalités de mise en page du panneau de l'éditeur. 3 valeurs sont possibles, chacun des gestionnaires de mise en page ont différentes options et peuvent être configurés de différentes manières. Cette option est disponible uniquement si le *thème* est _advanced_ :

** _!SimpleLayout_ est le gestionnaire par défaut,

** _!RowLayout_ est un gestionnaire de mise en page plus avancé,

** _!CustomLayout_ permet d'utiliser un gestionnaire personnalisé. 

 10. *theme_advanced_toolbar_location* : indique l'endroit où la barre d'outil est positionnée. Fonctionne uniquement si le *thème* est _advanced_ et l'option *theme_advanced_layout_manager* est fixée à la valeur _!SimpleLayout_. Valeurs possibles : 

** _top_ --> barre d'outil en haut de l'éditeur

** _bottom_ --> barre d'outil en bas de l'éditeur

 11. *theme_advanced_resizing* : permet l'activation ou non du bouton de redimensionnement. Cette option n'est utile que si l'option *theme_advanced_statusbar_location* est réglée sur _top_ ou _bottom_.

** _false_ --> désactive le bouton

** _true_ --> active le bouton

 12. *theme_advanced_resize_horizontal* :  permet l'activation ou non du redimensionnement horizontal. Cette option n'est utile que si l'option *theme_advanced_statusbar_location* est réglée sur _top_ ou _bottom_ et si le *theme_advanced_resizing* est défini à _true_. Valeurs possibles :

** _false_ --> désactive le bouton

** _true_ --> active le bouton (valeur par défaut, permettant à la fois le redimensionnement horizontal et vertical)

 13. *theme_advanced_path* : permet l'affichage ou non du chemin. Cette option n'est utile que si l'option *theme_advanced_statusbar_location* est réglée sur _top_ ou _bottom_. Cette option est définie sur _true_ par défaut. Régler ce paramètre à _false_ masquera le chemin, mais il prendra de la place dans la barre d'état.

** _false_ --> désactive le bouton

** _true_ --> active le bouton

 14. *theme_advanced_statusbar_location* : spécifie l'endroit où la barre d'état (avec le chemin d'accès et un bouton de redimensionnement) est positionnée. Cette option peut uniquement être utilisée lorsque le *thème* est _advanced_ et quand l'option *theme_advanced_layout_manager* est fixée à la valeur _!SimpleLayout_. Valeurs possibles :

** _top_

** _bottom_ (valeur par défaut)

** _none_

 15. *theme_advanced_buttons1* : cette option contient une liste des tous les boutons à insérer dans la barre d'outils. Les noms des boutons sont séparés par des virgules. Le caractère "|" permet d'insérer un séparateur entre des groupes de boutons. Le numéro de la barre d'outil va de 1 à 3 (il y a donc au plus 3 barres d'outils). Cette option ne peut être utilisée que lorsque le *thème* est _advanced_ et l'option *theme_advanced_layout_manager* est fixée à la valeur _!SimpleLayout_.

*Remarque* : certaines fonctions (boutons) sont utilisables directement en les insérant dans les barres d'outils. Par contre d'autres dépendent de _greffons_, dont la présence doit être vérifiée dans _/ jscripts / tiny_mce / plugins_ et qui doivent être référencés dans le paramètre *plugins*. Si ces deux conditions ne sont pas remplies, l'insertion du bouton dans la barre d'outils n'aura aucun effet.

 16. *theme_advanced_toolbar_align* :  spécifie l'alignement de la barre d'outils. Cette option ne peut être utilisée que si le *thème* est _advanced_ et l'option *theme_advanced_layout_manager* est fixée à _!SimpleLayout_. Valeurs possibles :

** _left_

** _right_

** _center_ (valeur par défaut)

h1. Une personnalisation possible du fichier de configuration

Un fichier _config.js_ un peu plus complet peut être le suivant :

<pre>

tinyMCE.init({

	mode : "textareas",

	language : "fr",

	theme : "advanced",

	plugins : "inlinepopups,fullscreen,media,preview,table,print,style",

  	dialog_type : "modal",

	remove_script_host : false,

	relative_urls : false,

	entity_encoding : "raw",

	theme_advanced_toolbar_location : "top",

	theme_advanced_resizing: true,

	theme_advanced_resize_horizontal:false,

	theme_advanced_path : false,

	theme_advanced_statusbar_location: "bottom",

	theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,formatselect,fontselect,fontsizeselect",

	theme_advanced_buttons2 : "outdent,indent,blockquote,|,cut,copy,paste,undo,redo,|,charmap,link,unlink,anchor,image,media,|,tablecontrols",

	theme_advanced_buttons3 : "hr,removeformat,visualaid,styleprops,|,sub,sup,forecolor,backcolor,bullist,numlist,|,print,preview,|,cleanup,help,code,fullscreen",

	theme_advanced_toolbar_align : "left"

});

</pre>

Ce qui amène à l'interface suivante de tinymce :

[[Image(tiny_mce enrichi.png)]]

----

Après paramétrage, votre fichier est prêt à être sauvegardé en local ou téléchargé sur le site distant. Pour améliorer ce tutoriel, ou pour toute erreur, n'hésitez pas à vous adresser au forum : [http://www.linea21.com/forum/].