In TinyMCE DIV-Container mit Absätzen (p) WordPress

DIV-Container mit Absätzen (p) in TinyMCE WordPress

25. November 2018

Zur einfachen Anpassung des WYSIWYG-Editors in WordPress nutze ich das Plugin TinyMCE Advanced. Darüber lässt sich leicht das Formate-Dropdown einblenden und an eine beliebige Stelle platzieren.

 

Ich hatte lange Zeit das Problem, dass ich darüber lediglich Block und Inline-Styles vorgeben konnte. Mein Ziel war aber darüber einen markierten Textbereich, der auch über mehrere Absätze gehen kann, mit einem DIV-Container zu umranden.

 

 

Zum Beispiel

Solch einen Block …

 

… mit Überschrift und mehreren Absätzen.

 

Endlich bin ich auf den entscheidenden Hinweis in der TinyMCE-Doku gestolpert. Man muss beim Konfigurieren der Styling-Formate das Flag wrapper auf true setzen.

 

Hier als Beispiel einmal die Konfiguration von DESIGNERZONE.DE (wird in der functions.php inkludiert):

 

PHP
add_filter('tiny_mce_before_init', 'wpse3882_tiny_mce_before_init');

function wpse3882_tiny_mce_before_init($settings)
{
  $settings['theme_advanced_blockformats'] = 'p,h1,h2,h3,h4';
  
  $style_formats = array(
    array(
      'title' => 'Panel (Info)',
      'block' => 'div',
      'classes' => 'panel panel-info',
      'wrapper' => true
    ),
    array(
      'title' => 'Panel (Erfolg)',
      'block' => 'div',
      'classes' => 'panel panel-success',
      'wrapper' => true
    )
  );

  $settings['style_formats'] = json_encode( $style_formats );

  return $settings;
}

Wenn man die Editor-Styles korrekt konfiguriert hat, erzielt man auch eine sehr schöne Darstellung beim Editieren in TinyMCE. Es ist fast so als würde man die echte Seite bearbeiten. Im nächsten Bild seht ihr das Ergebnis der obigen PHP-Konfiguration.

 

Kommentare

Sag uns deine Meinung! Jetzt antworten