Issue #2204💬 RespondidoAbierto el 20 de agosto de 2019por pouyamiralayiReacciones 1

Callback personalizado de procesador para componentes generados desde Vue

Respuesta rápidapor artf1

Mmm, probablemente no lo describí bien, especialmente con esto: '''js Por defecto, GrapesJS ya soporta React Element Así que el objetivo de esta función es simplemente entender los objetos generados a partir de JSX y transformarlos en objetos de definición de componentes de GrapesJS, y NO entender los componentes de R...

Lee la respuesta completa abajo ↓

Pregunta

¡Hola! Recientemente me encontré con esta nueva función increíble introducida aquí Aquí puedes hacer algo de procesamiento del elemento generado por React, lo cual es genial. Por ahora estoy trabajando en algunos componentes de terceros que usan Vue como compilador. El enfoque con el que estoy lidiando actualmente es el siguiente, que funciona bien: '''js script: función () { const appl = new Vue({ EL: '#ccid', data: { Mensaje: 'Botón' }, Plantilla: '<q-btn>{{message}}</q-btn>' }).$mount() $(this).append(appl.$el); }


Resultará algo así:
! [qbtn](https://user-images.githubusercontent.com/53266765/63349094-f292bd80-c36f-11e9-927e-300c4d3e75bd.png)

Ahora el problema es este:

! [qbtn](https://user-images.githubusercontent.com/53266765/63349266-48676580-c370-11e9-94cb-d510315ea075.png)

Cuando redimensionas, redimensionará el elemento del envoltorio, no el que renderizó Vue. Si hubiera una forma de procesar esto en el mismo lugar del componente (como lo hace esta nueva función), sería reconocido por el editor y formaría parte del modelo. ¿Hay alguna solución temporal para esto?

Gracias de antemano.

Respuestas (1)

artf24 de agosto de 2019

Mmm, probablemente no lo describí bien, especialmente con esto: '''js Por defecto, GrapesJS ya soporta React Element

Necesito corregirlo con 
'''js
Por defecto, GrapesJS soporta elementos ya generados a partir del preset JSX de React

Así que el objetivo de esta función es simplemente entender los objetos generados a partir de JSX y transformarlos en objetos de definición de componentes de GrapesJS, y NO entender los componentes de React/Vue en sí

En tu ejemplo, cargas con éxito un componente de Vue pero no puedes editarlo porque no forma parte del editor, es más bien un contenido estático para el editor. Probablemente necesites algo de CSS personalizado para que esos botones se expandan hacia el envoltorio.

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 →

Explorar categorías de plugins

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