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

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

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

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

Antworten: