web-dev-qa-db-fra.com

Modifier la taille de police par défaut et supprimer les tailles de police indésirables dans TinyMCE

J'utilise le plugin TinyMCE Advance. J'ai posté une question sur le forum d'assistance du plugin, mais il semble que l'auteur ne fournisse aucune assistance pour le moment. Comme vous pouvez le voir sur l'image, la taille de police 12 pt est la taille de police par défaut. Chaque fois que j'ouvre l'éditeur TinyMCE Advance, la taille 12pt s'affiche dans l'état par défaut. Comment puis-je changer la taille par défaut à 14 pt et supprimer la taille 8 pt, 10 pt, 12 pt?

J'ai fait des recherches et on m'a recommandé d'aller à:

wp-includes/js/tinymce/skin/wordpress/wp-content.css

et changer la taille

body {
    font-family: Georgia, "Times New Roman", "Bitstream Charter", Times, serif;
    font-size: 18px;
    line-height: 1.5;
    color: #333;
    margin: 9px 10px;
    max-width: 100%;
    -webkit-font-smoothing: antialiased !important;
    overflow-wrap: break-Word;
    Word-wrap: break-Word; /* Old syntax */
}

Dans ce cas, je l'ai changé à 18 pt, mais cela ne fonctionne pas. Le problème est que la taille par défaut de 12 points est toujours là. Cela ne change que lorsque je clique dans la zone de l'éditeur de texte; il passera du 12 pt (qui s'affiche par défaut) à 14 pt. Mais en réalité, lorsque je tape un texte et que je le publie, le résultat est que le texte publié affiche toujours une taille de 12 points et non de 14 points. Cela signifie donc que je dois quand même sélectionner une taille de police de 14 pt dans la liste déroulante pour obtenir la taille de 14pt.

 enter image description here 

tinymcevisual-editorwp-editorfonts
1
Topy

C'est une sorte de 2 parties. La première moitié vous montrera comment modifier le style dans TinyMCE lors de l'édition. La seconde partie vous montrera comment supprimer des éléments de la barre d’outils.

Style TinyMCE

WordPress nous donne une petite fonction soignée appelée add_editor_style() qui accepte un tableau de feuilles de style, par URL ou par chemins relatifs. Les thèmes par défaut de WordPress tirent généralement parti de cette fonction et sont visibles dans le dernier thème TwentySeventeen . Commençons par créer une feuille de style. Le nom n'a pas d'importance mais l'emplacement le fait.

body,
button,
input,
select,
textarea {
    font-size: 14pt;
}

Pour plus de simplicité, appelons ce editor-style.css et enregistrez-le dans le thème:

/assets/css/editor-style.css

Ensuite, nous devons dire à WordPress d’utiliser notre feuille de style afin d’ouvrir le fichier themes functions.php et d’ajouter:

/**
 * Theme setup functionality
 *
 * @return void
 */
function prefix_theme_setup() {

    // Relative path to the TinyMCE Stylesheet
    add_editor_style( array( 'assets/css/editor-style.css' ) );

}
add_action( 'after_setup_theme', 'iqt_theme_setup' );

Certains plugins peuvent interférer avec cela, tels que les constructeurs de pages s'ils implémentent leur propre TinyMCE.

Modifier la barre d'outils

Ensuite, nous pouvons utiliser le filtre tiny_mce_before_initfilter pour modifier TinyMCE. Dans ce cas, il suffit de remplacer les tailles de police. Vous pouvez ajouter la fonction suivante dans votre fichier functions.php:

/**
 * Add Formats to TinyMCE
 * - https://developer.wordpress.org/reference/hooks/tiny_mce_before_init/
 * - https://codex.wordpress.org/Plugin_API/Filter_Reference/tiny_mce_before_init
 *
 * @param array $args   - Arguments used to initialize the tinyMCE
 *
 * @return array $args  - Modified arguments
 */
function prefix_tinymce_toolbar( $args ) {

    $args['fontsize_formats'] = "14pt 18pt 24pt 36pt";

    return $args;

}
add_filter( 'tiny_mce_before_init', 'prefix_tinymce_toolbar' );

Le tableau $args a un index qui accepte une liste de tailles de police séparées par des espaces. Vous pouvez les remplacer par ce que vous voulez, px, em, rem peu importe, mais la liste est séparée par un espace et constitue une valeur font-size valide.

1
Howdy_McGee

C'est la réponse, ça marche pour moi:

  1. Recherchez functions.php à la racine de votre répertoire themes dans /wp-content/themes/yourtheme/, ouvrez-le et ajoutez une ligne après la balise php.

    add_editor_style ('custom-editor-style.css');

  2. Dans le même répertoire, créez un fichier appelé custom-editor-style.css avec les lignes ci-dessous.

    @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
* { font-family: 'Open Sans', sans-serif, Arial, Helvetica;}

Allez-y, effacez le cache de votre navigateur et c’est ce que vous verrez.

Lien de référence: https://blog.phi9.com/wordpress-editor-and-its-font/

0
Tony Ngo

Je n'utilise que celui-ci. Ça marche pour moi. Quelle est la différence entre ce code et votre code?

// Customize TinyMCE editor font sizes
if ( ! function_exists( 'wpex_mce_text_sizes' ) ) {
    function wpex_mce_text_sizes( $initArray ){
        $initArray['fontsize_formats'] = "14pt 18pt 24pt 36pt";
        return $initArray;
    }
}
add_filter( 'tiny_mce_before_init', 'wpex_mce_text_sizes' );
0
Topy