WordPress: Javascript-Code interaktiv in einem Post ausführen (Teil 2)

Den ersten Teil dieses Beitrages habe ich bereits 2016 geschrieben. Damals hatte ich ein kleines WordPress-Plugin entwickelt, mit dem ich ausführbare Javascript-Codeboxen in meine WordPress-Seiten einbinden kann. Die Codeboxen hatte ich als einfache Textareas umgesetzt. Vor kurzem wollte ich die Textareas etwas komfortabler gestalten, nämlich mit Syntaxhighlighting, Zeilennummerierung und automatischer Einrückung.

Dabei bin ich auf den Editor CodeMirror gestoßen, der frei verwendbar ist und genau diese Anforderungen erfüllt. Im Folgenden möchte ich kurz beschreiben, wie ich mein Plugin mit diesem Editor aufbessern konnte.

1. Herunterladen des Editors

Der Editor kann von der CodeMirror-Webseite heruntergeladen werden. Aus dem heruntergeladenen Ordner habe ich drei Dateien entnommen:

• codemirror.css (aus dem Ordner "lib")
• codemirror.js (aus dem Ordner "lib")
• javascript.js (aus dem Ordner "mode/javascript")

Wenn Sie eine oder mehrere andere Programmiersprachen (z.B. xml, cobol, dart, ...) in den Codeboxen verwenden möchten, sollten Sie aus dem Ordner "mode" alle entsprechenden Dateien heraussuchen.

Hier sehen Sie die Ordnerstruktur meines Plugins. Im Ordner "mode" befindet sich die Datei "javascript.js".

2. Aktualisierung der PHP-Datei des Plugins

Mein Plugin enthält eine PHP-Datei "js_evalbox.php". Der Code bleibt im Wesentlichen so erhalten, wie ich es im ersten Teil des Beitrages beschrieben habe. Nur zwei Erweiterungen sind notwendig:

1. Die drei oben genannten CSS- und JS-Dateien des Editors müssen mit in die Skript-Warteschlange von WordPress eingereiht werden. Dies geschieht mit den Funktionen wp_enqueue_style bzw. wp_enqueue_script.
2. Jede vom Plugin generierte Textarea erhält von mir den Klassennamen "evalbox_code". Über diesen Klassennamen kann ich später die Textareas selektieren, die in einen CodeMirror-Editor umgewandelt werden sollen.

Hier sehen Sie den aktualisierten Code der PHP-Datei:

<?php

add_action( 'wp_enqueue_scripts', 'js_evalbox_enqueue_script' );

add_shortcode( 'evalbox', 'js_evalbox_shortcode' );

function js_evalbox_enqueue_script(){

	 wp_enqueue_script( 'js_evalbox', plugin_dir_url( __FILE__ ) . 'js_evalbox.js', array('jquery'));
 
	 wp_enqueue_style('codemirror_style', plugins_url('codemirror.css', __FILE__));
	 
	 wp_enqueue_script( 'codemirror', plugin_dir_url( __FILE__ ) . 'codemirror.js', array('jquery'));
	 wp_enqueue_script('mode_javascript', plugin_dir_url(__FILE__) . 'mode/javascript.js');   
}

function js_evalbox_shortcode($atts, $content = null ){

	$pull_quote_atts = shortcode_atts( array('size' => '300px'), $atts);

	$content2 = strip_tags($content);

	return '<div><textarea class="evalbox_code" style="width:100%;height:' . $pull_quote_atts['size'] . '">' . $content2 . '</textarea><input type="button" value="Ausführen" class="evalbox_button"></div>';
}

?>

3. Aktualisierung der Javascript-Datei des Plugins

Mein Plugin enthält eine Javascript-Datei mit dem Namen "js_evalbox.js". Hier findet eine wesentliche Erweiterung statt:

1. Mit einer forEach-Schleife gehe ich alle Textareas mit der Klasse "evalbox_code" durch.
2. Mit der Funktion CodeMirror.fromTextArea initialisiere ich den CodeMirror-Editor auf diesem HTML-Element. Mit den Konfigurationsparametern kann ich das Erscheinungsbild und die Sprache des Editors beeinflussen.
3. Ich nutze die Funktion indentLine, um jede Zeile eines Editors automatisch einzurücken.
4. Ich lege einen EventHandler für den Button fest, der zu einem bestimmten Editor gehört. Beim Anklicken des Buttons wird der Code des Editors mit der Funktion getValue abgerufen und evaluiert.
   
   Man sollte annehmen, dass sich das Button-Element im HTML-Baum direkt neben dem Textarea-Element befindet. CodeMirror fügt aber direkt nach der Textarea ein neues Div-Element ein, welches den eigentlichen Editor darstellt. Der Button ist dann also an der übernächsten Position neben dem Textarea-Element. Daher realisiere ich den Zugriff mit .next().next().
   
   Beachten Sie auch, wie die EventHandler-Funktion auf die Variable "editor" zugreift, die in der forEach-Schleife angelegt wird. Der Handler eines Buttons merkt sich also den Kontext, in dem er definiert wurde. Dadurch kann die Zuordnung zur passenden Textarea bequem hergestellt werden.
   
5. Zum Schluss frage ich die eingestellte Höhe der Textarea ab (die Höhe wurde im PHP-Code anhand des Parameters "size" festgelegt) und übertrage sie auf alle Editoren, d.h. auf alle (Div-)Elemente mit der Klasse "CodeMirror".

Hier finden Sie den vollständigen Code:

 jQuery(document).ready(function($) {
	 
	var areas = document.querySelectorAll(".evalbox_code");
	
	areas.forEach(function(area){
		
		var editor = CodeMirror.fromTextArea(area, {
		  value: area.value,
		  mode:  "javascript",
		  lineNumbers: true,
		  styleActiveLine: true,
		  matchBrackets: true
		});
		
		for (var i=0;i<editor.lineCount();i++) { editor.indentLine(i); }
		
		var n = $(area).next().next();
		
		n.click(function(){
	
			var content = editor.getValue();
			content.replace('<br />', '');
			content.replace('<br/>', '');
			eval(content);			
		});
	});

	var h = areas[0].style.height;	
	var codemirrors = document.querySelectorAll(".CodeMirror");	
	codemirrors.forEach(function(cm){
		cm.style.height = h;	
	});
 });

Zum Testen bearbeite ich einen WordPress-Post und füge folgenden ShortCode ein:

[evalbox size="100px"]
var x = 10;
x = x + 1;
alert(x);
[/evalbox]

Das Ergebnis können Sie hier unten gleich ausprobieren:

Das Schöne ist, dass nun auch Anführungszeichen ohne Codierung innerhalb des Editors verwendet werden können.