Issue #1448💬 RespondidoAbierto el 21 de septiembre de 2018por prestonkscottReacciones 1

Componente hijo no seleccionable al usar vista personalizada

Respuesta rápidapor artf1

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

Fragmento de códigoTEXT
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)

artf29 de septiembre de 2018

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'

prestonkscott2 de octubre de 2018

@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'.

artf4 de octubre de 2018

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.

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.