{"id":3414,"date":"2016-09-13T07:24:22","date_gmt":"2016-09-13T06:24:22","guid":{"rendered":"https:\/\/blog.fesomia.cat\/es\/?p=3414"},"modified":"2016-09-13T07:34:08","modified_gmt":"2016-09-13T06:34:08","slug":"errores-formato-elementos-contenteditable-con-webkit-chrome-safari","status":"publish","type":"post","link":"https:\/\/blog.fesomia.cat\/es\/2016\/09\/13\/errores-formato-elementos-contenteditable-con-webkit-chrome-safari\/","title":{"rendered":"Errores de formato en elementos contenteditable con Webkit (Chrome, Safari)"},"content":{"rendered":"

contenteditable<\/em><\/a> es un atributo que nos lleg\u00f3 con HTML5 y que permite que ciertos elementos HTML sean editables o modificables en el navegador del usuario. Esta propiedad la usan muchos editores de texto para p\u00e1ginas web, algunos tan populares como TinyMCE<\/a>.<\/p>\n

Webkit<\/a> (el motor de renderizado de navegadores como Safari, Opera y los que utilizan Blink<\/a> como Chrome) tiene un problema en la manera en que gestiona los objetos contenteditable<\/em>: cuando se han aplicado estilos espec\u00edficos (por ejemplo en el body<\/em> de un editor TinyMCE), en ciertas ocasiones algunos de estos estilos a\u00f1adidos (como line-height<\/em> o font-size<\/em> en ems) generan regiones span<\/em> indeseadas dentro del c\u00f3digo, cosa que puede comportar cambios imprevistos en el formato obtenido, como diferentes tama\u00f1os de letra o interlineados inesperados.<\/p>\n

El problema existe desde hace algunos a\u00f1os y ha sido reportado, aunque nunca ha sido corregido. Por lo visto se considera parte de una funcionalidad que compara los estilos al modificar bloques e intenta mantenerlos insertando elementos span<\/em> en l\u00ednea. Con todo, en Firefox, Internet Explorer y Microsoft Edge no se da este caso.<\/p>\n

Algunas soluciones<\/h3>\n

Los editores WYSIWYG m\u00e1s populares han ido a\u00f1adiendo conectores o plugins<\/em> o bien cambios para compensar este error, por lo que en muchos casos solo ser\u00e1 necesario actualizar el software o las bibliotecas correspondientes.<\/p>\n

Sin embargo, en determinados escenarios no siempre nos es posible actualizar los editores, bien por razones de compatibilidad o porque hay involucradas aplicaciones cr\u00edticas que no podemos manipular con facilidad o con la frecuencia que quisi\u00e9ramos. En estos casos podemos optar por otras soluciones m\u00e1s simples, como utilizar estilos uniformes o parches con JavaScript.<\/p>\n

Una de las soluciones propuestas en Stack Overflow<\/a> es observar el\u00a0DOM para controlar este comportamiento. Fij\u00e9monos en el siguiente ejemplo: en la tercera caja utilizamos mutation observers<\/em><\/a> en vez de mutation events<\/em><\/a>, y restringimos la acci\u00f3n a\u00a0 la plataforma Webkit:<\/p>\n

(Explora \u00e9ste c\u00f3digo en JSFiddle)<\/a><\/p>\n