Issue #2506💬 RespondidoAbierto el 13 de enero de 2020por andrewryan1906Reacciones 1

No se puede hacer que los componentes personalizados sean hoverables/seleccionables/badgables

Respuesta rápidapor andrewryan19061

Así que, Lo que acabé haciendo en su lugar fue usar elementos Angular, pero NO compilar los elementos en un componente web (quería evitar la complejidad extra). Esto me evitó tener que cambiar los elementos del DOM, así que el editor GrapesJS está funcionando bien. No hay más problemas. ¡Gracias! Andrew

Lee la respuesta completa abajo ↓

Pregunta

Estoy usando GrapesJs con Angular y ampliando la funcionalidad usando componentes de Angular. Así que mi plantilla es así:

<rs-wc-custom-component lock_editing_in_pages custom-component-id="custom_component-KG3g7xE6Yf2SzTRTPA8ESjULVAlwmCsi" id="ij1i">
</rs-wc-custom-component>
<rs-wc-menu lock_editing_in_pages id="i1un">
</rs-wc-menu>
<div class="container">
  <div lock_editing_in_pages id="icom">
    <p>Inserta tu texto aquí
    </p>
  </div>
</div>

Todo esto funciona bien; He añadido DomComponents al diseñador, y los componentes aparecen en el diseñador de capas e incluso puedo cambiar rasgos sin problema. Todo se renderiza como debe.

Sin embargo; aunque puedo seleccionar mi componente de Texto y ver una insignia, no puedo seleccionar rs-wc-custom-component ni rs-wc-menu. Cuando hago clic en los objetos, no aparece ningún rectángulo azul ni se muestra ninguna insignia; La única forma de seleccionarlos o cambiarlos es a través del panel de capas a la izquierda.

¿Qué tengo que hacer para que sean seleccionables?

Respuestas (3)

andrewryan190621 de enero de 2020

Así que,

Lo que acabé haciendo en su lugar fue usar elementos Angular, pero NO compilar los elementos en un componente web (quería evitar la complejidad extra). Esto me evitó tener que cambiar los elementos del DOM, así que el editor GrapesJS está funcionando bien. No hay más problemas.

¡Gracias! Andrew

andrewryan190613 de enero de 2020

Esto podría ayudar.

Como parte del procesamiento del elemento, lo estoy cambiando por mi elemento angular sobre la marcha... Así que, después de renderizar la etiqueta rs-wc-custom-component, espero 1 ms y genero un componente dinámico de Angular, y cambio el componente rs-wc-custom-por mi componente dinámico de Angular.

¿Podría ser ese el problema?

artf18 de enero de 2020

Como parte del procesamiento del elemento, lo estoy cambiando por mi elemento angular sobre la marcha... Así que, después de renderizar la etiqueta rs-wc-custom-component, espero 1 ms y genero un componente dinámico de Angular, y cambio el componente rs-wc-custom-por mi componente dinámico de Angular.

Definitivamente esto suena como el principal problema desde el punto de vista del editor. Cuando GrapesJS analiza elementos, asocia modelos de componentes al DOM, así que, cuando intentas interactuar con ellos, el editor realmente usa su modelo. Pero no me queda claro cómo se pueden usar Capas (que usan los mismos modelos de Componentes). ¿Puedes crear una pequeña demo en directo?

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.