it-swarm.com.de

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

Auf der Suche nach einer Lösung bin ich auf das Plugin gestoßen, um ein Dropdown von CSS-Stilen zu ermöglichen, die bereits in einem Stylesheet vorhanden sind. Ich möchte, dass der Editor CSS-Klassen aus einem Textfeld hinzufügen kann. Also, wenn Sie dieses Bild betrachten:

enter image description here

Was ich im Idealfall suche, ist eine Möglichkeit, ein weiteres Textfeld unter Title mit dem Namen Class hinzuzufügen. 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!

7
maGz

Ich konnte dieses Problem lösen, indem ich das WP Edit Plugin zu meiner Site hinzufügte. Es hat eine Advanced Link Schaltfläche, mit der ich (oder ein Editor) einen Klassennamen manuell eingeben kann.

1
maGz

Eine Möglichkeit besteht darin, dem Styleselect-Menü in MCE eine Klasse hinzuzufügen. Angepasst von der Codex-Seite "TinyMCE Custom Styles" müssen Sie zuerst den ausgewählten Stil 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 die neue Dropdown-Liste 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 die selector-Regel, mit der Sie Stile definieren können, die nur auf Links angewendet werden können. Es ist ziemlich nett.

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.css -Datei kombinieren , mit der Ihre Stile direkt im Editor angewendet werden.

19
mrwweb