Der RTE-Editor von WordPress ermöglicht es Redakteuren komfortabel und einfach Beträge zu erstellen und vor allem ohne HTML-Kenntnisse zu formatieren. Doch selten sind die vordefinierten Formatierungsmöglichkeiten ausreichend und noch viel weniger ist es ratsam den geballten Umfang an Funktionen und Möglichkeiten zur Formatierung des integrierten Editors anzubieten.

Mit etwas eigenem Code in der Datei functions.php des geladenen WordPress-Templates lässt sich der Editor an die eigenen Bedürfnisse anpassen.

Eigene Stile definieren

Der erste Schritt ist den Redakteuren sinnvolle Stile anzubieten und daher die standardmäßig angebotenen Stile auf die tatsächlich durch das WordPress-Template bereitgestellten CSS-Stile zu limitieren.

Der folgende Code-Block zeigt wie eine Einschränkung dieses Stil-Angebots auf Absätze (Paragraphs <p>) und die Überschriften 1.-3. Ordnung erreicht wird. Zusätzlich werden die Überschriften 1-3 auf die HTML-Elemente H2-H4 gemappt, um in Verbindung mit dem automatisch als H1 eingebunden Titel des Artikel bzw. der Seite eine saubere hierarchische Überschriftenstruktur zu erreichen.

function editorRemoveUnusedFormats($init) {
  // Add block format elements you want to show in dropdown
  $init['block_formats'] = 'Paragraph=p;Heading 1 <h2>=h2;Heading 2 <h3>=h3;Heading 3 <h4>=h4;';
  return $init;
}
add_filter('tiny_mce_before_init', 'editorRemoveUnusedFormats');

Zusätzlich dazu können eigene Stile definiert werden:
Dazu unterscheidet man zwischen Blockformaten zum Formatieren ganzer Absätze und Inlineformaten zum Formatieren von Wörtern innerhalb eines Absatzes.

Die beiden oberen Konfigurationsblöcke des unteren Beispiels zeigen Textstile für Absätze und bewirken das Hinzufügen einer CSS-Klasse zum jeweiligen Absatz (<p>). Die beiden unteren Konfigurationen dienen der Inline-Formatierung und umschließen den markierten Text mit <span>-Tags denen jeweils eine CSS-Klasse zugewiesen wird.

Selbstredend ist es natürlich notwendig sowohl im Stylesheet des Editors als auch des Frontends die hier angegebenen CSS-Klassen entsprechend zu definieren.

function editorAddCustomStyles($init_array) {
  $style_formats = array(
    array(
      'title' => 'Code (block)',
      'block' => 'p',
      'classes' => 'code'
    ),
    array(
      'title' => 'Cite (block)',
      'block' => 'p',
      'classes' => 'cite'
    ),
    array(
      'title' => 'Code (inline)',
      'inline' => 'span',
      'classes' => 'code'
    ),
    array(
      'title' => 'Cite (inline)',
      'inline' => 'span',
      'classes' => 'cite'
    ),
  );

  $init_array['style_formats'] = json_encode( $style_formats );
  return $init_array;
}

add_filter('tiny_mce_before_init', 'editorAddCustomStyles');

Ein eigenes CSS einbinden

Damit Redakteure bereits im Editor die Textformatierung des Frontend betrachten können, kann im Editor ein eigenes CSS-File eingebunden werden. Diese CSS-Datei sollte dann alle angebotenen Textformatierungen und Stile beinhalten.

function editorCustomStylesheet() {
  add_editor_style('css/rte/editor.css');
}
add_action('init', 'editorCustomStylesheet');

Buttons und Funktionen konfigurieren

Zuletzt sollten im Editor nur jene Funktionen angeboten werden die in Zusammenspiel mit den zu erwartenden Inhalten und dem verwendeten Template auch wirklich sinnvoll sind. Vor allem Textformatierungen sollten vorrangig ausschließlich über CSS-Stile und nicht über für den Redakteur frei nutzbare Formatierungsmöglichkeiten angeboten werden - so wird einem Wildwuchs von Formatierungen auf der Website vorgebeugt und ein einheitliches Erscheinungsbild garantiert.

Der untere Beispielcode zeigt eine auf die Grundbasis abgespeckte Variante des Editors, der dem Redakteur abseits der angebotenen Stile nur mehr die notwendigsten Möglichkeiten zur Formatierung bietet.

Die für die Konfiguration notwendigen Bezeichnungen der verfügbaren Buttons und Funktionen lassen sich über die Dokumentation von TinyMCE (dem in WordPress verwendeten RTE-Editor) ermitteln: www.tinymce.com/docs-3x/reference/buttons/

function editorConfigureButtons($buttons) {
  $newbuttons = array(
    'formatselect',
    'styleselect',
    'blockquote',
    '|',
    'bold',
    'italic',
    'strikethrough',
    '|',
    'bullist',
    'numlist',
    '|',
    'link',
    'unlink',
    '|',
    'removeformat',
    'pastetext',
    '|',
    end($buttons),
  );
  return $newbuttons;
}

add_filter('mce_buttons', 'editorConfigureButtons');