Callback personalizado de procesador para componentes generados desde Vue
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)
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.
Issue #1341
[Pregunta] Cómo trabajar con Componentes Personalizados
Hola, Tengo algunas preguntas y problemas sobre y con el editor de uvasProblema 1 En un componente, ¿qué clase se extiende? ¿Es realmente e...
Issue #3119
[PREGUNTA] ¿Cómo crear un bloque personalizado hecho con componentes de grapesjs?
Hola, quiero que me hagan bloques personalizados con componentes de grapesjs. Encontré la solución para añadir componentes: https://github....
Issue #3130
[Pregunta] Enfoque estándar en una ligera reestructuración de la barra de herramientas y la insignia HTML
Versión: '0.15.10' Esta pregunta pretende validar si existe una forma adecuada de extender la https://github.com/artf/grapesjs/blob/master/...
Issue #2181
Funciones/variables globales
¡Hola! Recientemente he notado este problema. Creo que sería beneficioso tener esta función. En contraste con el enfoque sugerido por @artf...
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.