web-dev-qa-db-fra.com

Comment forcer TinyMCE dans WordPress à remplacer les nouvelles lignes par des balises <br> et non par <p> & nbsp; </ p>

L'éditeur TinyMCE insère des balises <p>&nbsp;</p> au lieu de <br> lorsque j'appuie sur entrer dans mon texte pour une nouvelle ligne.

Comment forcer TinyMCE dans WP pour remplacer les nouvelles lignes par <br> et non <p>&nbsp;</p>?

6
Derfder

La réponse suggérée par GavinR est correcte.

Cependant, vous n'avez pas besoin d'installer le plug-in suggéré. Ajoutez simplement ce mini plugin et vous êtes prêt:

<?php
defined( 'ABSPATH' ) OR exit;
/* Plugin Name: TinyMCE break instead of paragraph */
function mytheme_tinymce_settings( $tinymce_init_settings ) {
    $tinymce_init_settings['forced_root_block'] = false;
    return $tinymce_init_settings;
}
add_filter( 'tiny_mce_before_init', 'mytheme_tinymce_settings' );

Maintenant, lorsque vous appuyez sur Entrée, la balise <br> sera insérée au lieu de créer un nouveau paragraphe. Mais attention, si vous créez deux nouvelles lignes consécutives, le texte sera toujours divisé en paragraphe à la suite de wpautop filter appliqué au contenu de votre publication. Vous devez d'abord supprimer ce filtre et créer un nouveau filtre qui remplacera toutes les nouvelles lignes par des balises <br>. Ajoutez quelque chose comme ceci à votre functions.php pour afficher les balises <br> dans votre modèle:

remove_filter ( 'the_content', 'wpautop' );
add_filter ( 'the_content', 'add_newlines_to_post_content' );
function add_newlines_to_post_content( $content ) {
    return nl2br( $content );
}
10
Dero
2
GavinR

Cela ne fonctionnera peut-être pas pour vous, car je ne suis pas sûr du scénario qui nécessiterait un saut de ligne plutôt que des paragraphes. Si c'est pour un type d'article particulier ou un modèle particulier, vous pouvez le faire.

  1. Implémenter le plugin Advanced Custom Fields.
  2. Créez un champ personnalisé pour votre texte et sélectionnez le type de champ "textarea" avec le formatage défini pour "convertir les nouvelles lignes en balises <br />".
  3. Définissez "l'emplacement" de ce champ personnalisé pour qu'il n'apparaisse que sur le type de message ou le modèle souhaité (le champ peut remplacer l'éditeur sur le type de message ou le modèle, si vous le souhaitez).

De toute évidence, cette approche supprime toutes les options de formatage normales normalement fournies par TinyMCE, y compris la liaison et l’insertion de supports. Donc, cela peut ne pas être une option pour vous.

0
Ray Gulick

si vous voulez créer une intention au début de la phrase après <br> (SHIFT + ENTRÉE), vous devrez peut-être utiliser une solution personnalisée:

dans functions.php, ajoutez:

add_action('init', 'add_cust_button');
function add_cust_button() {
   if ( get_user_option('rich_editing') == 'true') {
     add_filter('mce_external_plugins', 'add_mycust_plugin');
     add_filter('mce_buttons_2', 'register_mycust_plugin');
   }
}
    function register_mycust_plugin($buttons) {
       array_Push($buttons, "|", "indent_button");
       return $buttons;
    }
    function add_mycust_plugin($plugin_array) {
       $plugin_array['my_custom_button'] = get_bloginfo('template_url').'/scripts/button.js';
       return $plugin_array;
    }

add_filter( 'tiny_mce_version', 'my_refresh_mce');
function my_refresh_mce($ver) {
  $ver += 3;
  return $ver;
}

puis dans le dossier de thèmes, créez le dossier "scripts", et à l'intérieur, créez un fichier icône (nommé "indent_img.png") et un fichier javascript (nommé "button.js"), avec ce contenu:

(function() {
    tinymce.create('tinymce.plugins.Nlineeplg', {
        init : function(ed, url) {

            ed.addButton('indent_button', {
                title : 'indent',
                image : url+'/indent_img.png',
                onclick : function() {
                    ed.execCommand('mceInsertContent', false, '<span style="margin:0 0 0 8px;">&nbsp;</span>');
                }
            });

        },
        createControl : function(n, cm) {
            return null;
        }
    });
    tinymce.PluginManager.add('my_custom_button', tinymce.plugins.Nlineeplg);
})();

ensuite, dans la page EDITOR, vous aurez un bouton spécial, et lorsque vous cliquerez au début de la phrase et cliquez sur ce bouton, un retrait apparaîtra.

0
T.Todua

Autant que je sache, le seul moyen de le faire est de supprimer le filtre wpautop.

remove_filter( 'the_content', 'wpautop' );
remove_filter( 'the_excerpt', 'wpautop' );

Cela empêche définitivement WordPress d’ajouter des balises "artificielles" p.

Je pense que WordPress est quelque peu conçu pour le "profane". Ils estiment nécessaire d’inclure avec le filtre wpautop, qui traite le contenu après sa soumission (ou la permutation entre les modes visuel et texte); exécuter une série de "vérifications" pour le code HTML valide .. et ajuster le contenu en conséquence.

Bien que cela puisse être génial pour les personnes qui ne touchent jamais le côté HTML; C’est une épine dans le dos de nombreux utilisateurs qui essaient de "tripoter" le HTML.

REMARQUE: la suppression du filtre wpautop entraînera que tous vos posts/pages (anciennes et nouvelles) n'utilisent pas le filtre. Cela aura pour conséquence que tout votre code HTML dans l'éditeur de contenu sera (écrasé) ensemble. Le côté visuel semblera bien ... mais le côté texte est écrasé ... rendant difficile la modification du code.

0
josh

Grâce à Bigsmoke, il est possible de jouer avec wpautop:
A - Activer ou désactiver wpautop sur les pages sélectionnées
B - Sans modifier function.php
C - Sans déconner les anciennes pages si le filtre Wpautop a été supprimé
D - Sans écraser le contenu dans la partie texte de l'éditeur

http://wordpress.org/plugins/wpautop-control/

Maintenant, je peux tirer le meilleur parti de ma mise en page en appréciant les paragraphes automatiques, puis finaliser l’aspect sans avoir à activer ou désactiver wpautop.

0
bradypus