Key Takeaways

• Der visuelle Editor von WordPress, der vom Tinymce -Editor -Steuerelement angetrieben wird, kann so angepasst werden, dass eindeutige Funktionen hinzugefügt werden, z.
Um benutzerdefinierte Funktionen hinzuzufügen, müssen Sie in Ihrer WordPress -Website ein Tinymce -Plugin erstellen, Tinymce -Aktionen und -filter registrieren und die Tinymce -Filter (MCE_EXTERNAL_PLUGINS und MCE_BUTTONS) zum Laden externer Tinymce -Plugins und Fügen/Entfernen von Schaltfl?chen zu Tinymce Toolbar verwenden. .
benutzerdefinierte Funktionalit?t kann auch hinzugefügt werden, indem ein JavaScript -Plugin erstellt wird, das Tinymce erstellt, wie Sie die Schaltfl?che ausgeben und was zu tun ist, wenn Sie klicken. Dies beinhaltet die Verwendung der Tinymce Plugin Manager -Klasse, um das Plugin zu Tinymce hinzuzufügen, die Schaltfl?che mit der Funktion hinzufügen zu registrieren und einen Befehl mithilfe der Funktion addCommand zu registrieren.
Es ist m?glich, den WordPress Visual Editor ohne Codierung mithilfe von Plugins anzupassen. Einige beliebte Plugins für diesen Zweck sind Tinymce Advanced, WP Edit und Ultimate Tinymce.

Der Content -Editor ist ein wichtiger Teil von WordPress. Dadurch k?nnen Benutzer ihre Inhalte, Galerien und Videos in einem

visuellen wysiwyg (was Sie sehen, was Sie erhalten) erstellen und verwalten).

Es wird auch mit einem

text Ansicht geliefert, mit der Benutzer HTML in ihren Inhalt einfügen oder ?ndern k?nnen.

Der WordPress Visual Editor wird von der Tinymce -Editor -Steuerung angetrieben, die die WYSIWYG -Ansicht sowie die Formatierungsschaltfl?chen bietet:

Dank der Tinymce -API und der Filterhaken von WordPress k?nnen wir dem WordPress Visual Editor unsere eigene Funktionalit?t hinzufügen. Insbesondere untersuchen wir, wie Sie ein benutzerdefiniertes Tinymce -Plugin erstellen und registrieren, das ausgew?hlten Text in einer CSS -Klasse einbindet.

Erstellen des Tinymce -Plugins

Erstellen Sie in Ihrer WordPress-Website den Ordner WP-Content/Plugins/Tinymce-Custom-Klasse.

wir speichern hier die Dateien unseres Plugins. Erstellen Sie also als n?chstes eine Datei namens Tinymce-Custom-classe.php mit dem folgenden Code:

<span>/**
</span><span> * Plugin Name: TinyMCE Custom Class
</span><span> * Plugin URI: https://www.sitepoint.com
</span><span> * Version: 1.0
</span><span> * Author: Tim Carr
</span><span> * Author URI: http://www.n7studios.co.uk
</span><span> * Description: TinyMCE Plugin to wrap selected text in a custom CSS class, within the Visual Editor
</span><span> * License: GPL2
</span><span> */
</span>
<span>class TinyMCE_Custom_Class {
</span>
    <span>/**
</span><span>    * Constructor. Called when the plugin is initialised.
</span><span>    */
</span>    <span>function __construct() {
</span>
    <span>}
</span>
<span>}
</span>
<span>$tinymce_custom_class = new TinyMCE_Custom_Class;</span>

Dies gibt WordPress einige Informationen zu unserem Plugin und richtet unser Konstrukt ein, in dem wir unsere Tinymce -Aktionen und -Filter registrieren.

WordPress Tinymce Filter

Tinymce bietet zwei Schlüsselfilter für die Registrierung eines Elements in der Symbolleiste zum visuellen Editor:

MCE_EXTERNAL_PLUGINS: Zum Laden externer Tinymce -Plugins (https://codex.wordpress.org/plugin_api/filter_reference/mce_external_plugins)
mce_buttons: Used to add/remove buttons to the TinyMCE toolbar (https://codex.wordpress.org/Plugin_API/Filter_Reference/mce_buttons,
• mce_buttons_2,mce_buttons_3,_mce_buttons_4)

Bevor wir diese Filter anrufen, m?chten wir überprüfen, ob wir uns in den Bildschirmen der WordPress -Administration befinden. Fügen Sie dem __construct den folgenden Code hinzu:

<span>/**
</span><span> * Plugin Name: TinyMCE Custom Class
</span><span> * Plugin URI: https://www.sitepoint.com
</span><span> * Version: 1.0
</span><span> * Author: Tim Carr
</span><span> * Author URI: http://www.n7studios.co.uk
</span><span> * Description: TinyMCE Plugin to wrap selected text in a custom CSS class, within the Visual Editor
</span><span> * License: GPL2
</span><span> */
</span>
<span>class TinyMCE_Custom_Class {
</span>
    <span>/**
</span><span>    * Constructor. Called when the plugin is initialised.
</span><span>    */
</span>    <span>function __construct() {
</span>
    <span>}
</span>
<span>}
</span>
<span>$tinymce_custom_class = new TinyMCE_Custom_Class;</span>

N?chst

<span>if ( is_admin() ) {
</span>	<span>add_action( 'init', array( &$this, 'setup_tinymce_plugin' ) );
</span><span>}</span>

Dies überprüft, ob der aktuelle im WordPress -Benutzer angemeldete Benutzer Beitr?ge oder Seiten bearbeiten kann. Wenn dies nicht der Fall ist, hat es keinen Sinn, unser Tinymce -Plugin für diesen Benutzer zu registrieren, da er den visuellen Editor nie sehen wird.

Wir überprüfen dann, ob der Benutzer den visuellen Editor verwendet, da einige WordPress -Benutzer dies über

Benutzer> Ihr Profil ausschalten. Wenn der Benutzer den visuellen Editor nicht verwendet, geben wir die Funktion zurück (beenden Sie), da wir nichts anderes tun müssen.

Wenn die oben genannten überprüfungen bestehen, sind die beiden Tinymce -WordPress -Filter registriert - mce_external_plugins und mce_buttons.

Der erste Filter - MCE_External_plugins - erm?glicht es uns, die Tinymce JavaScript -Plugin -Datei zu registrieren, die mit dem visuellen Editor interagiert. Fügen wir einen Funktionsaufruf für diesen Filter in unserer Klasse hinzu:

<span>/**
</span><span>* Check if the current user can edit Posts or Pages, and is using the Visual Editor
</span><span>* If so, add some filters so we can register our plugin
</span><span>*/
</span><span>function setup_tinymce_plugin() {
</span>
    <span>// Check if the logged in WordPress User can edit Posts or Pages
</span>    <span>// If not, don't register our TinyMCE plugin
</span>    <span>if ( ! current_user_can( 'edit_posts' ) && ! current_user_can( 'edit_pages' ) ) {
</span>        <span>return;
</span>    <span>}
</span>
    <span>// Check if the logged in WordPress User has the Visual Editor enabled
</span>    <span>// If not, don't register our TinyMCE plugin
</span>    <span>if ( get_user_option( 'rich_editing' ) !== 'true' ) {
</span>        <span>return;
</span>    <span>}
</span>
    <span>// Setup some filters
</span>    <span>add_filter( 'mce_external_plugins', array( &$this, 'add_tinymce_plugin' ) );
</span>    <span>add_filter( 'mce_buttons', array( &$this, 'add_tinymce_toolbar_button' ) );
</span>
<span>}</span>

Hier registrieren wir eine JavaScript -Datei im $ plugin_array, das alle Tinymce JavaScript -Plugins enth?lt.

Der zweite Filter - MCE_BUTTONS - sagt Tinymce, dass wir eine Schaltfl?che im visuellen Editor registrieren m?chten. Lassen Sie uns erneut einen Funktionsaufruf für diesen Filter in unserer Klasse hinzufügen:

<span>/**
</span><span> * Adds a TinyMCE plugin compatible JS file to the TinyMCE / Visual Editor instance
</span><span> *
</span><span> * <span>@param <span>array</span> $plugin_array Array of registered TinyMCE Plugins
</span></span><span> * <span>@return <span>array</span> Modified array of registered TinyMCE Plugins
</span></span><span> */
</span><span>function add_tinymce_plugin( $plugin_array ) {
</span>
    <span>$plugin_array['custom_class'] = plugin_dir_url( __FILE__ ) . 'tinymce-custom-class.js';
</span>    <span>return $plugin_array;
</span>
<span>}</span>

Dies registriert den programmatischen Namen für unsere Tinymce -Taste (Custom_class).

Erstellen des JavaScript -Plugins

Als wir mce_external_plugins angerufen haben, haben wir uns auf eine JavaScript -Datei verwiesen. Wir müssen diese Datei jetzt erstellen und einen JavaScript -Code hinzufügen. Dadurch wird Tinymce angezeigt, wie die Schaltfl?che ausgibt und was zu tun ist, wenn er geklickt wird.

Erstellen Sie eine neue Datei im Plugin-Ordner namens Tinymce-Custom-class.js, wobei der folgende Code einfügt:

<span>/**
</span><span> * Adds a button to the TinyMCE / Visual Editor which the user can click
</span><span> * to insert a custom CSS class.
</span><span> *
</span><span> * <span>@param <span>array</span> $buttons Array of registered TinyMCE Buttons
</span></span><span> * <span>@return <span>array</span> Modified array of registered TinyMCE Buttons
</span></span><span> */
</span><span>function add_tinymce_toolbar_button( $buttons ) {
</span>
    <span>array_push( $buttons, 'custom_class' );
</span>    <span>return $buttons;
</span>
<span>}</span>

Diese JavaScript -Funktion führt einige Aktionen aus:

Es nennt die Tinymce -Plugin -Manager -Klasse, mit der wir eine Reihe von Tinymce -Plugin -Aktionen ausführen k?nnen. Insbesondere fügen wir unser Plugin mit der Funktion hinzufügen zu Tinymce hinzu.
In der Routine hinzufügen haben wir über die Editor -Instanz auf den visuellen Editor zugreifen. Wir registrieren unsere Schaltfl?che mit der Funktion addbutton, die aus einem Titel, Befehl und Symbolbild besteht.
Schlie?lich registrieren wir einen Befehl mit der Funktion addCommand, die eine Warnung anzeigt, die uns mitteilt, wann unsere Schaltfl?che geklickt wurde.

Wir müssen auch das Icon.png -Bild in unseren Plugin -Ordner aufnehmen - Dies ist das Symbolbild, das für die Taste verwendet wird:

Speichern Sie Ihren Code und aktivieren Sie Ihr Plugin in WordPress -Administration> Plugins.

Erstellen oder bearbeiten Sie als n?chstes eine Seite oder einen Beitrag, und Sie werden hoffentlich Ihre Schaltfl?che mit dem Symbol sehen:

Klicken Sie auf die Schaltfl?che, und Sie sehen die Schaltfl?che

Klicken Sie auf! Alarm:

Definieren eines Befehls zum Ausführen

Ersetzen wir die Warnung durch Eingabeaufforderung und fragen Sie den Benutzer nach dem CSS -Klassennamen, den er im visuellen Editor um den ausgew?hlten Text einwickeln m?chte:

<span>/**
</span><span> * Plugin Name: TinyMCE Custom Class
</span><span> * Plugin URI: https://www.sitepoint.com
</span><span> * Version: 1.0
</span><span> * Author: Tim Carr
</span><span> * Author URI: http://www.n7studios.co.uk
</span><span> * Description: TinyMCE Plugin to wrap selected text in a custom CSS class, within the Visual Editor
</span><span> * License: GPL2
</span><span> */
</span>
<span>class TinyMCE_Custom_Class {
</span>
    <span>/**
</span><span>    * Constructor. Called when the plugin is initialised.
</span><span>    */
</span>    <span>function __construct() {
</span>
    <span>}
</span>
<span>}
</span>
<span>$tinymce_custom_class = new TinyMCE_Custom_Class;</span>

Dieser Befehl führt ein paar geistige überprüfungen aus, um sicherzustellen, dass der Benutzer einen Text ausgew?hlt hat, einen CSS -Klassennamen eingegeben und den Vorgang nicht abgesagt hat.

Wenn diese überprüfungen bestehen, führen wir die ExecCommand -Funktion des Editors aus, um den ausgew?hlten Text durch den ausgew?hlten Text zu ersetzen, der in einem Spann -Tag eingewickelt ist, das die inputierte CSS -Klasse enth?lt.

Wenn alles funktioniert hat, wechseln Sie zur Ansicht "Text", und Sie sehen, dass Ihr ausgew?hlter Text jetzt in ein Span -Tag eingewickelt ist:

Schlussfolgerung

Wir haben ein WordPress -Plugin erstellt, um dem Tinymce Visual Editor eine Schaltfl?che hinzuzufügen. In diesem Prozess haben wir die Filter, die WordPress verwendet, für die Integration mit Tinymce sowie den JavaScript -Code untersucht, der zum Hinzufügen einer Schaltfl?che und beim Klicken eine Aktion erforderlich ist.

Um den vollst?ndigen Quellcode herunterzuladen, besuchen Sie das GitHub -Repository oder den Download -Link Direkte ZIP -Datei.

Im n?chsten Artikel werden wir einige fortgeschrittenere Schritte behandeln, die wir unternehmen k?nnen, um unser Tinymce -Plugin weiter anzupassen.

h?ufig gestellte Fragen (FAQs) zum Hinzufügen einer benutzerdefinierten Funktionalit?t zum visuellen Editor

Wie kann ich dem visuellen Editor von WordPress benutzerdefinierte Schaltfl?chen hinzufügen? Mit dieser API k?nnen Sie der Symbolleiste neue Schaltfl?chen hinzufügen und ihre Funktionalit?t definieren. Sie k?nnen eine neue Plugin -Datei im Plugins -Verzeichnis Ihrer WordPress -Installation erstellen und den Filter "MCE_BUTTONS" verwenden, um Ihre Schaltfl?che hinzuzufügen. Dann k?nnen Sie den Filter "mce_external_plugins" verwenden, um die JavaScript -Datei Ihres Plugins zu laden, die die Funktionalit?t der Schaltfl?che definiert. Passen Sie den WordPress Visual Editor ohne Codierung mithilfe von Plugins an. Es stehen mehrere Plugins zur Verfügung, mit denen Sie Tasten in der Symbolleiste hinzufügen, entfernen oder neu ordnen k?nnen, das Erscheinungsbild des Editors ?ndern und benutzerdefinierte Stile und Formate hinzufügen k?nnen. Einige beliebte Plugins für diesen Zweck sind Tinymce Advanced, WP Edit und Ultimate Tinymce. Editor mit dem Filter "Tiny_MCE_BEFORE_INIT". Mit diesem Filter k?nnen Sie das Tinymce -Einstellungsarray ?ndern, das eine Option "style_formats" enth?lt. Sie k?nnen Ihre benutzerdefinierte Stile dieser Option als Array von Arrays hinzufügen, wobei jeder einen Stil definiert. Jeder Stil sollte einen Titel "," Block "," Klassen "und" Wrapper "enthalten.

Was ist Tinymce und wie bezieht es sich mit dem WordPress Visual Editor? Es ist die zugrunde liegende Software, die den visuellen Editor von WordPress versorgt. Wenn Sie die Tinymce -API verstehen und verwenden, k?nnen Sie dem visuellen Editor von WordPress benutzerdefinierte Funktionen hinzufügen. zum visuellen Editor von WordPress mit dem Filter "MCE_CSS". Mit diesem Filter k?nnen Sie dem Editor zus?tzliche CSS -Dateien hinzufügen. Sie k?nnen eine CSS -Datei erstellen, die Ihre benutzerdefinierte Schriftart importiert und eine Klasse definiert, die sie verwendet ? Aufgrund der kleineren Bildschirmgr??e k?nnen einige Symbolleistenschaltfl?chen in der Dropdown -Down -Stelle von 'Kitchen Speek' versteckt sein. Benutzerdefinierte Formate zum WordPress Visual Editor mit dem Filter "Tiny_MCE_BEFORE_INIT" und der Option "style_formats". Sie k?nnen Ihre benutzerdefinierten Formate als Array von Arrays definieren, die jeweils ein Format definieren. Jedes Format sollte eine Eigenschaft "Titel", "Inline", "Klassen" und "Wrapper" enthalten. Editor, indem Sie zu Benutzern> Ihr Profil im WordPress -Administratorbereich gehen und den visuellen Editor deaktivieren, wenn Sie das Schreiben deaktivieren. Sie k?nnen Shortcodes im WordPress Visual Editor verwenden. Geben Sie einfach den Shortcode in den Editor ein und er wird verarbeitet, wenn der Beitrag angezeigt wird. Visueller Editor mit der Schaltfl?che "Tabelle" in der Symbolleiste. Wenn diese Taste nicht sichtbar ist, müssen Sie m?glicherweise ein Plugin wie Tinymce Advanced installieren, um es hinzuzufügen.

Das obige ist der detaillierte Inhalt vonHinzufügen einer benutzerdefinierten Funktionalit?t zum visuellen Editor von WordPress. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!