Coding | Webredaktion

Funktion um Codepassagen in WordPress beim Speichern automatisch zu escapen

code 944499

Theoretisch wird Code, den man in die visuelle Ansicht des Editors einfügt, “escaped”. Allerdings arbeite ich nicht mit dem visuellen Editor, sondern ziehe den Text-Editor vor (so sehe ich, was ich bekomme ;)). Ein Ergebnis, das der visuelle Editor liefert, entspricht bei Weitem nicht immer einer präsentablen Form. Je nach Code-Editor ist das, was man bekommt, wenn man Quellcode in der Zwischenablage speichert und in den visuellen WordPress-Editor einfügt, nicht nur reiner Quellcode, sondern auch HTML-Tags. Das andere Extrem ist, dass neben den Tags auch sämtliche Zeilenumbrüche fehlen, die im Text-Editor jedoch erhalten bleiben.

Einfügen von Quellcode in den Text-Editor bedeutet allerdings, sämtliche Tags werden als solche interpretiert und als HTML interpretiert und gespeichert (dabei geht unter, was nicht html-ist), also im Content nicht dargestellt. Ich könnte sie manuell “escapen” oder vorher mit Suchen und Ersetzen aufbereiten, was allerdings unzuverlässig ist, und vor allem bei längeren Abschnitten mühsam.

Wunschvorstellung: Snippet aus dem Code-Editor kopieren, in den Text-Editor von WordPress einfügen, speichern, fertig. Wenn jemand ein Snippet kopiert, soll er es in einer Form bekommen, die er direkt in seinem Code-Editor übernehmen kann, und nicht einen Codeabschnitt, der aus => =%gt; macht, und daher im Code-Editor nachbearbeitet werden muss..

Nun darf aber nicht alles was ich schreibe, escaped werden, sonst könnte ich kein HTML mehr verwenden. Es soll nur für Inhaltsabschnitte gelten, die als Code ausgezeichnet sind. Über den content_save_pre-Filter werden entsprechende Passagen vor dem Speichern mit preg_replace_callback durch ihre escapte Version ersetzt.

Voila

/*
 * automatically escape code inside code tags
 */
function flxo_escape_code( $source ) {

	$escape = preg_replace_callback('/<pre><code(.*?)>(.*?)<\/code><\/pre>/ims',
		
	function( $matches ){
		$matches[2] = preg_replace(
		array("/^[\r|\n]+/i", "/[\r|\n]+$/i"), "",
		$matches[2]);
		return "<pre><code" . $matches[1] . ">" . esc_html( $matches[2] ) . "</code></pre>";
	}, $source );

	return $escape;

}
add_filter( 'content_save_pre', 'flxo_escape_code', 10, 1 );

Einzig eine code-pre Endetag-Kombination im Codebeispiel muss allerdings manuell escaped werden, damit es nicht für das Ende des Codeabschnitts gehalten wird.

Hinweis:: Noch hoch experimentell

weiter schmökern

Schreibe einen Kommentar

Bitte Kommentarfunktion nicht für Supportanfragen nutzen. Dem kann hier nicht entsprochen werden.

Deine E-Mail-Adresse wird nicht veröffentlicht.