Personnaliser TinyMCE avec les styles de votre thème WordPress

Article publié le 10 juin 2016

Dans l’interface WordPress, vous aimeriez que l’éditeur TinyMCE prenne en compte les styles de votre thème, afin que ce qui s’affiche ressemble à ce que voit l’internaute ? Voici quelques codes pour vous y aider.

Pour que l’éditeur TinyMCE prenne en compte les styles de votre thème WordPress :

Dans le fichier functions.php de votre thème, ajoutez :

function my_theme_add_editor_styles() {
  add_editor_style( 'style.css' );
}
add_action( 'after_setup_theme', 'my_theme_add_editor_styles' );

Pour personnaliser les styles d’affichage uniquement dans l’éditeur :

Créez dans le dossier de votre thème un fichier editor-style.css dans le quel vous renseignez les styles souhaités.

Par exemple l’arrière-plan :

/* CSS Document pour l'editeur TinyMCE */
body {
  background-color:#404040;
  color:#fff;
}

Puis dans le fichier functions.php de votre thème, ajoutez :

if ( !function_exists('init_editor_styles')) {
  add_action( 'after_setup_theme', 'init_editor_styles' );
  function init_editor_styles() {
  add_editor_style( 'editor-style.css' );
  }
}

Pour personnaliser le contenu du menu « Styles », du menu « Formats » et les couleurs :

Dans le fichier functions.php de votre thème, ajoutez :

function tinymce_filtre($in){
  /* ##### Pour le menu Styles */
  $in['block_formats'] = 'Paragraph=p;Heading 2=h2;Heading 3=h3;Heading 4=h4;';
  /* ##### Pour le menu Formats, par exemple */
  /* ##### Voir codex https://codex.wordpress.org/TinyMCE_Custom_Styles ##### */
  $style_formats = array (
  array( 'title' => 'Paragraphe', 'block' => 'p'),
  array( 'title' => 'Titre', 'block' => 'h2'),
  array( 'title' => 'Sous-titre', 'block' => 'h3'),
  array( 'title' => 'Tarif', 'inline' => 'span', 'classes' => 'tarif'),
  array( 'title' => 'Code', 'block' => 'pre', 'wrapper' => true),
  array( 'title' => 'Bouton', 'selector' => 'a', 'classes' => 'bouton' ),
  array( 'title' => 'Cadre', 'block' => 'div', 'wrapper' => true, 'classes' => 'cadre' )
  );
  $in['style_formats'] = json_encode( $style_formats );
  $in['style_formats_merge'] = false;
  /* ##### Pour le tableau de couleurs */
  $custom_colours = '
  "e8541e", "Orange1", "f39c2c", "Orange2", "c0f000", "Vert", "ffffff", "Blanc", "000000", "Noir"
  ';
  $in['textcolor_map'] = '['.$custom_colours.']';
  /* ##### A garder dans tous les cas */
  return $in;
}
add_filter('tiny_mce_before_init', 'tinymce_filtre');

Pour autoriser certaines balises sans que TinyMCE les enlève automatiquement, comme les class par exemple :

Dans le fichier functions.php de votre thème, ajoutez :

function myextensionTinyMCE($init) {
  // Command separated string of extended elements
  $ext = 'a[accesskey|charset|class|contenteditable|contextmenu|coords|dir|download|draggable|dropzone|hidden|href|hreflang|id|lang|media|name|rel|rev|shape|spellcheck|style|tabindex|target|title|translate|type|onclick|onfocus|onblur]';
  // Add to extended_valid_elements if it alreay exists
  if ( isset( $init['extended_valid_elements'] ) ) {
  $init['extended_valid_elements'] .= ',' . $ext;
  } else {
  $init['extended_valid_elements'] = $ext;
  }
  // Super important: return $init!
  return $init;
}
add_filter('tiny_mce_before_init', 'myextensionTinyMCE' );

function override_mce_options($initArray) {
  $opts = '*[*]';
  $initArray['valid_elements'] = $opts;
  $initArray['extended_valid_elements'] = $opts;
  return $initArray;
}
add_filter('tiny_mce_before_init', 'override_mce_options');

IMPORTANT : VIDEZ VOTRE CACHE POUR VOIR LES EFFETS