webentwicklung-frage-antwort-db.com.de

Wie verwende ich die neuen Dashicons für benutzerdefinierte TinyMCE-Schaltflächen?

Ich habe ein Tutorial über Tuts + (verlinkt aus dem WordPress-Codex) verfolgt, wie man mit dem TinyMCE-Editor interagiert, um Schaltflächen hinzuzufügen. Nach dem Beispielcode in diesem Artikel habe ich eine JS-Datei, die die Schaltflächen zu TinyMCE hinzufügt. Der relevante Ausschnitt von JS, der das Symbol hinzufügt, ist:

ed.addButton('dropcap', {
    title : 'DropCap',
    cmd : 'dropcap',
    image : url + '/dropcap.png'
});

Dies war in Ordnung vor WP 3.8, aber seit Dashicons scheint es veraltet zu sein, statische PNGs für TinyMCE-Schaltflächen zu verwenden ... Seit 3.8 habe ich meine benutzerdefinierten Beitragstypen für die Verwendung von Dashicons aktualisiert. Aber haben Sie sich gefragt, wie Sie TinyMCE-Schaltflächen auch mit Dashicons korrekt erhalten können? Es gibt eine praktische Anleitung von James Coster zur Verwendung von Dashicons, die möglicherweise relevant ist (obwohl ich davon ausgehe, dass keine Aufrufe erforderlich sind, um die Dashicons-Skripts in die Warteschlange zu stellen, da sie bereits im Back-End geladen werden).

4
MBL

Um die Symbole mit den Dashicons-CSS-Dateien zu formatieren, die bereits im Dashboard WP geladen sind, müssen Sie zusätzliches CSS hinzufügen. In der neuesten Betaversion von Wordpress (3.9) wird TinyMCE 4.0 verwendet, daher bin ich mir nicht sicher, ob dies in früheren Versionen funktioniert (jedoch kann eine geänderte Version für die verschiedenen Klassen geeignet sein, die von früheren TinyMCE-Schaltflächen ausgegeben wurden). In WP 3.9 (und TinyMCE 4.0) werden Symbole im Editor ausgegeben, z.

<div id="mce_16" class="mce-widget mce-btn" tabindex="-1" aria-labelledby="mce_16" role="button" aria-label="DropCap">
    <button role="presentation" type="button" tabindex="-1">
        <i class="mce-ico mce-i-dropcap"></i>
    </button>
</div>

Es gibt zwei Stufen: Fügen Sie zuerst eine Funktion hinzu, um ein benutzerdefiniertes Stylesheet in den WP -Administrator einzuordnen (der zum Stylen der neuen Schaltflächen verwendet wird).

add_action( 'admin_enqueue_scripts', 'se12334_stylesheet_to_admin' );
/**
 * Add stylesheet to the admin pages
 */
function se12334_stylesheet_to_admin() {
    wp_enqueue_style( 'custom-mce-style', get_template_directory_uri() . 'PATH/TO/CSS.FILE' );
}

Zweitens kann nach der Anleitung James Kosters zur Verwendung von Dashicons ein einfacher CSS-Selektor von :before auf Ihre CSS-Klasse icons angewendet werden. In dem Beispielfall in der ursprünglichen Frage wäre die CSS-Klasse mce-i-dropcap

.CUSTOM_MCE_BUTTON_CLASS:before {
    font-family: "dashicons";
    content: "\f100";
}

Entfernen Sie jedoch auch den Aufruf, um ein Bild in die ursprüngliche JS ed.addButton -Funktion einzufügen, und verwenden Sie stattdessen das Schriftsymbol

Beachten Sie, dass die Funktion admin_enqueue_scripts auf jeder Admin-Seite aufgerufen wird. Wenn Ihr benutzerdefiniertes Stylesheet also groß ist, kann dies die Ladezeiten verlangsamen (obwohl ein verkleinertes Stylesheet mit nur Symboldefinitionen ohnehin keine großen Auswirkungen auf die Ladezeiten hat).

3
MBL

Dashicon hinzufügen

Alle Schaltflächen in TinyMCE haben eine Klasse, auch Ihre benutzerdefinierte Schaltfläche. Fügen Sie ein Stylesheet mit Dashicons hinzu (verwenden Sie wp_enqueue_style(), wie im folgenden Beispiel gezeigt).

.myicon:before {
    content: '\2605';
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    font: normal 16px/1 'dashicons';
    vertical-align: top;
}

Standardmäßig ist das Dashicon auf jeder Bearbeitungsseite aktiv, aber fügen Sie das Dashicon zum abhängigen Stylesheet hinzu, und es wurde auch hinzugefügt.

Helfer

In diesem Plugin finden Sie die richtige Schriftart, Anleitungen und Beispiele, die Sie in das WordPress-Backend einfügen können.

TinyMCE und WordPress 3.9

Kleiner Hinweis von meiner Seite, sich zu diesem Thema zu entwickeln. Die nächste Version von WP 3.9 enthält das TinyMCE 4.0 * mit einer neuen API, und das Tuts-Lernprogramm ist nicht die beste Ressource für die Suche nach Lösungen in diesem Thema. Sehen Sie sich die folgenden beiden Links an und überprüfen Sie Ihre aktuelle Entwicklung mit der WP 3.9-Beta.

Quellbeispiele, 3.0 vs 4.0

TinyMCE 3

  tinyMCE.onAddEditor.add(function(mgr, ed) {
    var editor = $('#' + ed.editorId + '.atjs');
    if (editor.length == 1) {
      ed.onInit.add(function(ed, l) {
        $(ed.contentDocument.activeElement).atwho({settings go here});
      });
    }
  });

TinyMCE 4

tinymce.init({
  selector: "#mce",
  init_instance_callback: function(editor) {
    $(editor.contentDocument.activeElement).atwho(at_config);
  }
});
6
bueltge

Eine einfache Lösung besteht darin, ein Base64-kodiertes SVG-Bild wie dieses zu verwenden

ed.addButton('dropcap', {
    ...
    'image'      => 'data:image/svg+xml;base64,{{BASE64}}',
    ...
}

Wobei {{BASE}} das mit Base64 codierte SVG-Bild ist.

Ich verwende diesen vorinstallierten Linux-Befehl, um die SVG von Github herunterzuladen und zu kodieren (am Beispiel des Twitter-Symbols):

#!/usr/bin/env bash
icon=Twitter
svg64=$(wget -O- -nv https://raw.githubusercontent.com/WordPress/dashicons/master/svg/$icon.svg | base64 -w 0) > /dev/null 2>&1 
echo $svg64

Ausgabe:

PD94bWwgdmVyc2lvb[...]Cg==
1
Nabil Kadimi

Hier ist Ihre einfache Lösung (hoffentlich hilft dies auch anderen Menschen):

1) füge eine benutzerdefinierte Klasse für icon hinzu, in diesem Beispiel "myicons"

(function () {
    tinymce.PluginManager.add('Twitter_button_plugin', function (editor, url) {
        editor.addButton('mce_Tweet_button', {
            title: 'Insert Tweet',
            icon: 'myicons dashicons-Twitter',
            onclick: function() {
                ...
            }
        });
    });
})();

2) Stellen Sie Ihre Admin-Stylesheet-Datei in eine Warteschlange

function load_custom_wp_admin_style() {
   wp_enqueue_style( 'custom_wp_admin_css', 'URL/TO/custom_admin_style.css' );
}
add_action( 'admin_enqueue_scripts', 'load_custom_wp_admin_style' );

3) Fügen Sie dann in Ihrer Datei custom_admin_style.css Folgendes hinzu:

/**
 * TinyMCE add support for dashicons
 */
i.mce-i-myicon {
    font: 400 20px/1 dashicons;
    padding: 0;
    vertical-align: top;
    speak: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-left: -2px;
    padding-right: 2px
}
0
Albo Best