blog.bartlweb - a technologist's external brain

Funktionsumfang und Stile des RTE-Editors von WordPress anpassen

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');

Dieser Artikel hat Dir deinen Tag gerettet?

... und mühevolles Probieren, Recherchieren und damit Stunden an Zeit gespart? Oder einfach nur Dein Problem gelöst?

Dann würde ich mich freuen, wenn Du meine Zeit für die Erstellung dieses Blogartikels mit einer kleinen Anerkennung honorierst:

Zahlung mit PayPal oder Kreditkarte.

Hinweis zur Verwendung

Die Übermittlung einer Zahlung ist eine persönliche Anerkennung Ihrerseits an den Entwickler (Christian Bartl, Privatperson). Eine Zahlung ist nicht zweckgebunden und es ist keine Gegenleistung zu erwarten. Bitte beachten Sie, dass für eine übermittelte Zahlung keine Quittung ausgestellt werden kann.

Über den Autor

Christian Bartl

Christian Bartl Requirements Engineer
& Solution Architect für Online und Mobile

Als Technologie-Enthusiast und begeisterter Programmierer entwickle ich in meiner Freizeit Websites, Software und IT-Lösungen, die mir selbst und anderen den Alltag vereinfachen.

mehr auf christian.bartl.me

Kommentare

Noch kein Kommentar vorhanden.
Sei der Erste! - Ich freue mich über deine Anmerkung, Kritik oder Frage.

Kommentar schreiben

Der hier angegebene Name wird gemeinsam mit deinem Kommentar auf der Website veröffentlicht.

Deine E-Mail-Adresse wird zur einmaligen Benachrichtigung bei Veröffentlichung des Kommentars genutzt.

Benachrichtigung per E-Mail über Antworten auf meinen Kommentar erhalten.

Bitte tippe die Zahlenkombination "8128" ein, nur dann kann ich deinen Kommentar entgegennehmen.

Bitte fülle dieses Feld nicht aus, nur dann kann ich deinen Kommentar entgegennehmen.