slDesign

VIII – Personnalisé l’éditeur

Il est possible et parfois utile de personnaliser  l’éditeur HTML. Voici les étapes permettant de réaliser cette opération.

Nous allons ajouter des éléments personnalisés à notre éditeur graphique. WordPress utilise par défaut l’éditeur TinyMCE.

Si vous voulez en savoir plus sur la création de boutons TinyMCE, vous pouvez consulter le site Web de l’application.

Il est possible d’appliquer des filtres (add_filter) à l’éditeur de texte. Il existe plusieurs filtres :

• mce_spellchecker_languages
  • • • • Permet de sélectionner la langue pour le vérificateur ortographique
• mce_buttons, mce_buttons_2, mce_buttons3, etc.
  • • Applique des boutons sur une rangée
• mce_css
  • • Applique une feuille de style (liée à une URL) permettant de selectionner des styles
• mce_external_plugin
  • • Permet de charger des plugins externes dans l’éditeur de texte
• mce_external_languages
  • • Permet de charger des fichiers de langues utilisés par des plugins externe
• tiny_mce_before_init
  • • Action appliquée avant le chargement de tinyMCE.

1°) Création d’une liste déroulante pour la sélection de styles spécifiques :

La première étape consiste à créer une feuille de style spécifique. Nous aurions pu lié à une feuille de style complète de notre projet mais il devient difficile de s’y retrouver…

Feuille de style “editor.css”

/**
 * sldesign Wordress Theme
 * Editor spécifique css file
 */
.alert{
	color:#ff0000;
	font-weight:bold;
}

.info{
	background-color:#f5f5f5;
	border:1px solid #000;
	padding:1em;
}

.floatleft{
	float:left;
}
.floatright{
	float:right;
}

Cette feuille devient bien évidement accessible et modifiable depuis l’éditeur de thème interne à WordPress

Voici le code nous permettant d’afficher une liste déroulante avec les différentes styles et d’y lier une feuille de style interne à notre thème :

Code PHP – functions.php

/**
 * Défini la feuille de style à charger dans tiniyMCE
 * @param String $url
 */
function sldesign_editor_styles($url) {
  if (!empty($url)) $url .= ',';
  $url .= trailingslashit(get_stylesheet_directory_uri()).'editor.css';
  return $url;
}

/**
 * Création du selecteur de styles
 */
function sldesign_tinymce_editor_buttons($buttons) {
	array_unshift($buttons, 'styleselect');
	return $buttons;
}

//Si l'utilisateur peut editer des posts
//On ajoute les filtres permettant d'étendre notre éditeur – 2eme série de boutons
if(current_user_can('edit_posts')){
	add_filter('mce_css', 'sldesign_editor_styles');
   	add_filter('mce_buttons_2', 'sldesign_tinymce_editor_buttons');
}

Lé résultat en image :