Hinzufügen einer CSS-Klasse zum Link im TinyMCE-Editor

8

Bei der Suche nach einer Lösung bin ich auf das Plugin gestoßen, um eine Dropdown-Liste der CSS-Stile zu aktivieren, die bereits in einem Stylesheet vorhanden sind. Ich möchte dem Editor erlauben, CSS-Klassen aus einem Textfeld hinzuzufügen. Wenn Sie also dieses Bild betrachten:

Geben Sie hier die Bildbeschreibung ein

Was ich idealerweise suche, ist eine Möglichkeit, ein weiteres Textfeld unter dem Titel " Klasse" zu finden . Die Freiheit, eine CSS-Klasse einzugeben, wird für andere Funktionen innerhalb der Site benötigt. Irgendwelche Ideen, wie ich das erreichen kann?

Danke vielmals!

maGz
quelle

Antworten:

20

Eine Möglichkeit besteht darin, dem Styleselect-Menü in MCE eine Klasse hinzuzufügen. Angepasst an die Codex-Seite "TinyMCE Custom Styles" müssen Sie zuerst die Stilauswahl zum Editor hinzufügen:

// Callback function to insert 'styleselect' into the $buttons array
function my_mce_buttons_2( $buttons ) {
    array_unshift( $buttons, 'styleselect' );
    return $buttons;
}
// Register our callback to the appropriate filter
add_filter('mce_buttons_2', 'my_mce_buttons_2');

Dadurch wird das neue Dropdown-Menü zum Editor hinzugefügt. Dann erstellen Sie Ihre benutzerdefinierten Stile:

// Callback function to filter the MCE settings
function my_mce_before_init_insert_formats( $init_array ) {  
    // Define the style_formats array
    $style_formats = array(  
        // Each array child is a format with it's own settings
        array(  
            'title' => 'My Link Custom Class',  
            'selector' => 'a',  
            'classes' => 'my-custom-link-class'             
        )
    );  
    // Insert the array, JSON ENCODED, into 'style_formats'
    $init_array['style_formats'] = json_encode( $style_formats );  

    return $init_array;  

} 
// Attach callback to 'tiny_mce_before_init' 
add_filter( 'tiny_mce_before_init', 'my_mce_before_init_insert_formats' );

Ab WordPress 3.9, das ein Upgrade auf TinyMCE 4.0 enthielt, ist die Stilauswahl wesentlich robuster und enthält diese selectorRegel, mit der Sie Stile definieren können, die nur auf Links angewendet werden können. Es ist ziemlich schön.

Mit dieser Lösung können Sie die benötigten Klassen vordefinieren und sicherstellen, dass keine Tippfehler oder andere Probleme auftreten.

Wie der Codex feststellt, lässt sich dies am besten mit einer guten editor-style.cssDatei kombinieren , die Ihre Stile direkt im Editor anwendet.

mrwweb
quelle
Hallo mrwweb. Vielen Dank für Ihre Antwort, obwohl nicht ganz das, wonach ich gesucht habe. Ich habe nicht vor, eine Klasse aus einer vordefinierten Liste von Klassen auszuwählen. Stattdessen muss ich dem Editor nur erlauben, einen Klassennamen einzugeben. Grundsätzlich habe ich das Lime Modal-Plugin von CodeCanyon verwendet, und dies erfordert, dass der Trigger-Link einen Klassennamen verwendet, der mit dem modalen eindeutigen Namen identisch ist.
MaGz
Dies ist sehr interessant, ich mag diese Methode, aber gibt es eine Möglichkeit, die neue Option mit den anderen Dropdown-Elementen (z. B. Absatz, Überschrift 1 usw.) hinzuzufügen.
JacobTheDev
1
Ich bin mir nicht sicher, @rev. Eine Sache, die mir gefällt, ist, dass Sie mit dieser Strategie im Allgemeinen semantische HTML-Elemente von klassengesteuerten CSS-Stilen trennen können (die hoffentlich noch semantisch sind). Ich habe keine Zeit , dies jetzt zu tun, sondern nur versuchen , var_dump()das ing $init_arrayoben und sehe , was da ist. Denken Sie daran, dass das TinyMCE 4.0-Update in WordPress 3.9 viele vorhandene Tutorials und Dokumentationen falsch gemacht hat. Überprüfen Sie die Daten bei der Recherche.
Mrwweb
Ah, ich sehe den Vorteil darin, es getrennt zu halten. Ich zögere nur ein bisschen, ein ganz neues Dropdown hinzuzufügen, nur um eine neue Klasse hinzuzufügen, haha. Ich werde auf Ihren Vorschlag eingehen, danke.
JacobTheDev
Ich höre dich. Wenn ich das mache, entferne ich das formatselectund wechsle styleselectfür alle Blockelemente und Textstile vollständig zu .
Mrwweb
1

Ich konnte dieses Problem lösen, indem ich das WP Edit- Plugin zu meiner Site hinzufügte . Es verfügt über eine Schaltfläche für erweiterte Links , mit der ich (oder ein Editor) einen Klassennamen manuell eingeben kann.

maGz
quelle
Entwickler von WP Edit hier. Vielen Dank für die Veröffentlichung, dass das Plugin Ihnen geholfen hat. Bitte lassen Sie mich wissen, wenn Sie Fragen zur Verwendung haben.
Josh
Hey danke josh! Ich habe gerade angefangen, es zu benutzen, also werde ich es dich wissen lassen. So weit, ist es gut!
maGz