Issue #3131💬 RespondidoAbierto el 11 de noviembre de 2020por JoshmamroudReacciones 0

Pegar como texto plano en el componente de texto añade <tipo de fuente /> envoltorio al texto pegado

Respuesta rápidapor Joshmamroud

@artf sabes si esto ocurre en el componente, en el RTE o en otro sitio? ¿Podrías indicarme la dirección correcta? Cualquier ayuda con esto sería muy apreciada. ¡Gracias!

Lee la respuesta completa abajo ↓

Pregunta

Versión: 0.16.27

¿Puedes reproducir el error de la demo?

[] Sí [X] No

¿Cuál es el comportamiento esperado? Pegar como texto plano (nodo de texto) sin Grapes JS envolviendo texto pegado en <fuente /> elemento.

¿Cuál es el comportamiento actual? Cuando pego texto plano en un elemento de texto vacío, el editor lo envuelve en un elemento <font />.

Antes de que se pegue el texto ! Screenshot_1

Después de pegar texto (como texto plano) ! Screenshot_2

El contenido de mi portapapeles es texto plano, luego lo pego como texto plano y aún así se envuelve en un elemento de <fuente />. Esto no ocurre cuando ya hay contenido en el componente de Texto.

El texto "Soy un elemento de texto. Haz doble clic en mí y empieza a escribir." en realidad no está en el componente de Texto, sino que se añade usando una regla de CSS :vacío.

¿Alguien sabe por qué está pasando esto y cómo puedo solucionarlo?

Gracias, Josh

Respuestas (4)

Joshmamroud16 de noviembre de 2020

@artf sabes si esto ocurre en el componente, en el RTE o en otro sitio? ¿Podrías indicarme la dirección correcta? Cualquier ayuda con esto sería muy apreciada. ¡Gracias!

artf19 de noviembre de 2020

No puedo reproducirlo, pero veo que usas un componente personalizado de 'dm-text', así que eso podría ser una razón.

Joshmamroud19 de noviembre de 2020

@artf No lo creo. Aquí está la configuración del tipo de componente dm-texto ''' JavaScript { extiende: 'texto', modelo: { Predeterminados: { nombre: 'Texto', Rasgos: [], Editable: Cierto, Droppable: falso, Textible: Cierto, estilo: { relleno: '10px', Ancho: '100%', Altura: 'Auto', }, estilizado: [ 'color de fondo', 'paquete-interrumpido',

'color', 'alineación de texto', 'tamaño de fuente', 'familia de fuentes', 'peso de fuente', 'altura de línea',

'ancho de borde', 'color de borde', 'estilo frontera',

'acolchado', 'acolchado', 'relleno-derecho', 'acolchonado-fondo', 'acolchado-izquierda',

'radio de frontera arriba izquierda', 'radio de frontera superior derecha', 'radio de borde inferior derecho', 'radio de la frontera inferior izquierda', ], }, }, };

¿Ves algo aquí que pueda estar causándolo?
ClaudeCode17 de mayo de 2026

Gracias por informar de esto, @Joshmamroud.

El problema con Pegar como texto plano en el componente de texto añade <fuente /> wrapper al texto pegado parece ser una condición de carrera o un problema de sincronización de gestión de estado. Esto suele ocurrir cuando los eventos del ciclo de vida de los componentes y las modificaciones del DOM se superponen, creando un estado inconsistente.

Qué probar:

  1. Añadir un envoltorio setTimeout para asegurar que el DOM se ha asentado: '''javascript setTimeout(() => { Tu operación aquí }, 0);

2. **Comprobar el orden de inicialización** — asegúrate de que los componentes estén completamente cargados antes de interactuar con ellos

3. **Utilizar el sistema de eventos del editor** — escuchar los eventos de finalización:
'''javascript
editor.on('component:mount', (component) => {
  Es seguro interactuar con el componente aquí
});

Recomendaciones de siguientes pasos:

  • Prueba con la última versión de GrapesJS si no lo has hecho
  • Proporcionar un ejemplo mínimo reproducible (CodeSandbox) — esto ayuda al equipo a identificar la causa raíz más rápido
  • Incluir errores de GrapesJS, de navegador y de consola en tu informe

Preguntas y respuestas relacionadas

Continúa investigando con debates sobre temas similares.

Plugins de pago que cumplen con este problema

Seleccionado por temas clave y relevancia de etiquetas para ayudarte a enviar más rápido.

Ver todos los plugins

Cargando recomendaciones de plugins de pago...

Opción gratuita

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 →
Opción premium

Los plugins premium incluyen soporte, actualizaciones regulares y funciones listas para producción — ahorrando días de trabajo de integración.

Explora plugins premium →

Tutoriales relacionados

Guías detalladas sobre el mismo tema.

Todos los tutoriales →

Explorar categorías de plugins

Ve directamente a las páginas de categorías de plugins en el marketplace.