Get Adobe Flash player

WordPress Backend Editor TinyMCE im Frontend einbinden

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();
			}
		}
	}
}
Copy&Paste Fehler
Leider verursacht mein Chache Plugin ein Problem und ändert gewissen Code oben! So wird aus:

return get_option('siteurl') . 'wp-includes/

Einfach folgender Code:

return get_option('siteurl') . 'http://bimg2.murawski.ch/wp-includes/

Was fatal ist für Copy&Paste versuche. Die Klasse wurde zum Download am Artikelende angehängt!

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.
TinyMCE WordPress Editor Frontent

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!

Weitere interessante Beiträge:

2 Kommentare zu „WordPress Backend Editor TinyMCE im Frontend einbinden“

  • avatar Jürgen Baums:

    Lieber IT Nerd,

    eine Bitte: Was bedeutet der Hinweis:

    Kann man mit folgendem Code den Editor für die Felder laden:
    [wuktinymce fields="feld1,feld2"]

    Die Klasse habe ich in ein Plugin eingefügt und den Feldnamen ermittelt. So weit, so gut. Aber wo wird dieser Shortcode eingefügt? Es funktioniert nicht, wenn ich den in der Seite einfüge, auf der der Editor erscheinen sollte.

    Viele Grüße
    Jürgen

  • du hast ja diverse textarea’s definiert nehme ich an auf der Seite.
    z.B.

    <textarea name="test1" id="test1"></textarea>
    <textarea name="test2" id="test2"></textarea>

    Dann musst du auf deiner Seite

    [wuktinymce fields="test1,test2"]

    einfügen, dann werden die textarea umgewandelt zu dem TinyMCE Editor.
    Selbstverständlich nur wenn nicht irgendein anderes Plugin das Standard jQuery von WordPress überschreibt.

Kommentieren

This Blog will give regular Commentators DoFollow Status. Implemented from IT Blögg

eMail-Benachrichtigung bei weiteren Kommentaren.
Auch möglich: Abo ohne Kommentar.