Problema al editar contenido de muestra cambiando color y fuente en el editor GrapesJS
Una solución podría ser definir estas etiquetas personalizadas de Outlook como tipos de componentes personalizados; El editor no reconoce estas etiquetas a menos que tú las definas. Salud.
Lee la respuesta completa abajo ↓Pregunta
- Estoy viendo comportamientos inesperados en el editor de GrapesJS. ¿Alguien podría ayudarme con el problema del editor GrapesJS?
si estoy copiando contenido de Outlook y pegándolo directamente en el editor de GrapesJS. está añadiendo algunas etiquetas específicas de Outlook (etiquetas basura como: MsoNormal, </o:p> etc.) al contenido, debido a estas etiquetas basura me cuesta editar el contenido que guardé. Ejemplo: está añadiendo muchas cosas para este contenido Hola Arjun,
a continuación encontrará las cosas que debe confirmar el domingo.
Gracias.
"<td class="c3065" estilo="cuadro-tamaño: borde-recuadro; tamaño de fuente: 11.0pt; fuente-familia: Arial,sans-serif; color: #434449;">
<p style="cuadro-tamaño: border-box;">
</p>
<p class="MsoNormal" style="box-sizing: border-box;">
<span class="c4099" style="cuadro-tamaño: border-box; tamaño de fuente: 11.0pt; font-family: 'Calibri',sans-serif;">Hola
Arjun,<o:p style="cuadro-dimensionamiento: border-box;">
</o:p></span>
</p>
<p class="MsoNormal" style="box-sizing: border-box;">
<span class="c4141" style="box-ssizeing: border-box; font-size: 11.0pt; font-family: 'Calibri',sans-serif;"> </span>
</p>
<p class="MsoNormal" style="box-sizing: border-box;">
<span class="c4165" style="cuadro-tamaño: borde-recuadro; tamaño de fuente: 11.0pt; fuente-familia: 'Calibri',sans-serif;">por favor
a continuación se muestran las cosas que necesitas confirmar el domingo. <o:p style="box-sizing: border-box;">
</o:p></span>
</p>
<p class="MsoNormal" style="box-sizing: border-box;">
<span class="c4207" style="cuadro-tamaño: borde-cuadro; tamaño de fuente: 11.0pt; fuente-familia: 'Calibri',sans-serif;"> </span>
</p>
<p class="MsoNormal" style="box-sizing: border-box;">
<span class="c4231" style="cuadro-tamaño: border-box; font-size: 11.0pt; font-family: 'Calibri',sans-serif;">Gracias. <o:p style="box-sizing: border-box;">
</o:p></span>
</p>
<p style="cuadro-tamaño: border-box;">
</p>
"</td>
2) no refleja los colores del contenido que estamos guardando.
3) está añadiendo algunas etiquetas div extra al introducir el enter.Respuestas (3)
Una solución podría ser definir estas etiquetas personalizadas de Outlook como tipos de componentes personalizados; El editor no reconoce estas etiquetas a menos que tú las definas. Salud.
@arju1503, esto suele ocurrir cuando el mensaje se reenvía en Outlook. El correo reenviado es algo diferente a un correo enviado en cuanto a margen. Pero también puede ocurrir con los correos electrónicos, ya que desde Outlook 2007, Outlook usa Microsoft Word para renderizar correos. Estos elementos se inyectan para permitir que Word convierta el HTML de nuevo en un documento de Word totalmente compatible. Te aconsejo encarecidamente que no uses código de un mensaje reenviado de ningún cliente de correo. Si decides usarlo de todas formas, podrías añadir un analizador para recortar las etiquetas no compatibles con HTML y adjuntarlo al comando de importación de GrapesJS.
@arju1503, esto suele ocurrir cuando el mensaje se reenvía en Outlook. El correo reenviado es algo diferente a un correo enviado en cuanto a margen. Pero también puede ocurrir con los correos electrónicos, ya que desde Outlook 2007, Outlook usa Microsoft Word para renderizar correos. Esos elementos se inyectan para permitir que Word convierta el HTML de nuevo en un documento de Word totalmente compatible. Te aconsejo encarecidamente que no uses código de un mensaje reenviado de ningún cliente de correo. Si decides usarlo de todas formas, podrías añadir un analizador para recortar las etiquetas no compatibles con HTML y adjuntarlo al comando de importación de GrapesJS.
Gracias @inaLar, ¿podrías darme un ejemplo de cómo puedo añadir un análisis para recortar las etiquetas no compatibles con html y adjuntarlo al comando de importación de GrapesJS?
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #2198
Problema al editar contenido de muestra cambiando color y fuente en el editor GrapesJS
Estoy viendo comportamientos inesperados en el editor GrapesJS. ¿Alguien podría ayudarme con el problema del editor GrapesJS?si estoy copia...
Issue #3350
ErrorTypeUncatch: no se puede acceder a la propiedad "el", n está indefinido
Hola, estoy usando grapesjs 0.16.44 y solo en Firefox me encuentro con este problema. Usando grapesjs bloquea un preset básico. ¿Alguien pu...
Issue #2850
[PREGUNTA] Añadir un desplegable para bloquear usando Rasgos
Hola @artf, Espero que estés bien, Me preguntaba si podríais ayudarme con algún problema sencillo que estoy teniendo (recientemente he empe...
Issue #1707
Encontrar enlaces de imágenes en el editor
Estoy intentando integrar GrapesJs en reactJs. ¿Podrías ayudarme con la siguiente pregunta sobre GrapesJs-React? • ¿Hay alguna forma de enc...
Plugins de pago que cumplen con este problema
Seleccionado por temas clave y relevancia de etiquetas para ayudarte a enviar más rápido.
Cargando recomendaciones de plugins de pago...
Consulta los plugins de código abierto de GrapesJS en GitHub O haz una búsqueda rápida en nuestro catálogo gratuito.
Explora plugins gratuitos →Los plugins premium incluyen soporte, actualizaciones regulares y funciones listas para producción — ahorrando días de trabajo de integración.
Explora plugins premium →Explorar categorías de plugins
Ve directamente a las páginas de categorías de plugins en el marketplace.