WordPress nutzt TinyMCE im Backend als Editor.
Wer nun den Editor auch im Frontend nutzen möchte, wird auf mehrere Probleme stossen.
Zum Einen ist der Editor extrem an WordPress angepasst worden was eine einfache Einbindung sehr erschwert. Weiterhin ist dieser an diversen Orten tief eingegraben welche die Einbindung verhindern.
Sucht man per Google, wird man diverse Ansätze zur Einbindung finden, doch keine fertige und funktionsfähige Lösung. Da ich dies aber benötigte, habe ich mich hingesetzt und eine eigene Lösung zusammengebaut.
Damit die Einbindung so einfach wie möglich ist, habe ich daraus eine PHP Klasse gemacht:
if (!class_exists('wuk_tinymce')) {
class wuk_tinymce {
var $mce_locale;
function wuk_tinymce() {
$this->mce_locale = ( '' == get_locale() ) ? 'en' : strtolower( substr(get_locale(), 0, 2) );
add_action('template_redirect', array( &$this, 'tinymce_loadCoreJS'));
add_shortcode('wuktinymce', array(&$this,'timymce_wuk'));
}
function tinymce_wuk() {
extract(shortcode_atts(array('fields' => '', 'html' => '0', 'initArray' => ''), $atts));
if ($fields != '') {
$this->tinymce_getInitJS($allefelder,$htmleditor,$initArray);
}
}
function tinymce_getcss() {
if ($this->tinymce_isGreaterThan('2.8.0')) {
return get_option('siteurl') . '/wp-includes/js/tinymce/themes/advanced/skins/wp_theme/content.css';
}
elseif ($this->tinymce_isGreaterThan('2.5.0')) {
return get_option('siteurl') . '/wp-includes/js/tinymce/wordpress.css';
}
else {
return get_option('siteurl') . '/wp-includes/js/tinymce/plugins/wordpress/wordpress.css';
}
}
function tinymce_isGreaterThan($ver) {
global $wp_version;
if ($wp_version == 'abc') return true;
list($Cmajor, $Cminor, $Crev) = explode('.', $ver);
list($major, $minor, $rev) = explode('.', $wp_version);
if ($major < $Cmajor) return false;
if ($minor < $Cminor) return false;
return true;
}
function tinymce_loadCoreJS() {
wp_enqueue_script('tiny_mce', get_option('siteurl') . '/wp-includes/js/tinymce/tiny_mce.js', false, '20081129');
wp_enqueue_script('tiny_mce_lang', get_option('siteurl') . '/wp-includes/js/tinymce/langs/wp-langs-' . $this->mce_locale . '.js', false, '20081129');
//wp_deregister_script('comment-reply');
//wp_enqueue_script( 'comment-reply', get_option('siteurl') . '/wp-content/plugins/' . plugin_basename ( dirname ( __FILE__ ) ) . "/comment-reply.dev.js", false, '20090102');
}
function tinymce_getInitJS($wct_elements,$htmlview = '0', $initArray='') {
if ($wct_elements == '') { return false; }
if ($initArray == '') {
if ($htmlview == '1') { $htmlview = ",|,code"; } else { $htmlview = ''; }
$initArray = array (
'mode' => 'exact',
'elements' => $wct_elements,
'theme' => 'advanced',
'theme_advanced_buttons1' => 'bold,italic,underline,strikethrough,forecolor,backcolor,|,bullist,numlist,|,outdent,indent,|,removeformat',
'theme_advanced_buttons2' => 'undo,redo,|,link,unlink,|,hr,sub,sup,|,charmap'.$htmlview,
'theme_advanced_buttons3' => '',
'theme_advanced_toolbar_location' => "top",
'theme_advanced_toolbar_align' => "left",
'theme_advanced_statusbar_location' => 'bottom',
'theme_advanced_resizing' => true,
'theme_advanced_resize_horizontal' => true,
'theme_advanced_disable' => '',
'force_p_newlines' => false,
'force_br_newlines' => true,
'forced_root_block' => "p",
'gecko_spellcheck' => true,
'skin' => 'default',
'content_css' => $this->tinymce_getcss(),
'directionality' => 'ltr',
'save_callback' => "brstonewline",
'entity_encoding' => "raw",
'plugins' => $tinymce_options['plugins'],
'language' => $this->mce_locale,
);
}
else {
$initArray['elements'] = $wct_elements;
}
$params = array();
foreach ( $initArray as $k => $v ) { $params[] = $k . ':"' . $v . '" '; }
$res = join(',', $params);
echo "<script type=\"text/javascript\">
function brstonewline(element_id, html, body) {
html = html.replace(/<br\\s*\\/>/gi, \"\\n\");
return html;
}
function insertHTML(html) {
tinyMCE.execCommand(\"mceInsertContent\",false, html);
}
tinyMCEPreInit = {
base : \"". get_option('siteurl') ."/wp-includes/js/tinymce\",
suffix : \"\",
query : \"ver=20081129\",
mceInit : {". $res ."},
go : function() {
var t = this, sl = tinymce.ScriptLoader, ln = t.mceInit.language, th = t.mceInit.theme, pl = t.mceInit.plugins;
sl.markDone(t.base + '/langs/' + ln + '.js');
sl.markDone(t.base + '/themes/' + th + '/langs/' + ln + '.js');
sl.markDone(t.base + '/themes/' + th + '/langs/' + ln + '_dlg.js');
tinymce.each(pl.split(','), function(n) {
if (n && n.charAt(0) != '-') {
sl.markDone(t.base + '/plugins/' + n + '/langs/' + ln + '.js');
sl.markDone(t.base + '/plugins/' + n + '/langs/' + ln + '_dlg.js');
}
});
},
load_ext : function(url,lang) {
var sl = tinymce.ScriptLoader;
sl.markDone(url + '/langs/' + lang + '.js');
sl.markDone(url + '/langs/' + lang + '_dlg.js');
}
};
var subBtn = document.getElementById(\"submit\");
if (subBtn != null) {
subBtn.onclick=function() {
var inst = tinyMCE.getInstanceById(\"comment\");
document.getElementById(\"comment\").value = inst.getContent();
document.getElementById(\"commentform\").submit();
return false;
}
}
tinyMCEPreInit.go();
tinyMCE.init(tinyMCEPreInit.mceInit);
</script>";
}
}
$sss = get_option('wuk_custom_tables');
if (is_array($sss)) {
if ($sss['form_serial'] != '') {
add_action('init', 'wuk_tinymce1');
function wuk_tinymce1() {
global $wuk_tinymce;
$wuk_tinymce = new wuk_tinymce();
}
}
}
}
Diese Klasse kann man in eine Plugindatei kopieren und das Plugin laden.
Auf dem Frontend kann man nun die diversen ‚textarea‘ Felder ausgeben und mert sich die ID’s.
Zum Beispiel man hat:
<textarea name="feld1" id="feld1"> irgendwelcher text </textarea>
<textarea name="feld2" id="feld2"> irgendwelcher text </textarea>
Kann man mit folgendem Code den Editor für die Felder laden:
[wuktinymce fields="feld1,feld2"]
Bereits anschliessend werden die Felder mit dem TinyMCE Editor angezeigt.
Auch weitere Optionen sind bei der Klasse möglich. Als 2te Option kann man angeben, ob man HTML code direkt bearbeiten darf oder nicht (1 oder 0). Wer noch mehr möchte, kann komplett alle Optionen vom TinyMCE (z.B. welche Plugins geladen werden oder Buttons gezeigt werden) per $initArray ändern:
[wuktinymce fields="feld1,feld2" html="1" initArray=""]
Mit den nun vorhandenen Möglichkeiten könnte man den Editor absolut identisch aufbauen oder sogar noch den Umfang erweitern.
Download der Klasse hier: wuk_tinymce.phps
Das Standard initArray habe ich oben in der Klasse markiert (Zeile 45 bis 69) damit ihr wisst was alles zu übermitteln wäre.
Viel Spass!
