Componente hijo no seleccionable al usar vista personalizada
Si añades elementos a través de Vista no puedes seleccionarlos, solo los modelos pueden ser seleccionables Lee esta página https://grapesjs.com/docs/modules/Components.html también creas nuevos tipos sin 'isComponent'
Lee la respuesta completa abajo ↓Pregunta
Estoy intentando crear un componente personalizado que genere su propia vista con HTML anidado. No quiero que este HTML se renderice como un componente, así que uso (usando jQuery)
view: defaultType.view.extend({
init: function () {
$(this.el).html('<div class="container"></div>');
},
getChildrenSelector: function () {
return '.container';
},
})
Pero, si añado componentes hijos, no se pueden seleccionar desde el editor. Solo pueden seleccionarse a través del panel de capas. He creado un jsFiddle del problema: https://jsfiddle.net/pscott/72xgqkdy/
He comprobado que si elimino el estilo 'pointer-events' del padre, los componentes hijos se vuelven seleccionables PERO el padre ya no puede ser colocado y su insignia ya no se muestra.
onRender: function () {
$(this.el).find(this.getChildrenContainer()).css('eventos puntero', '');
}
¿Cuál es la forma correcta de crear una vista personalizada para un componente? ¿Debería usar 'getChildrenContainer'?Respuestas (3)
Si añades elementos a través de Vista no puedes seleccionarlos, solo los modelos pueden ser seleccionables Lee esta página https://grapesjs.com/docs/modules/Components.html también creas nuevos tipos sin 'isComponent'
@artf entiendo cómo usar isComponent. Voy a usar 'fromElement: false', así que no es necesario para cómo quiero usar uvas. No quiero que se seleccionen los elementos añadidos a la vista, pero sí quiero que los componentes anidados sean seleccionables. Actualmente no lo están.
Por ejemplo, si renderizo esto como la vista de Componente:
<div>
<h1>{{PAGE_TITLE}}</h1>
<div><!-- COMPONENTES HIJOS, AQUÍ --<div>>
</div>
Luego, arrastro y suelto un componente hijo en el componente de arriba. No quiero que el '<h1>' o '' anidado <div>se rendericen como componentes en el editor. Supongo que para eso sirve 'getChildrenContainer', ¿es correcto? No he encontrado ninguna documentación sobre este método. El arrastre, solta y renderizado del componente hijo funciona. El problema es que los componentes hijos no se pueden seleccionar ni pasar el cursor aunque tenga esos ajustes activados. Solo puedo seleccionar los componentes anidados a través del Panel de Capas, pero no el editor en sí. ¿Tienes algún ejemplo funcional de cómo usar el método 'getChildrenSelector'? Esto es lo que necesito para poder crear componentes modulares en lugar de 1 componente por elemento HTML. Disculpad si estoy entendiendo mal para qué sirve 'getChildrenSelector'.
Vale, ahora lo entiendo. El 'getChildrenContainer' debería funcionar como esperas, solo intentaré eliminar esos 'pointer-events' y hacer que el 'pasar' funcione más como el 'select'. Por cierto, no necesitas jquery, grapesjs bajo el capó usa cash (que tiene una API similar a jquery), así que puedes hacer: 'this.$el.html('...');' También hay un método para conseguir el recipiente de los niños 'esto.conejaNiños().estilo....'
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #1494
[Pregunta] Clases de viento a cola
Estoy buscando usar Tailwind con GrapesJS, pero este framework utiliza Classes CSS Utility-First para crear layouts rápidos. El problema es...
Issue #563
Tabla <thead> y <tbody> etiqueta se omiten
Hola, Hay un nuevo problema con GrapesJS (quizá). He creado un nuevo componente usando 'bm.add()' en el que he usado un elemento de tabla c...
Issue #1346
[SOLICITUD DE FUNCIÓN] Unidad por defecto de vista deslizante de propiedades
Hola @artf, Creo que el componente deslizante sería útil desde la perspectiva de la experiencia de usuario para la interacción del usuario...
Issue #460
Cuando la vista del componente modifica el HTML, los componentes de texto ya no son editables
Estoy intentando crear un componente personalizado que contenga algo de texto lorem ipsum en el contenido, para editarlo una vez que esté e...
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 →Tutoriales relacionados
Guías detalladas sobre el mismo tema.
Tutorial
Super Tooltip for GrapesJS — Version 0.1.5 Released 🎉
We’re excited to announce the v 0.1.5 update of Super Tooltip, our floating‑menu and tooltip plugin for GrapesJS
Tutorial
GrapesJS in 2026: The Complete Guide to the Open-Source Web Builder Framework
Master GrapesJS in 2026. Architecture, code examples, React integration, plugin development, Studio SDK, and how it compares to other projects
Explorar categorías de plugins
Ve directamente a las páginas de categorías de plugins en el marketplace.