Paramétrer l'éditeur javascript HTML

Si l'éditeur HTML n'est pas configuré, vous ne verrez pas le menu Editeur HTML dans l'onglet Administration.

Onglet Administration, menu Outils, sous-menu Paramètres, zone Paramètres généraux  :

Paramétrage de l'éditeur HTML Javascript

Paramètre

Valeur par défaut

Explication

javascript_office_editor

Code HTML à insérer pour remplacer les zones HTML TextArea par un éditeur HTML Javascript.

Exemple

Dans le cas de l'éditeur HTML tinyMCE (Version: 2.1.2), une fois celui-ci intégré sur le serveur, la valeur du paramètre pourrait être la suivante :

 

<script type="text/javascript" src="URL_TINYMCE/tiny_mce.js"></script>

<script type="text/javascript">

tinyMCE.init({

mode : "exact",

elements : "f_message,entete_mail,piedpage_mail,form_content_infopage",

theme : "advanced",

convert_urls : false,

language : "fr",

plugins :

"advhr,advimage,advlink,contextmenu,directionality,emotions,fullscreen,insertdatetime,layer,media,nonbreaking,noneditable,paste,preview,print,save,searchreplace,style,table,visualchars",

extended_valid_elements : "hr[class|width|size|noshade],a[name|href|target|title|onclick|rel],font[face|size|color|style],span[class|align|style],p[lang],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name]",

theme_advanced_buttons1_add_before : "newdocument,separator",

theme_advanced_buttons1_add : "fontselect,fontsizeselect,forecolor,backcolor,separator,styleprops",

theme_advanced_buttons2_add_before : "selectall,cut,copy,paste,pastetext,pasteword,separator,search,replace,separator",

theme_advanced_buttons2_add : "separator,,emotions,media,advhr,separator,insertdate,inserttime",

theme_advanced_buttons3_add_before : "tablecontrols,separator",

theme_advanced_buttons3_add : "separator,insertlayer,moveforward,movebackward,absolute,separator,print,separator,fullscreen,preview,visualchars,nonbreaking",

plugin_insertdate_dateFormat : "%d-%m-%Y",

plugin_insertdate_timeFormat : "%H:%M:%S",

theme_advanced_toolbar_location : "top",

theme_advanced_toolbar_align : "left",

theme_advanced_statusbar_location : "bottom",

theme_advanced_resizing : true,

theme_advanced_resize_horizontal : true,

apply_source_formatting : true,

spellchecker_languages : "+English=en,French=fr"

});

</script>

 

Exemple

Ou, pour la version 4 de l'éditeur HTML tinyMCE (Version: 4 ), une fois celui-ci intégré sur le serveur :

<script type="text/javascript" src="URL_TINYMCE/tinymce.min.js"></script>

<script type="text/javascript">

tinyMCE.init({

mode : "exact",

elements : "f_message,entete_mail,piedpage_mail,form_content_infopage,cms_editorial_form_resume,cms_editorial_form_contenu",

convert_urls : false,

language : "fr_FR",

plugins : "table,insertdatetime,image,media,fullscreen,link,nonbreaking,preview,contextmenu,searchreplace,paste,directionality,visualchars,textcolor colorpicker,code,anchor,fullscreen,hr,charmap",

toolbar: ["undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify outdent indent | bullist numlist | forecolor backcolor | fontsizeselect",

"link image | anchor | fullscreen preview code"],

apply_source_formatting : true,

browser_spellcheck : true,

removed_menuitems: 'newdocument'

});

</script>

Attention

"URL_TINYMCE" doit bien entendu être remplacé par l'URL qui mène au répertoire dans lequel est installé le logiciel tinymce sur le serveur Web.

Cette URL doit comporter le même domaine que l'URL d'accès à la partie Gestion du logiciel PMB.

Truc & astuce

La ligne de configuration :

 

elements : "f_message,entete_mail,piedpage_mail,form_content_infopage",

 

liste les noms des différentes zones HTML TextArea qui sont prises en compte pour l'éditeur HTML Javascript.