web-dev-qa-db-pt.com

Adicionar classe CSS ao link no editor TinyMCE

Ao procurar uma solução, encontrei o plug-in para ativar uma lista suspensa de estilos CSS já presentes em uma folha de estilo. O que eu quero é permitir que o editor adicione Classes CSS de uma caixa de texto. Então, se você considerar esta imagem:

enter image description here

O que eu estou procurando idealmente é uma maneira de obter outra caixa de texto lá embaixo Título chamado Classe . A liberdade de digitar uma classe CSS é necessária para outras funcionalidades dentro do site. Alguma idéia de como posso conseguir isso?

Muito Obrigado!

7
maGz

Consegui resolver isso adicionando o WP Edit plugin ao meu site. Ele possui um botão Link Avançado , que permite que eu (ou um editor) digite manualmente um nome de classe.

1
maGz

Uma opção é adicionar uma classe ao menu Styleselect no MCE. Adaptado da página Codex do "TinyMCE Custom Styles" você precisa primeiro adicionar o estilo ao editor:

// 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');

Isso adicionará a nova lista suspensa ao editor. Então você cria seus estilos personalizados:

// 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' );

A partir do WordPress 3.9, que incluiu uma atualização para o TinyMCE 4.0, a seleção de estilo é muito mais robusta e inclui essa regra selector que significa que você pode definir estilos que só podem ser aplicados a links. É bem legal.

Esta solução significa que você pode pré-definir as classes necessárias e garantir que nunca haja erros ortográficos ou outros problemas.

Como o Codex observa, isto é melhor combinado com um bom arquivo editor-style.css que irá aplicar seus estilos diretamente no editor.

19
mrwweb