Bearbeiten Sie die TinyMCE-Tastenfunktionalität

Wie kann ich die function “Rechtsbündig ausrichten” in WordPress ‘TinyMCE bearbeiten, um eine class “alignright” anstelle von “style =’ text-align: right ‘” für Text hinzuzufügen.

TinyMCE hat diese functionalität bereits, aber diese class wird nur Bildern und anderen Elementen hinzugefügt, aber nicht div, p, spam usw.

Solutions Collecting From Web of "Bearbeiten Sie die TinyMCE-Tastenfunktionalität"

Verschiedene Zwecke

Die class alignright wird für Floating-Elemente verwendet, während die Schaltfläche “Align Right” TinyMCE zum Ändern der alignright dient. Das sind eigentlich grundlegend verschiedene Dinge. Wenn die Schaltfläche so funktioniert, wie Sie sie beschrieben haben, verhalten sich entweder ein Text oder Bilder nicht wie erwartet.

Lösung

Stattdessen würde ich empfehlen, dass Sie über das styleselect eine class hinzufügen, die auf verschiedene Elemente angewendet werden kann. (Ich habe gerade ein Plugin veröffentlicht , das dies ein wenig einfacher macht, aber ich werde hier benutzerdefinierten Code verwenden. Eine Sache, die das Plugin tut, ist, die ähnliche formatselect durch die styleselect .)

Zuerst müssen Sie die styleselect zum Menü hinzufügen. Wenn du es in der ersten Reihe haben wolltest, wäre es so:

 add_filter( 'mce_buttons', 'wpse180367_mce_buttons_1' ); function wpse180367_mce_buttons_1( $buttons ) { $buttons[] = 'styleselect'; } 

Als nächstes müssten Sie die gewünschte class registrieren und die Arten von Elementen definieren, auf die sie angewendet werden kann (dies wirkt sich stark auf ihr Verhalten aus):

 add_filter( 'tiny_mce_before_init', 'wpse180367_mce_init' ); function wpse180367_mce_init( $args ) { $style_formats = array( array( 'title' => '"Align Right"', 'class' => 'alignright', 'block' => 'p', // this class will always be applied to a 

element. I don't know if you can specify multiple blocks. You could see what happens if you omit it too. ), ); $args['style_formats'] = json_encode( $style_formats ); return $args }

Schließlich müssen Sie sicherstellen, dass Ihr editor-style.css eine editor-style.css Datei verwendet (registriert über add_editor_style() ), damit Elemente tatsächlich der class im Editor folgen. Ich nehme an, Sie haben so etwas im Sinn:

 .alignright { /* you might want to qualify" this to one element egpalignright */ float: right; clear: right; /* I often do this but up to you */ margin: 0 0 20px 20px; } 

* All dieser Code ist nicht getestet, aber ich bin ziemlich zuversichtlich, dass es meistens funktioniert … 🙂

Links zur Referenz