Section courante

A propos

Section administrative du site

init

 TinyMCE
JavaScript

Syntaxe

function init(s);

Paramètres

Nom Description
s Ce paramètre permet d'indiquer un ensemble d'options à utiliser pour l'initialisation de l'éditeur selon les options suivantes :
Nom Description
accessibility_warnings Cette option permet de définir certains avertissements d'accessibilité présentés à l'utilisateur s'ils ne spécifient pas ces informations. La valeur par défaut est true.
auto_focus Cette option permet d'activer le focus automatique dans une instance d'éditeur.
apply_source_formatting Cette option permet d'indiquer à TinyMCE d'appliquer un formatage source au code HTML de sortie :
Valeur Description
false Cette valeur permet d'indiquer que les sauts de ligne sont supprimés du code source HTML.
true Cette valeur permet d'indiquer que les caractères de saut de ligne sont placés après et avant certaines balises (définies dans les options «indent_before» et «indent_after»).
convert_fonts_to_spans Cette option permet d'indiquer s'il faut convertir des balises FONT en balises SPAN :
Valeur Description
false Cette valeur permet d'indiquer qu'il faut laisser inchangé les balises FONT.
true Cette valeur permet d'indiquer qu'il faut convertir tous les balises FONT et générer des balises SPAN plutôt que des balises de police de caractères. Cette option doit être utilisée pour obtenir plus de code compatible W3C, car les éléments de police sont obsolètes. La façon dont les tailles sont converties peut être contrôlée par les options font_size_classes et font_size_style_values.
convert_newlines_to_brs Cette option permet d'indiquer s'il fut que les codes de caractères de nouvelle ligne soit convertie en balise BR. Cette option est fixé sur false par défaut.
custom_elements Cette option permet de spécifier des éléments non HTML pour l'éditeur. Ces balises non-HTML seront ensuite convertie en DIV et s'étendent en interne puis reviennent à leurs noms de balise d'origine lorsque vous obtenez le contenu de l'éditeur. De cette façon, vous pouvez gérer des balises non HTML dans un éditeur HTML. Vous pouvez préfixer les noms d'éléments avec un «~» si vous voulez que la balise soit converti en un balise SPAN. Le comportement par défaut consiste à les convertir en balise DIV. Ces balises DIV / SPAN seront totalement invisibles pour l'utilisateur car ils verront les noms personnalisés partout dans l'interface utilisateur et en entrée/sortie.
doctype Cette option permet de fixer le DOCTYPE qu'il faut que TinyMCE utilise.
element_format Cette option permet d'indiquer le mode de contrôle des éléments du code source :
Valeur Description
"html" Cette valeur permet d'indiquer du code HTML.
"xhtml" Cette valeur permet d'indiquer du code XHTML.
encoding Cette option permet d'extraire du contenu d'échappement XML de TinyMCE. Le contenu publié sera converti en une chaîne de caractères XML d'échappement pour des caractères tels que «<», «>», «"», «&l;», «&lt;», «&gt;», «&quot;», et «&». Cette option est définie par défaut sur rien et est donc désactivée.
entities Cette option contient une liste de noms d'entité séparés par des virgules à la place des caractères. Les éléments impairs sont le code de caractère et les éléments pairs sont le nom du code de caractère.
entity_encoding Cette option permet de contrôler le traitement des entités/caractères de TinyMCE selon les valeurs suivantes :
Valeur Description
"named" Cette valeur permet d'indiquer qu'il faut le convertir en entités nommées en fonction de l'option d'entité. Par exemple, on pourrait encodé un espace insécable (non-breaking space).
"numeric" Cette valeur permet d'indiquer qu'il faut le convertir en entités numériques.
"raw" Cette valeur permet d'indiquer qu'il faut l'entreposer sous une forme de non-entité à l'exception des entités XML par défaut : «&», «<», «>» ou «"».
mode Cette option permet d'indiquer les éléments à convertir dans une instance d'éditeur WYSIWYG de TinyMCE.
plugins Cette option permet d'indiquer une liste de plugiciels séparés par des virgules.
... ...

Description

Cette fonction permet d'initialiser l'éditeur TinyMCE.

Exemple

Voici un exemple montrant comment on peut utiliser cette fonction afin d'effectuer de l'insertion du texte :

  1. <html>
  2. <head>
  3. <script type="text/javascript" src="tiny_mce/tiny_mce.js"></script>
  4. <script type="text/javascript">
  5. tinyMCE.init({
  6.      mode : "textareas",
  7.      theme : "advanced",
  8.      width : "600",
  9.        height : "350",
  10.      plugins : "pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount,advlist",
  11.      relative_urls : false,
  12.      remove_script_host : false,
  13.           
  14.      forced_root_block : false,
  15.      force_br_newlines : true,
  16.      force_p_newlines : false,
  17.  
  18.      theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect,",
  19.      theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
  20.      theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,characcent,emotions,iespell,media,advhr,|,ltr,rtl,|,fullscreen,pagebreak,restoredraft",
  21.      theme_advanced_toolbar_location : "top",
  22.      theme_advanced_toolbar_align : "left",
  23.      theme_advanced_statusbar_location : "bottom",
  24.      theme_advanced_resizing : true,
  25.  
  26.      template_external_list_url : "lists/template_list.js",
  27.      external_link_list_url : "lists/link_list.js",
  28.      external_image_list_url : "lists/image_list.js",
  29.      media_external_list_url : "lists/media_list.js",
  30.  
  31.      style_formats : [
  32.           {title : 'Bold text', inline : 'b'},
  33.           {title : 'Red text', inline : 'span', styles : {color : '#ff0000'}},
  34.           {title : 'Red header', block : 'h1', styles : {color : '#ff0000'}},
  35.           {title : 'Example 1', inline : 'span', classes : 'example1'},
  36.           {title : 'Example 2', inline : 'span', classes : 'example2'},
  37.           {title : 'Table styles'},
  38.           {title : 'Table row 1', selector : 'tr', classes : 'tablerow1'}
  39.      ],
  40. });
  41. </script>
  42. </head>
  43. <body>
  44. <textarea id="Description" name="Description" style="width:500px; height: 50px;"></textarea>
  45. </body>
  46. </html>

on obtiendra le résultat suivant :

Voir également

Articles - WYSIWYG du Web

Dernière mise à jour : Vendredi, le 30 octobre 2015