Imágenes de Tinymce envueltas automáticamente en etiqueta. Formas de CSS o trucos del editor de texto

7 minutos de lectura

avatar de usuario
mraaroncruz

hola,
Me he encontrado con este problema muchas veces usando drupal o wordpress, donde mis archivos de configuración de tinymce están demasiado ingeniosamente resumidos.

El problema es que tinymce envuelve automáticamente mi <img> etiquetas en <p> etiquetas Si hay una forma de evitar esto en WordPress o Drupal, sería increíble.

Mi problema existe cuando quiero hacer algo como esto

<style>
    img {
        float: left;
    }
    p {
        float: right;
        margin-right: 20px;
        width: 400px;
    }
 </style>

y quiero que mi código se vea así

<img src="https://stackoverflow.com/questions/5819956/some_png.png" />
<p> Imagine a lot of lipsum text.</p>

pero tinymce hace esto

<p><img src="https://stackoverflow.com/questions/5819956/crap_im_wrapped_in_a_paragraph.png" /></p>
<p> Imagine a lot of lipsum text.</p>

Estoy tratando de hacer flotar una imagen a la izquierda de un párrafo con un ancho establecido, sin tener restricciones de ancho en la imagen misma.
en este caso, el padre de la imagen obtiene un ancho y un derecho flotante. Eso es no lo que quiero.

Es muy posible que haya una solución fácil e inteligente para esto, pero todavía no he encontrado ninguna. Preferiría no piratear mis archivos de configuración si no es necesario.

1 advertencia…
La única razón por la que existe este problema es porque quiero que los clientes puedan hacer fácilmente su propia edición para que No les pediré que envuelvan la imagen en un <div> en lugar de un <p>. Eso me parece poco intuitivo para mis clientes que son los usuarios reales del wysiwyg

Solución anterior

He estado usando una expresión regular para eliminar las etiquetas de párrafo, pero siempre es algo problemático. Termino agregando más imágenes en otro lugar, luego tengo que seguir ajustando mi expresión regular para ignorarlas. ¡Abundan los errores 502!

mi(s) pregunta(s) es(son)
¿Qué puedo hacer en mi CSS para que la imagen envuelta en el párrafo haga lo que quiero que haga?

y si no puedo
¿Qué drupal o wordpress específico puedo hacer para que ese párrafo desaparezca?

Editar — la solución debe ser compatible con IE7+ y navegadores modernos. :PAGS

¡Gracias!
aarón

Llamas a tinyMCE con la función tinyMCE.init, ¿no?

Así que añádele esta cadena:

forced_root_block : false,

También puede cambiar tiny_mce_src.js. Encontrar

forced_root_block : 'p',

y cambiarlo a

forced_root_block : false,

PD No te olvides de borrar el caché.

  • Los documentos de TinyMCE decir: “Si establece esta opción en falso, nunca producirá etiquetas P al ingresar o automáticamente producirá elementos BR y Shift+Enter producirá una P. Tenga en cuenta que no usar elementos P como bloque raíz puede paralizar severamente la funcionalidad del editor.” Tal vez esto esté bien para algunas personas, ¡pero utilícelo bajo su propio riesgo!

    – EricP

    29 de enero de 2015 a las 23:54


avatar de usuario
blair scott

Si no desea que envuelva etiquetas de imagen, busque en la fuente de Tinymce una función llamada “isBlock”. Existe una prueba de lista blanca de expresiones regulares que determina si un elemento es o no un elemento de bloque. Si necesita que las etiquetas de imagen se traten como elementos de bloque, agregue “IMG” a la lista de nombres de nodos que busca. Solo tuve que hacer esto yo mismo, todavía estoy buscando efectos secundarios negativos en este momento, pero resuelve el problema inmediato en cuestión.

EDITAR: Esa fue más o menos una solución temporal, si solo necesita detener el ajuste del bloque de nivel raíz de las etiquetas de imagen, hay una función llamada “forceRoots” donde realmente querrá realizar su verificación de etiqueta de imagen. Lo hice modificando esta línea de código:

if (nx.nodeType == 3 || (!t.dom.isBlock(nx) && nx.nodeType != 8)) {

para verse así:

if (nx.nodeType == 3 || (!t.dom.isBlock(nx) && nx.nodeType != 8) && nx.nodeName.toLowerCase() != "img") {

Esto resuelve el problema bastante bien para mí.

  • Tengo la suerte de no tener que usar TinyMCE nunca más, así que desafortunadamente probablemente nunca podré probar estas soluciones. La respuesta va a la mayoría de los votos.

    – mraaroncruz

    14 de julio de 2012 a las 15:06

  • Para aplicar este cambio en tinyMCE4, busque blockElementsMap = createLookupTable(‘…’) y agregue img a la lista de elementos de bloque. ¡No he probado los efectos secundarios!

    – EricP

    30 de enero de 2015 a las 0:12


Si estamos hablando de un sitio de WordPress, hay un filtro molesto que envolverá automáticamente algunos elementos dentro del contenido con una etiqueta

llamada wpaautop. En realidad, es manejado por wordpress en tiempo de ejecución y no por TinyMCE.

Agregue esto a la parte superior de su plantilla o archivo functions.php:

<?php remove_filter('the_content', 'wpautop'); ?>

fuente:
http://wordpress.org/support/topic/stop-wordpress-from-adding-p-tags-and-removing-line-break

En Drupal, una forma “klugey” de hacer esto sería usar hook_nodeapi() o el(los) equivalente(s) d7 para mostrar nodos, y usar una expresión regular para reemplazar las imágenes envueltas en p que aparecen al comienzo del campo. Tendría que informar a su cliente que no se verían bien al editar, pero que en la pantalla se verían correctamente.

Si está buscando una opción css:

En css2 tiene el selector :first-child, y en css3 también está el selector :only-child. p: la imagen del primer hijo podría usarse con márgenes negativos para compensar los márgenes que ha declarado para los elementos p. Una desventaja sería que esto también impondría los mismos márgenes negativos en cualquier imagen que el cliente pudiera poner en un primer párrafo. Es posible que css3 no sea compatible con todos los navegadores que desea cubrir, pero si puede usarlo, puede usar el selector: hijo único para imágenes que son los únicos elementos secundarios de los elementos p, compensando los márgenes de la p principal con márgenes negativos.

Si Javascript es una opción, puede usar jQuery para volver a generar el img ser hermano de p. Algo como esto (no probado)

$("p > img").each(function () {
  var $this = $(this);
  var $p= $this.parent();
  $p.before($this);
});

Agregue lógica solo a los párrafos/imágenes que realmente necesita.

Feo, sí, pero una solución viable como último recurso.

  • haría esa última línea $p.before($this).remove(); :O

    – mraaroncruz

    29/04/2011 a las 17:50


  • Sí, en tu caso puede ser recomendable. Sin embargo, no lo haría en esa función. Una solución más general sería llamadas separadas para eliminar todos los párrafos vacíos y todos los párrafos que consisten únicamente en  . Ambos ocurren con TinyMCE con bastante frecuencia.

    – mpdonadio

    29/04/2011 a las 20:00

avatar de usuario
Claudio Ikeda

Añade esta línea:

theme_advanced_blockformats : "p,div,h1,h2,h3,h4,h5,h6,blockquote,dt,dd,code,samp"

Cuando desee insertar un img, seleccione div:

<div>
    <img src="https://stackoverflow.com/questions/5819956/my_img.jpg>
</div>

No es necesario modificar nada con css.

  • haría esa última línea $p.before($this).remove(); :O

    – mraaroncruz

    29/04/2011 a las 17:50


  • Sí, en tu caso puede ser recomendable. Sin embargo, no lo haría en esa función. Una solución más general sería llamadas separadas para eliminar todos los párrafos vacíos y todos los párrafos que consisten únicamente en  . Ambos ocurren con TinyMCE con bastante frecuencia.

    – mpdonadio

    29/04/2011 a las 20:00

avatar de usuario
netAcción

TinyMCE 4 envuelve todo en elementos de bloque. El envoltorio predeterminado es P. Haga clic en la imagen y elija otro elemento de envoltorio como DIV. Para agregar DIV al menú, agregue esto a funciones.php:

function make_mce_awesome( $init ) {
  $init['block_formats'] = "Paragraph=p; Heading 1=h1; Heading 3=h3; Heading 2=h2; Preformatted=pre; Media=div";
return $init;
}

add_filter('tiny_mce_before_init', __NAMESPACE__ . "\\make_mce_awesome");

Envoltura DIV alrededor de la imagen

¿Ha sido útil esta solución?