Frank hat auf WordPress Deutschland schon vom neuen Editor in WordPress 3.3 berichtet. Die Verwendung der Klasse WP_Editor ist mit der Funktion wp_editor() denkbar einfach. Im einfachsten Fall übergibt man der Funktion einen String für den Content und eine ID für die Textarea. Beide Angaben sind Pflichtangaben, einen leeren Editor – was wohl die Standardsituation sein dürfte – muss man also mit der Übergabe eines leeren Strings oder ein Boolean FALSE erzwingen.
Die genaue Konfiguration der Editor-Klasse soll aber nicht Gegenstand des Beitrages sein. Denn beim Testen der neuen Editor-Klasse bin ich auf ein ganz anderes Problem gestoßen zu dem ich hier ein paar Worte schreiben will.
Mein Wunsch war es nämlich, den Editor in einer Thickbox zu öffnen, dazu sollte der Editor mittels einem Ajax-Request in die Thickbox geladen werden. Was auf den ersten Blick recht simple erscheint, birgt ein paar Stolperfallen in sich. Denn der alleinige Aufruf von wp_editor() erzeugt zwar das benötigte HTML, jedoch nicht die ebenfalls benötigten JavaScripte.
Die Ausgangssituation ist folgende: Ich habe für den TinyMCE ein Plugin welches eine Thickbox öffnet und den Inhalt der Datei editor_popup.php in die Thickbox lädt. Die Datei editor_popup.php hat anfangs folgenden schlichten Inhalt:
<?php
// get wp-load
$abspath = isset( $_GET['abspath'] ) ? $_GET['abspath'] : '';
if( '' != $abspath )
require_once $abspath.'/wp-load.php';
else
die('No abspath submitted!');
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Thickbox test</title>
</head>
<body>
<div id="editorwrapper">
<form action="display.php" method="get" target="_blank">
<?php
wp_editor( '<p>Some more content</p>', 'editortest' );
?>
<input type="submit" value="Submit" />
</form>
</div>
</body>
</html>
Den ABSPATH übergebe ich als GET-Request, somit ist es ein Leichtes wp-load.php einzubinden um an die WordPress-Funktionen zu gelangen. Der Rest ist ein bisschen HTML und der Aufruf der Funktion wp_editor().
Dies führte jedoch zu keinem Ergebnis, denn es fehlt so ziemlich alles an JavaScript was benötigt wird damit der Editor überhaupt betriebsbereit ist.
Schaut man sich die Klasse WP_Editor einmal etwas genauer an, so findet man zwei Methoden die das Einbinden und die Ausgabe des benötigten JavaScriptes übernehmen. Dies sind zum einen enqueue_scripts() und editor_js(). Diese Methoden übernehmen die Ausgabe bzw. das Einreihen des benötigten JavaScriptes und werden in den Hooks ‘admin_print_footer_scripts‘ / ‘wp_print_footer_scripts‘ bzw. ‘admin_footer‘ und ‘wp_footer‘ eingehakt.
Da wir in unserer Testseite weder den einen noch den anderen Hook automatisch ausführen, müssen wir dies von Hand machen. Dazu fügen wir einfach vor dem schließenden </body> ein <?php do_action( 'wp_footer' ); ?> ein. Um noch das passende Loook&Feel von WordPress zu bekommen, nutzen wir das Admin-CSS und optional noch z.B. das Stylesheet ‘colors-fresh‘ um ein paar Buttons zu stylen.
<?php add_filter( 'show_admin_bar', '__return_false' ); $styles = array( 'wp-admin', 'colors-fresh' ); wp_print_styles( $styles ); ?>
Dieser Code kommt vor dem schließenden </head>. Nebenbei habe ich noch die Admin-Bar entfernt, da diese in einem kleinen Popup eher suboptimal dargestellt wird und obendrein eher nutzlos ist.
Et voilá! Da ist der funktionierende Editor. Und hier noch einmal das komplette Script zusammen:
<?php
// get wp-load
$abspath = isset( $_GET['abspath'] ) ? $_GET['abspath'] : '';
if( '' != $abspath )
require_once $abspath.'/wp-load.php';
else
die('No abspath submitted!');
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Thickbox test</title>
<?php
add_filter( 'show_admin_bar', '__return_false' );
$styles = array( 'wp-admin', 'colors-fresh' );
wp_print_styles( $styles );
?>
</head>
<body>
<div id="editorwrapper">
<form action="display.php" method="get" target="_blank">
<?php
wp_editor( '<p>Some content</p>', 'editortest' ); //, $settings );
?>
<input type="submit" value="Submit" />
</form>
</div>
<?php
do_action( 'wp_footer' );
?>
</body>
</html>
Wenn wir dieses Script nun in der Datei wp-content/plugins/editor_popup.php abspeichern, dann können wir sie z.B. mit http://example.com/wp-content/plugins/editor_popup.php?abspath=c:/htdocs/wordpress in einem Ajax-Request aufrufen und z.B. in einer Thickbox darstellen.
Wie man dann den Editor an seine Bedürfnisse anpasst, ist genug Stoff für einen eigenen Artikel. Ich hoffe dem einen oder anderen schon vor Erscheinen von WordPress 3.3 eine kleine Hilfe gegeben zu haben wie man solch ein Problem lösen kann.
Keine Trackbacks
Ein Kommentar
Definitiv! Danke!