web-dev-qa-db-fra.com

Comment modifier le menu déroulant des paragraphes dans TinyMCE avec des styles de texte personnalisés

Je veux donner aux utilisateurs d'arrière-plan seulement 4 styles de texte à choisir. Titre, sous-titre, paragraphe et un style que nous avons appelé .statement.

La recherche de termes tels que "styles personnalisés dans TinyMCE" se terminait toujours par cet article de Wordpress. https://codex.wordpress.org/TinyMCE_Custom_Styles

 enter image description here 

Malheureusement, je ne veux pas donner accès à un autre menu déroulant. Je dois supprimer le contenu actuel du menu déroulant et le renseigner avec mes propres styles.

Dans un premier temps, je me fiche de leur apparence dans le menu déroulant et dans l'éditeur visuel lui-même. La clé ici est de supprimer les options de style inutiles; les options que la conception et l’interface ne prendront pas en charge. (Bien qu'il serait bon de modifier l'apparence de l'éditeur lui-même)

.

function my_mce_before_init_insert_formats( $init_array ) {

J'ai regardé le $init_array et n'ai pas pu trouver où la liste déroulante est créée.

Ravi de vos suggestions :)

Louis!

customizationtinymcevisual-editor
2
kater louis

J'avais le même problème et voici ce que vous pouvez faire. Le code ci-dessous désactive la balise h1 de la section des formats de bloc. De la même manière, vous pouvez désactiver d'autres tags et ajouter les vôtres. Mais je ne sais pas comment leur ajouter des styles CSS personnalisés. J'espère que ce code vous indiquera de quelle manière Dig.

//Modify TinyMCE editor to hide H1. 
function tiny_mce_remove_unused_formats( $initFormats ) {
    // Add block format elements you want to show in dropdown
    $initFormats['block_formats'] = 'Paragraph=p;Heading 2=h2;Heading 3=h3;Heading 4=h4;Heading 5=h5;Heading 6=h6;Preformatted=pre';
    return $initFormats;
}
add_filter( 'tiny_mce_before_init', 'tiny_mce_remove_unused_formats' );


Mise à jour:

Ce que vous cherchiez était possible avant la sortie de Wordpress 3.9. Plus tôt, vous deviez écrire ces lignes de code pour rendre cela possible. Malheureusement, theme_advanced_styles est obsolète car WP 3.9 a mis à jour TinyMCE vers la version 4 ( voir le journal des modifications ). Plus d'informations sur le Andrew Ozz blog .

Voici comment c'était auparavant ( source ):

function make_mce_awesome( $init ) {
    // deprecated settings
    $init['theme_advanced_blockformats'] = 'h2,h3,h4,p';
    $init['theme_advanced_disable'] = 'underline,spellchecker,wp_help';
    $init['theme_advanced_text_colors'] = '0f3156,636466,0486d3';
    $init['theme_advanced_buttons2_add'] = 'styleselect';
    $init['theme_advanced_styles'] = "bigTitle=bigTitle;Call To Action Button=ctaButton,Rounded Corners=rounded";
    return $init;
}

add_filter('tiny_mce_before_init', 'make_mce_awesome');


Solution:

Quoi qu'il en soit, j'ai ma solution pour votre tâche. Vous pouvez supprimer le menu déroulant par défaut et ajouter un menu déroulant contenant quatre styles. Cela vous aidera à éviter les confusions avec les utilisateurs, à partir des listes déroulantes dans lesquelles ils sélectionnent les styles.

Désactiver la liste déroulante par défaut:

function remove_default_format_select( $buttons ) {
    //Remove the format dropdown select and text color selector
    $remove = array( 'formatselect' );

    return array_diff( $buttons, $remove );
 }
add_filter( 'mce_buttons', 'remove_default_format_select' );


Ajouter un nouveau menu déroulant Formats ( plus ici ):

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


// Callback function to filter the MCE settings
function my_mce_before_init_insert_formats( $init_array ) {  
    // Define the style_formats array
    $style_formats = array(
            array(
                'title' => 'Headline',
                'block' => 'h1'
                ),
            array(
                'title' => 'SubHeadline',
                'block' => 'h2'
                ),
            array(
                'title' => 'Statement',
                'block' => 'div',
                'classes' => 'statement_class',
                'wrapper' => true
            )
        );
    // 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' );


Le dernier. Enregistrez le fichier css pour obtenir l'aspect visuel dans votre éditeur: ( En savoir plus )

/**
 * Registers an editor stylesheet for the theme.
 */
function wpdocs_theme_add_editor_styles() {
    add_editor_style( 'custom-editor-style.css' );
}
add_action( 'admin_init', 'wpdocs_theme_add_editor_styles' );


J'espère que cela t'aides.

3
Vlad