Étendre les fonctions de l'éditeur de contenu avec concrete 5.2.x

Depuis la version 5.2.RC1 de concrete5, l'éditeur de contenu est personnalisable directement en ligne via votre tableau de bord.

Vous avez le choix entre plusieurs modes standards, et un mode personnalisé.

Le mode simple est une version de l'éditeur ne contenant que les options de base, comme ceci:

Le mode Advanced est une version de l'éditeur comprenant presque toutes les options disponibles:

Le mode office est une sorte de mode full featured de l'éditeur: contenant toutes les options:

Mais vous avez également un mode personnalisable en ligne !!

Lorsque vous cliquez sur le bouton de ce mode une zone de saisie de texte apparaît, contenant:

theme : "concrete", plugins: "inlinepopups,spellchecker,safari,advlink", editor_selector : "advancedEditor", spellchecker_languages : "+English=en", theme_concrete_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,hr,|,styleselect,formatselect,fontsizeselect", theme_concrete_buttons2 : "bullist,numlist,|,outdent,indent,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,forecolor", theme_concrete_blockformats : "p,address,pre,h1,h2,h3,div,blockquote,cite", theme_concrete_toolbar_align : "left", theme_concrete_fonts : "Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats", theme_concrete_font_sizes : "1,2,3,4,5,6,7", theme_concrete_styles: "Note=ccm-note", spellchecker_languages : "+English=en" /* // Use the advanced theme for more than two rows of content plugins: "inlinepopups,spellchecker,safari,advlink,table,advhr,xhtmlxtras,emotions,insertdatetime,paste,visualchars,nonbreaking,pagebreak,style", editor_selector : "advancedEditor", theme : "advanced", theme_advanced_buttons1 : "cut,copy,paste,pastetext,pasteword,|,undo,redo,|,styleselect,formatselect,fontsizeselect,fontselect", theme_advanced_buttons2 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,bullist,numlist,|,outdent,indent,blockquote,|,link,unlink,anchor,|,forecolor,backcolor,|,image,charmap,emotions", theme_advanced_fonts : "Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats", // etc. */

La documentation ci-dessous est obsolète si vous utilisez concrete5.2.x ou supérieur.

Étendre les options de l'éditeur:

Actuellement, la façon la plus simple, et péreine, pour ajouter des options sur l'éditeur de contenu TinyMCE de votre site concrete5 est de copier le répertoire

/concrete/blocks/content/

dans le répertoire

/blocks/content/

à la racine de votre site. De cette façon les mises à jour de concrete5 n'altèrerons pas vos modifications.

Ensuite ouvrez le fichier editor_init.php de votre répertoire local avec votre éditeur de code préféré. Vers le début du fichier vous devriez avoir le code suivant (ou quelque chose de très similaire) :

<mce:script language="javascript"><!--
tinyMCE.init({
mode : "textareas",
editor_selector : "advancedEditor",
theme : "concrete",
width: "580px",
height: "380px",
plugins: "inlinepopups,spellchecker,safari,advlink",
inlinepopups_skin : "concreteMCE",
theme_concrete_buttons2_add : "spellchecker",
spellchecker_languages : "+English=en",
relative_urls : false,
content_css : "<?=$th->getThemeEditorCSS()?>"
});

Si vous désirez avoir d'autres exemples conrets, certains ont étés postés sur le forum:

• Passer TinyMCE en français
• Insertion de code avec coloration syntaxique dans TinyMCE
• Ajouter les boutons [tables] et [emotions] sur TinyMCE

Cette liste est amenée à s'étendre dans le temps, en fonction des contributions.

N'hésitez pas à consulter la documentation sur le site de TinyMCE, ainsi que les diverses démonstrations en ligne, comme celle-ci.

Elle est définit avec un classe tinyMCE.init comme la suivante:

tinyMCE.init({ // General options mode : "textareas", theme : "advanced", plugins : "safari,spellchecker,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,imagemanager,filemanager", // Theme options theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect", 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", theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen", theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage", theme_advanced_toolbar_location : "top", theme_advanced_toolbar_align : "left", theme_advanced_statusbar_location : "bottom", theme_advanced_resizing : true, // Example content CSS (should be your site CSS) content_css : "css/example.css", // Drop lists for link/image/media/template dialogs template_external_list_url : "js/template_list.js", external_link_list_url : "js/link_list.js", external_image_list_url : "js/image_list.js", media_external_list_url : "js/media_list.js", // Replace values for the template plugin template_replace_values : { username : "Some User", staffid : "991234" } }); 

A savoir que la copie littérale de cette syntaxe n'est pas entièrement compatible sur concrete5, à vous d'éffectuer vos tests en local.