No se puede hacer que los componentes personalizados sean hoverables/seleccionables/badgables
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)
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
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?
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.
Issue #1888
[Pregunta] Añadir html personalizado dentro de Canvas
Hola, Estoy usando uvas para exportar un json personalizado con toda la información que necesito, en lugar de HTML y CSS. Para hacer eso, e...
Issue #1525
Cómo obtener datos de formularios en grapesjs
Hola a todos, Estoy usando el bloque Forms en grapejs y uso grapesjs con angular 6. Pero no entiendo que ¿cómo puedo obtener datos de los f...
Issue #3074
Renderizado de componentes angulares en GrapesJS.
Renderizado de componentes angulares en GrapesJS. Estoy creando un editor Angular con GrapesJS. Puedo integrar GrapesJS en mi proyecto Angu...
Issue #2011
Construcción de componentes gjs
Hola a todos, Estoy usando el plugin grapesjs-webpage-preset y me gustaría combinar mi gjs-html con mi gjs-css para que todos los estilos 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
Ship to Production Faster: What’s New in GrapesJS Shadcn
Supercharge your page builder! GrapesJS Shadcn adds live drag previews, rich text / commands, dynamic data, and canvas presets to ship to prod faster.
Tutorial
How to Build a Production GrapesJS Editor: The Complete Walkthrough of Brief, Preset, Plugins, and Services
A complete walkthrough of building a production GrapesJS editor: how to choose a preset, pick plugins, and scope setup services without burning a sprint.
Tutorial
GrapesJS Inline RTE Plugins Update: CKEditor 5 v0.1.4 and Froala Inline Text Editor
CKEditor 5 Inline for GrapesJS v0.1.4 fixes Studio SDK toolbar clipping, iframe injection and link balloon bugs. Compare with Froala Inline — both $69.
Explorar categorías de plugins
Ve directamente a las páginas de categorías de plugins en el marketplace.