Cómo forzar a TinyMCE en WordPress para que reemplace saltos de línea con <br> en lugar de <p> </p>

10 oct 2013, 19:35:46
Vistas: 15.6K
Votos: 7

El editor TinyMCE inserta <p>&nbsp;</p> en lugar de etiquetas <br> cuando presiono Enter para un salto de línea en mi texto.

¿Cómo forzar a TinyMCE en WordPress para que reemplace los saltos de línea con <br> y no con <p>&nbsp;</p>?

10
Comentarios

usa retornos suaves (shift+enter) para insertar <br> en lugar de párrafos.

Milo Milo
10 oct 2013 20:00:49

@Gracias, pero desafortunadamente eso no es una opción en mi caso. Necesito hacerlo presionando Enter. Entonces, supongo que se necesita cambiar alguna opción de TinyMCE o WP. ¿Sabes cuál?

Derfder Derfder
10 oct 2013 20:09:44

No existe tal opción en WordPress, usa retorno suave

Eugene Manuilov Eugene Manuilov
10 oct 2013 20:23:10

@EugeneManuilov No me creo que no sea posible configurarlo en TinyMCE o WP. Tiene que haber alguna forma de hacerlo.

Derfder Derfder
11 oct 2013 10:19:11

@Milo Mi cliente ni siquiera sabe lo que significa un salto de línea suave. Y desde luego no quiere tener que pulsar shift + enter cada vez que quiera hacer una nueva línea. Si es posible en Drupal y Joomla, también tiene que ser posible en WordPress.

Derfder Derfder
11 oct 2013 10:20:43

@EugeneManuilov si no es un problema de WordPress, ¿cómo puedo hacerlo en TinyMCE? ¿Qué archivo en WP debería editar?

Derfder Derfder
11 oct 2013 10:22:17

@EugeneManuilov He intentado usar esta función change_mce_options($init){ $init["forced_root_block"] = false; $init["force_br_newlines"] = true; $init["force_p_newlines"] = false; $init["convert_newlines_to_brs"] = true; return $init; } add_filter('tiny_mce_before_init','change_mce_options'); Pero está agregando br dentro de etiquetas <p> como <p><br></p>. Y necesito que sea como <p></p><br>. ¿Alguna idea de cómo ajustar la solución actual para esto?

Derfder Derfder
11 oct 2013 18:32:01

@Milo otro problema es que este código: change_mce_options($init){ $init["forced_root_block"] = false; $init["force_br_newlines"] = true; $init["force_p_newlines"] = false; $init["convert_newlines_to_brs"] = true; return $init; } add_filter('tiny_mce_before_init','change_mce_options'); no guarda las etiquetas <br>. Se eliminan después de que WordPress guarda esto.

Derfder Derfder
11 oct 2013 18:33:12

No sé si podrías (o incluso deberías intentar) sobrescribir enter con shift+enter durante el evento keydown en el textarea con jQuery? Solo una idea.

birgire birgire
14 oct 2013 20:23:31

@birgire Nuevamente, esto funciona en Drupal así que también debe funcionar en WordPress. Solo necesito configurar TinyMCE en WordPress y desactivar algunos filtros en WP, etc.

Derfder Derfder
14 oct 2013 20:52:25
Mostrar los 5 comentarios restantes
Todas las respuestas a la pregunta 6
1
12

La respuesta sugerida por GavinR es correcta.

Sin embargo, no necesitas instalar el complemento sugerido. Solo añade este mini plugin y estarás listo:

<?php
defined( 'ABSPATH' ) OR exit;
/* Plugin Name: TinyMCE salto de línea en lugar de párrafo */
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' );

Ahora, cuando presiones enter, se insertará la etiqueta <br> en lugar de crear un nuevo párrafo. Pero ten cuidado, si creas dos saltos de línea consecutivos, el texto aún se dividirá en párrafos como resultado del filtro wpautop aplicado al contenido de tu publicación. Primero necesitas eliminar este filtro y crear un nuevo filtro que reemplace todos los saltos de línea con etiquetas <br>. Añade algo como esto a tu functions.php para mostrar las etiquetas <br> en tu plantilla:

remove_filter ( 'the_content', 'wpautop' );
add_filter ( 'the_content', 'add_newlines_to_post_content' );
function add_newlines_to_post_content( $content ) {
    return nl2br( $content );
}
17 oct 2013 13:53:24
Comentarios

Te sugiero agregar esto a un plugin en lugar de tu tema, así si decides cambiar de tema tu editor seguirá utilizando este método.

Morgan Estes Morgan Estes
17 oct 2013 17:52:01
1
15 oct 2013 06:52:13
Comentarios

Esto no funciona, todavía muestra <p>&nbsp;</p> en lugar de <br> en mis áreas de texto con el editor tinymce.

Derfder Derfder
15 oct 2013 13:37:02
0

Esto podría no funcionar para ti, porque no estoy seguro del escenario que requeriría un salto de línea en lugar de párrafos. Si es para un tipo de publicación particular o una plantilla específica, podrías hacer esto.

  1. Implementa el plugin Advanced Custom Fields.
  2. Crea un campo personalizado para tu texto y selecciona el tipo de campo "textarea" con el formato configurado como "convertir saltos de línea en etiquetas <br />".
  3. Configura la "ubicación" de este campo personalizado para que aparezca solo en el tipo de publicación o plantilla deseada (el campo podría reemplazar el editor en el tipo de publicación o plantilla, si se desea).

Obviamente, este enfoque elimina todas las opciones de formato normales que normalmente proporciona TinyMCE, incluyendo enlaces e inserción de medios. Por lo tanto, puede que no sea una opción para ti.

15 oct 2013 00:57:43
1

Hasta donde sé, la única forma de hacer esto es eliminar el filtro wpautop.

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

Esto definitivamente evita que WordPress agregue etiquetas p 'artificiales'.

Mi razonamiento es que, dado que WordPress está diseñado en cierta medida para el "usuario común", sienten necesario incluir el filtro wpautop, que procesa el contenido después de ser enviado (o al cambiar entre los modos visual y texto); ejecutando una serie de "verificaciones" para HTML válido... y ajustando el contenido en consecuencia.

Si bien esto puede ser genial para las personas que nunca tocan el lado HTML; es una molestia para muchos usuarios que intentan "manipular" el HTML.

NOTA: Eliminar el filtro wpautop hará que todas tus entradas/páginas (antiguas y nuevas) no utilicen el filtro. Esto resultará en que todo tu HTML en el editor de contenido se compacte. El lado visual aparecerá bien... pero el lado de texto estará comprimido... lo que dificulta la modificación del código.

17 oct 2013 16:08:43
Comentarios

Estaba usando Advance Custom Fields, así que necesitaba remove_filter ('acf_the_content', 'wpautop'); en su lugar, pero aún así envolvía toda la entrada en un párrafo como bloque raíz.

TecBrat TecBrat
30 sept 2016 20:27:24
0

Si deseas hacer una sangría al inicio de una oración después de <br> (SHIFT+ENTER), entonces podrías necesitar una solución personalizada:

En functions.php agrega:

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;
}

Luego, en la carpeta del tema, crea una carpeta "scripts", y dentro de ella crea un archivo de icono (llamado "indent_img.png") y un archivo javascript (llamado "button.js"), con este contenido:

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

            ed.addButton('indent_button', {
                title : 'sangría', // Traducido a español
                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);
})();

Entonces, en la página del EDITOR, tendrás un botón especial, y cuando hagas clic al inicio de una oración y pulses ese botón, colocará una sangría.

26 mar 2014 23:27:26
4

Gracias a Bigsmoke es posible jugar con wpautop:
A - Habilitar o deshabilitar wpautop en páginas seleccionadas
B - Sin modificar function.php
C - Sin afectar páginas antiguas si el filtro Wpautop fue eliminado
D - Sin comprimir el contenido en el lado de texto del editor

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

Ahora puedo organizar la mayoría de mi diseño de texto disfrutando de párrafos automáticos, y luego finalizar el aspecto sin que wpautop esté activado o desactivado causando problemas.

11 ago 2014 16:03:45
Comentarios

Desactivar autop para esto probablemente sea una mala idea, ya que realiza muchos más cambios en cómo se procesa el contenido del editor, cambios que muy probablemente el autor aún querrá que surtan efecto.

Mark Kaplun Mark Kaplun
11 ago 2014 16:30:14

Tienes razón. Pero debido a que WP fuerza a que los br/ se cambien por   es un desastre cuando intentas, por ejemplo, tener un ajuste fino de tu texto junto a una imagen.

Si tienes una solución más limpia para eso, estaría encantado de usarla.

bradypus bradypus
11 ago 2014 16:48:48

Intenta hacer una pregunta sobre eso ;)

Mark Kaplun Mark Kaplun
11 ago 2014 17:08:07