WordPress – Ajouter des styles personnalisés dans l’éditeur TinyMCE

Si vous souhaitez ajouter des styles personnalisés dans l’éditeur TinyMCE pour avoir un aperçu plus réel sur le contenu en cours d’édition.

Ajouter le code suivant dans le fichier fonctions.php dans le répertoire de votre thème.

//Ajouter des styles personnalisés
if (!function_exists('my_formatTinyMCE')){
	function stylePersonnalise($init) {
		$init['theme_advanced_buttons2_add'] = 'styleselect';
		//Ajouter vos styles personnalisés
		//avec
		//Titre bleu -> ce qui sera affiché dans la liste du select
		//titre-bleu -> le nom de la classe dans le fichier css
		$init['theme_advanced_styles'] = 'Titre bleu=titre-bleu, Titre gris=titre-gris, Bouton Démo=bouton-demo';
		return $init;
	}
}
add_filter('tiny_mce_before_init', 'stylePersonnalise');

//Ajout du fichier css
function tinymceCss($mce_css) {
  if (! empty($mce_css)) $mce_css .= ',';
  //emplacement du fichier contenant les nouvelles class
  $mce_css .= get_bloginfo('template_url') . '/css/tinymce.css';
  return $mce_css;
}

add_filter('mce_css', 'tinymceCss');

A noter qu’il faut créer un nouveau fichier css (css/tinymce.css) dans votre thème contenant les nouvelles classes sans oublier de les recopier à nouveau dans votre fichier style.css afin qu’elles soient accessibles sur votre front office.

.titre-bleu 		{ font-size: 1.4em; color: #0039aa; font-weight: bold;}
.titre-gris 		{ font-size: 1.4em; color: #333333; font-weight: bold;}

.bouton-demo 		{ background-color: #0039ad; color: #ffffff; text-align: center; width: 150px; border-radius: 5xp;}