Project

General

Profile

Tinymce » History » Version 7

eribar, 11/28/2009 07:01 PM

1 7 eribar
[[BR]]
2 6 eribar
= Configuration de TinyMCE =
3 1 eribar
4
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.
5 5 eribar
6 7 eribar
[[BR]]
7 6 eribar
= Le fichier de configuration par défaut dans linea21 =
8 1 eribar
9 6 eribar
Les fichiers de configuration des divers éditeurs WYSIWYG se trouvent dans '''/lib/js/'''. Pour TinyMCE, le fichier de configuration est le suivant :
10 1 eribar
11 6 eribar
'''/lib/js/tinymce/jscripts/tiny_mce/config.js'''
12 3 eribar
13 5 eribar
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",'').
14 3 eribar
15 5 eribar
Par défaut dans Linea21, le fichier comprend les options de configurations suivantes :
16 3 eribar
17
{{{
18
tinyMCE.init({
19
	mode : "textareas",
20
	language : lang,
21
	theme : "advanced",
22
	plugins : "inlinepopups,fullscreen",
23
  	dialog_type : "modal",
24
	remove_script_host : false,
25
	relative_urls : false,
26
	entity_encoding : "raw",
27
	theme_advanced_toolbar_location : "top",
28
	theme_advanced_resizing: true,
29
	theme_advanced_resize_horizontal:false,
30
	theme_advanced_path : false,
31
	theme_advanced_statusbar_location: "bottom",
32
	theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,formatselect",
33
34
	theme_advanced_buttons2 : "bullist,numlist,|,outdent,indent,|,undo,redo,|,link,unlink,anchor,image",
35 1 eribar
36 3 eribar
	theme_advanced_buttons3 : "hr,removeformat,visualaid,|,sub,sup,|,charmap,|,cleanup,help,code,fullscreen",
37
	theme_advanced_toolbar_align : "right"
38
});
39 1 eribar
}}}
40
41 7 eribar
[[BR]]
42
= Quelques-uns des paramètres disponibles =
43 1 eribar
44
 1. '''mode''' : spécifie comment les éléments sont convertis dans l'éditeur TinyMCE WYSIWYG. 
45
 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).
46 5 eribar
 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'' :
47
  * ''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. 
48
  * ''simple'' --> c'est le thème le plus basique pour TinyMCE. Il ne contient que les fonctions de base. 
49
 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).
50
 5. '''dialog_type''' : spécifie comment les boîtes de dialogue sont ouvertes. Valeurs possibles :
51 1 eribar
  * ''window'' --> ouverture d'une fenêtre normale (valeur par défaut)
52
  * ''modal'' --> ouverture d'une boîte de dialogue
53 5 eribar
   Remarque : actuellement, ceci ne fonctionne que dans Internet Explorer (dans les autres navigateurs, ''window'' est l'unique option possible).
54 1 eribar
 6. '''remove_script_host''' : utilisé avec MCFileManager (greffon non libre et payant, non présent dans linea21)
55
 7. '''relative_urls''' : utilisé avec MCFileManager (greffon non libre et payant, non présent dans linea21)
56 5 eribar
 8. '''entity_encoding''' : contrôle la manière dont les caractères sont traités par TinyMCE. Valeurs possibles : ''named'', ''numeric'' ou ''raw''.
57
 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'' :
58 6 eribar
  * ''!SimpleLayout'' est le gestionnaire par défaut,
59
  * ''!RowLayout'' est un gestionnaire de mise en page plus avancé,
60
  * ''!CustomLayout'' permet d'utiliser un gestionnaire personnalisé. 
61
 9. '''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 : 
62 1 eribar
  * ''top'' --> barre d'outil en haut de l'éditeur
63
  * ''bottom'' --> barre d'outil en bas de l'éditeur
64 5 eribar
 10. '''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''.
65 1 eribar
  * ''false'' --> désactive le bouton
66
  * ''true'' --> active le bouton
67 5 eribar
 11. '''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 :
68
  * ''false'' --> désactive le bouton
69 1 eribar
  * ''true'' --> active le bouton (valeur par défaut, permettant à la fois le redimensionnement horizontal et vertical)
70 5 eribar
 12. '''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.
71
  * ''false'' --> désactive le bouton
72
  * ''true'' --> active le bouton
73 6 eribar
 13. '''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 :
74 5 eribar
  * ''top''
75
  * ''bottom'' (valeur par défaut)
76 1 eribar
  * ''none''
77 6 eribar
 14. '''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''.
78 7 eribar
 15. '''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 :
79 5 eribar
  * ''left''
80
  * ''right''
81 1 eribar
  * ''center'' (valeur par défaut)
82 5 eribar
83 7 eribar
[[BR]]
84 6 eribar
= Une personnalisation possible du fichier de configuration =
85 5 eribar
86
Le fichier config.js est alors le suivant :
87
88
{{{
89
tinyMCE.init({
90
	mode : "textareas",
91
	language : "fr",
92
	theme : "advanced",
93
	plugins : "inlinepopups,fullscreen,media,preview,table,print,style",
94
  	dialog_type : "modal",
95
	remove_script_host : false,
96
	relative_urls : false,
97
	entity_encoding : "raw",
98
	theme_advanced_toolbar_location : "top",
99
	theme_advanced_resizing: true,
100
	theme_advanced_resize_horizontal:false,
101
	theme_advanced_path : false,
102
	theme_advanced_statusbar_location: "bottom",
103
	theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,formatselect,fontselect,fontsizeselect",
104
105
	theme_advanced_buttons2 : "outdent,indent,blockquote,|,cut,copy,paste,undo,redo,|,charmap,link,unlink,anchor,image,media,|,tablecontrols",
106
107
	theme_advanced_buttons3 : "hr,removeformat,visualaid,styleprops,|,sub,sup,forecolor,backcolor,bullist,numlist,|,print,preview,|,cleanup,help,code,fullscreen",
108
	theme_advanced_toolbar_align : "left"
109
});
110
}}}
111
112
----
113
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/].