So einfach erweiterst du den TinyMCE Editor für WordPress.

Der TinyMCE Edi­tor lässt sich in Word­Press unkom­pli­ziert um wei­te­re Schalt­flä­chen und Tools erwei­tern. Dadurch kannst du Short­codes und vor­ge­fer­tig­te HTML Struk­tu­ren auf Knopf­druck in die Sei­te ein­bau­en.

Um den TinyMCE Edi­tor zu erwei­tern, müs­sen wir zwei Schrit­te durch­füh­ren:

1. Die Funk­ti­on der Erwei­te­rung in Java­Script hin­ter­le­gen.
2. Die Erwei­te­rung mit PHP und Word­Press Hooks regis­trie­ren.

Vorbereitungen treffen #

Wech­sel in das Child-The­­me Ver­zeich­nis und erstel­le dort die benö­tig­ten Datei­en:

• CustomTinyMCEButton.js
• CustomTinyMCEButton.php

Sobald du die Datei­en erstellt hast, müs­sen wir die “CutomTinyMCEButton.php” in die “functions.php” des Child-The­­mes ein­bin­den. Öff­ne hier­zu die “functions.php” und füge fol­gen­de Zei­le am Ende der Datei hin­zu:

require_once('CustomTinyMCEButton.php');

Registrieren der Erweiterung mit PHP. #

Öff­ne die “CustomTinyMCEButton.php”. Wir müs­sen nun unse­re Erwei­te­rung in die Tool­bar des TinyMCE Edi­tors inte­grie­ren und anschlie­ßend sicher­stel­len das unse­re Java­­Script-Datei, wel­che die Funk­ti­on der Erwei­te­rung ent­hält, gela­den wird. In Word­Press kön­nen wir hier­für bequem auf die dafür ange­leg­ten Fil­ter zurück­grei­fen:

• mce_external_plugins
• mce_buttons

Erstel­len wir nun die Funk­tio­nen die von den Fil­tern genutzt wer­den kön­nen.

register_customTinyMCEButton

Die­se Funk­ti­on sorgt dafür, das unse­re Erwei­te­rung spä­ter in der gewünsch­ten Tool­bar ange­zeigt wird.

function register_customTinyMCEButton( $buttons ) {
	$buttons[] = 'customTinyMCEButton';
	return $buttons;
}

Alter­na­tiv kön­nen wir auch direkt fest­le­gen, an wel­cher Posi­ti­on die Erwei­te­rung spä­ter ange­zeigt wer­den soll.

function register_customTinyMCEButton( $buttons ) {
	array_splice( $buttons, 4, 0, 'customTinyMCEButton' );
	return $buttons;
}

Jetzt wird die Erwei­te­rung an Posi­ti­on 4 in der Tool­bar ein­ge­fügt.

set_customTinyMCEButtonJS

Damit unse­re Erwei­te­rung spä­ter die Funk­ti­on unse­rer Java­Script Datei aus­führt, müs­sen wir die­se noch ein­bin­den.

function set_customTinyMCEButtonJS( $plugin_array ) {
	$plugin_array['customTinyMCEButton'] = get_stylesheet_directory_uri() . '/CustomTinyMCEButton/CustomTinyMCEButton.js';

	return $plugin_array;
}

Zu guter Letzt packen wir das gan­ze noch zusam­men und stel­len sicher, das nur berech­tig­te Benut­zer unse­re Erwei­te­rung auch ver­wen­den kön­nen.

add_action( 'after_setup_theme', 'setup_customTinyMCEButton' );

function setup_customTinyMCEButton() {
	if ( ! current_user_can( 'edit_posts' ) && ! current_user_can( 'edit_pages' ) ) {
		return;
	}
	if ( get_user_option( 'rich_editing' ) !== 'true' ) {
		return;
	}

	add_filter( 'mce_external_plugins', 'set_customTinyMCEButtonJS' );
	add_filter( 'mce_buttons', 'register_customTinyMCEButton', 9999999 );
}

Damit hät­ten wir die Ser­ver­sei­ti­gen Anfor­de­run­gen abge­schlos­sen.

Hinzufügen der Funktionalität mit JavaScript #

Wir haben zwar unse­re Erwei­te­rung nun regis­triert, aber damit der TinyMCE Edi­tor auch weiß, was für eine Erwei­te­rung wir den erstel­len möch­ten, müs­sen wir das über Java­Script noch defi­nie­ren. Auch hier­für gibt es bereits Funk­tio­nen, auf die wir zugrei­fen kön­nen. Füge den fol­gen­den Code in dei­ne “CutomTinyMCEButton.js” ein.

(function () {
    tinymce.PluginManager.add('customTinyMCEButton', function (editor, url) {
        // Add Button to Visual Editor Toolbar
        editor.addButton('customTinyMCEButton', {
            title: 'Liste hinzufügen',
            cmd: 'customTinyMCEButtonCallback',
            icon: 'mce-ico mce-i-bullist',
            tooltip: 'Aufzählungsliste'
        });
        editor.addCommand('customTinyMCEButtonCallback', function () {
            var selected_text = editor.selection.getContent({
                'format': 'html'
            });

            var return_text = '<ul class="list-white"><li>' + selected_text + '</li></ul>';

            editor.execCommand('mceReplaceContent', false, return_text);
        });
    });
})();

Las uns den Code nun etwas genau­er betrach­ten.

tinymce.PluginManager.add('customTinyMCEButton', function (editor, url) {});

Zunächst tei­len wir dem Plug­in­Ma­na­ger mit, das es eine neue Erwei­te­rung gibt die wir “cutom­Ti­nyMCE­But­ton” genannt haben. Hier soll­test du dar­auf ach­ten, das du den­sel­ben Namen ver­wen­dest, den du auch in PHP ange­ge­ben hast.

editor.addButton('customTinyMCEButton', {
    title: 'Liste hinzufügen',
    cmd: 'customTinyMCEButtonCallback',
    icon: 'mce-ico mce-i-bullist',
    tooltip: 'Aufzählungsliste'
});

In unse­rer “Call­back” Funk­ti­on tei­len wir dann dem “edi­tor” mit, das es sich bei der Erwei­te­rung um einen But­ton han­delt. Hier­bei kön­nen wir ver­schie­de­ne Para­me­ter über­ge­ben, wir haben uns hier­bei auf die rele­van­tes­ten begrenzt. Wich­tig ist letzt­end­lich die fol­gen­de Zei­le:

 cmd: 'customTinyMCEButtonCallback',

Die­se gibt an, wel­cher “Com­mand” auf­ge­ru­fen wer­den soll, wenn der But­ton geklickt wur­de.

editor.addCommand('customTinyMCEButtonCallback', function () {
    var selected_text = editor.selection.getContent({
        'format': 'html'
    });

    var return_text = '<ul class="list-white"><li>' + selected_text + '</li></ul>';

    editor.execCommand('mceReplaceContent', false, return_text);
});

Mit “addCom­mand” kön­nen wir dem Edi­tor neue Kom­man­dos über­ge­ben. Wie du siehst über­ge­ben wir hier den String “cus­tom­Ti­nyMCE­But­ton­Call­back”, den wir zuvor ange­ge­ben haben.

Nun wird bei jedem Klick auf die Schalt­flä­che unse­re Funk­ti­on auf­ge­ru­fen. Wir kön­nen dort nun alles Mög­li­che hin­ter­le­gen. In unse­rem Bei­spiel erstel­len wir eine Lis­te, der wir eine eige­ne Klas­se über­ge­ben und fügen die­se dann in den Edi­tor ein.

Sobald wir nun das Word­Press Backend auf­ru­fen, kön­nen wir unse­re neue Schalt­flä­che im TinyMCE Edi­tor sehen.

Der komplette Code #

CustomTinyMCEButton.php

add_action( 'after_setup_theme', 'setup_customTinyMCEButton' );

function setup_customTinyMCEButton() {
	if ( ! current_user_can( 'edit_posts' ) && ! current_user_can( 'edit_pages' ) ) {
		return;
	}
	if ( get_user_option( 'rich_editing' ) !== 'true' ) {
		return;
	}

	add_filter( 'mce_external_plugins', 'set_customTinyMCEButtonJS' );
	add_filter( 'mce_buttons', 'register_customTinyMCEButton', 9999999 );
}

function register_customTinyMCEButton( $buttons ) {
	array_splice( $buttons, 4, 0, 'customTinyMCEButton' );
	return $buttons;
}

function set_customTinyMCEButtonJS( $plugin_array ) {
	$plugin_array['customTinyMCEButton'] = get_stylesheet_directory_uri() . '/CustomTinyMCEButton/CustomTinyMCEButton.js';

	return $plugin_array;
}

CustomTinyMCEButton.js

(function () {
    tinymce.PluginManager.add('customTinyMCEButton', function (editor, url) {
        // Add Button to Visual Editor Toolbar
        editor.addButton('customTinyMCEButton', {
            title: 'Liste hinzufügen',
            cmd: 'customTinyMCEButtonCallback',
            icon: 'mce-ico mce-i-bullist',
            tooltip: 'Aufzählungsliste'
        });
        editor.addCommand('customTinyMCEButtonCallback', function () {
            var selected_text = editor.selection.getContent({
                'format': 'html'
            });

            var return_text = '<ul class="list-white"><li>' + selected_text + '</li></ul>';

            editor.execCommand('mceReplaceContent', false, return_text);
        });
    });
})();

Fazit #

Wie du siehst ist es auch ohne Exper­ten­wis­sen in der Web­ent­wick­lung mög­lich, neue But­tons in Word­Press für den TinyMCE Edi­tor hin­zu­zu­fü­gen.

Ich hof­fe, die­ser Arti­kel war hilf­reich für dich. Hast du bereits ein­mal den TinyMCE Edi­tor erwei­tert? Was hast du schon alles damit ange­stellt?