Section courante

A propos

Section administrative du site

Aperçu

Description

Cette bibliothèque permet d'intégrer un éditeur WYSIWYG à un ou des formulaires.

Voici la liste des fonctions et propriété de l'objet «tinymce» :

Nom Description
activeEditor Cette propriété permet de demander ou de fixer l'éditeur actif.
add Cette fonction permet d'ajouter un instance d'éditeur vers la collection de l'éditeur.
addI18n Cette fonction permet d'ajouter un paquet de langage, cette demande est effectué par le fichiers de chargement de langages comme «en.js».
addUnload Cette fonction permet d'ajouter un gestionnaire de déchargement vers le document.
baseURI Cette propriété permet de demander ou de fixer le chemin d'installation de TinyMCE.
create Cette fonction permet de créer une classe, une sous-classe ou squelette statique.
createNS Cette fonction permet de créer un espace de noms dans un objet spécifié.
each Cette fonction permet de traiter une itération pour tous les items d'une collection dans un objet ou un tableau.
editors Cette propriété permet de demander la collection des objets de l'éditeur.
execCommand Cette fonction permet d'exécuter des commandes sur un éditeur TinyMCE courant.
execInstanceCommand Cette fonction permet d'exécuter des commandes sur un éditeur TinyMCE spécifié.
explode Cette fonction permet de couper une chaine de caractères en enlevant les espaces avant et après chacune des valeurs.
extend Cette fonction permet d'étendre un objet avec les autres objets spécifiés.
get Cette fonction permet de retourner un instance d'éditeur par identificateur.
getInstanceById Cette fonction permet de demander un instance d'éditeur par identicateur.
grep Cette fonction permet d'effectuer une filtration des éléments d'un tableau spécifié en appelant la fonction spécifié pour chaque élément.
i18n Cette propriété permet de demander la collection de paquet de langage de données.
inArray Cette fonction permet de demander l'index d'une valeur dans un tableau, elle retournera -1 si l'item n'est pas trouvé.
init Cette fonction permet d'initialiser l'éditeur TinyMCE.
is Cette fonction permet de vérifier si l'objet est du type spécifié, comme par exemple, un type tableau.
isAir Cette propriété permet de demander si l'exécution s'effectue sur «Adobe Air».
isGecko Cette propriété permet de demander si le navigateur utilise le moteur Gecko.
isIDevice Cette propriété permet de demander si le navigateur est sur un iPhone ou un iPad.
isIE Cette propriété permet de demander si le navigateur utilisé est IE (Internet Explorer).
isIE6 Cette propriété permet de demander si le navigateur utilisé est IE6 (Internet Explorer version 6).
isIE7 Cette propriété permet de demander si le navigateur utilisé est IE7 (Internet Explorer version 7).
isIE8 Cette propriété permet de demander si le navigateur utilisé est IE8 (Internet Explorer version 8).
isIE9 Cette propriété permet de demander si le navigateur utilisé est IE9 (Internet Explorer version 9).
isIOS5 Cette propriété permet de demander si le système d'exploitation est un iOS version 5 ou supérieur.
isMac Cette propriété permet de demander si le système d'exploitation est un Mac OS.
isOpera Cette propriété permet de demander si le navigateur utilisé est Opera.
isWebKit Cette propriété permet de demander si le navigateur Web est un WebKit (Safari, Chrome,...).
majorVersion Cette propriété permet de demander la version majeur de construction de TinyMCE.
makeMap Cette fonction permet de fabriquer une carte de nom et d'objet limité par un tableau avec des noms.
map Cette fonction permet de créer un nouveau tableau par retour de valeur à chaque fonction d'appel d'itération.
minorVersion Cette propriété permet de demander la version mineur de construction de TinyMCE.
onAddEditor Cet événement sera appelé lorsque une instance de l'éditeur sera ajouter dans la collection de «tinymce».
onRemoveEditor Cet événement sera appelé lorsque une instance de l'éditeur sera enlevé de la collection de «tinymce».
releaseDate Cette propriété permet de demander la date de réalisation de TinyMCE.
remove Cette fonction permet d'enlever une instance d'éditeur de la collection.
removeUnload Cette fonction permet de supprimer la fonction spécifié de la liste du gestionnaire de déchargement.
resolve Cette fonction permet de résoudre une chaine de caractères et de retourner les objets du formulaires de la structure spécifié.
triggerSave Cette fonction permet d'appeler la méthode de sauvegarde pour les instances de l'éditeur dans la collection.
trim Cette fonction permet de supprimer les espaces blancs au début et à la fin de la chaine de caractères spécifiés.
walk Cette fonction permet d'exécuter la fonction spécifié sur chacun des item d'un arbre d'objet.

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 : Mercredi, le 28 octobre 2015