Issue #2771✓ ResueltoAbierto el 13 de mayo de 2020por antman3351Reacciones 12

Componente con textable:1 no funciona desde la versión 0.16.12

Respuesta rápidapor artf6

Dejo aquí un ejemplo funcional de un componente textible https://jsfiddle.net/artur_arseniev/0b9ox72g/

Lee la respuesta completa abajo ↓

Pregunta

Hola, Acabo de actualizar a la versión de Last 0.16.12 y tengo un error al intentar mover un componente que tiene la propiedad 'textable:1' a un componente de texto.

Funciona en la versión anterior 0.16.3.

Cuando muevo el componente me aparece un error en la consola 'Uncaught TypeError: No se puede leer la propiedad 'atributos' de indefinido - ComponentView.js:293'

Aquí puse un ejemplo básico: https://codepen.io/antman3351/pen/pojZWLe

¡Gracias!

Respuestas (3)

0099FF1 de febrero de 2021

Parece que se introdujo en 9c24108dadf2ded39e8805b6c4a5f00c626c468b.

Como señala @antman3351 la llamada 'model.getView().render();' es la causa problemática. Un poco más abajo en la pila de llamadas intentamos actualizar los atributos de la vista, sin embargo, la propiedad 'model' es 'indefinida' cuando intentamos acceder a ella. Si colocas un punto de quiebre en el método ComponentView.remove(), puedes ver que la propiedad 'model' se está borrando antes de que intentemos usarla en 'updateAttributes()'.

bogdanbs15 de septiembre de 2021

Mi dos tomografía a esto. El problema radica en mezclar código asincrónico y síncrono. La habilitación de rte: enable(view, rte) así como los ComponentTextView.onActive y ComponentTextView.disableEditing son ahora, desde la solución para el problema #3475, métodos asíncronos. En la clase Clasificador, el editor de texto enriquecido se activa de forma sincrónica (línea 1133)

'''activeTextModel.trigger('active');'''

pero la instancia de activeRte aún no está completamente inicializada cuando se accede a ella en la línea 1140:

''activeRte.insertHTML && activeRte.insertHTML(outerHTML);'''

Aquí tienes el fragmento completo

if (isTextableActive) {
  const viewActive = activeTextModel.getView();
  activeTextModel.trigger('active');
  const { activeRte } = viewActive;
  const modelEl = model.getEl();
  eliminar model.opt.temporary;
  model.getView().render();
  modelEl.setAttribute('data-gjs-textable', 'true');
  const { outerHTML } = modelEl;
  activeRte.insertHTML & & activeRte.insertHTML(outerHTML);
} else {
  created = targetCollection.add(modelToDrop, opts);
}

La solución en este caso será hacer que los métodos anteriores sean síncronos mientras revisas de nuevo el problema #3475.

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.