Cómo usar componentes
Hola @Jogai también debes especificar el ''data-gjs-draggable'' en el ''''<td>: ¡Salud!
Lee la respuesta completa abajo ↓Pregunta
Usando GrapesJS 0.15.10 no consigo que los componentes funcionen como pretendía. Probablemente sea cosa mía, así que si es una pregunta, no dudes en cambiar el título del número. (es una continuación de https://github.com/artf/grapesjs/issues/2195)
He hecho un bolígrafo (espero que no pasa nada, no vi las plantillas de fiddle) para mi ejemplo: https://codepen.io/jogai/pen/yLNJgLZ?editors=1011
Veo el mismo comportamiento en Chrome y Firefox.
Se espera que haya una fila con texto que no sea seleccionable, arrastrable o resaltado, pero que en su lugar la fila tenga texto que se pueda arrastrar al otro componente.
Atributos esperados del componente:
data-gjs-selectable="false" data-gjs-highlightable="false" data-gjs-hoverable="false"
Pero en su lugar, los atributos son:
data-gjs-type="cell" draggable="true" data-highlightable="1"
Data-GJS-type está bien, los otros tienen un valor incorrecto, hoverable falta por completo, uno está perdiendo data-GJS por completo y otro no tiene la parte -GJS-.
Respuestas (3)
Hola @Jogai también debes especificar el ''data-gjs-draggable'' en el ''''<td>:
<tablewidth="770" cellpadding="0" cellspacing="0" style="background-color:#CAD;">
<tr style="display:block;padding:15px;">
<td data-gjs-draggable="false" data-gjs-selectable="false" data-gjs-highlightable="false">
Texto componente 1
</td>
</tr>
<tr style="display:block;padding:15px;">
<td data-gjs-draggable="false" data-gjs-selectable="false" data-gjs-highlightable="false">
Texto componente 2
</td>
</tr>
</table>
¡Salud!
Gracias. Al menos eso es una mejora, pero aún así no se tienen en cuenta las demás propiedades, y si intentas arrastrarlo (ya que las flechas de arrastre siguen apareciendo) aparece un error y entonces todo el editor queda en un estado roto. He actualizado el ejemplo.
Actualicé el ejemplo. Es una especie de continuación de https://github.com/artf/grapesjs/issues/2195
Mi suposición es errónea en que draggable necesita el prefijo data-gjs, porque la parte html sin usar componente tampoco lo tiene. Aun así, el TD hijo no se considera parte del componente.
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #2221
¿Alguien podría darme una guía adecuada para crear componentes de celda en blockmanager que añadan otros componentes dentro de ellos (como coumn1, column3/7 y viceversa)?
ADVERTENCIA LEE y SIGUE los siguientes 5 pasos, luego ELIMÍNALOS antes de publicar el númeroSeguir las Directrices de CONTRIBUCIÓN https://...
Issue #1846
[Pregunta]: Usando ngModel en un componente que contiene grupos de tagName
He probado esta solución https://github.com/artf/grapesjs/issues/1819#event-2158016066 Pero sobre componentes personalizados, digamos, Teng...
Issue #3879
Actualizaciones sobre que el Selector Manager no está siendo seguido por Undo Manager
¡Hola @artf! Yo provoqué este problema de error como sugerí en mi pregunta sobre Cómo añadir los eventos/acciones del Selector Manager a la...
Issue #518
Cambia solo el cuerpo de los componentes, no el cuerpo de toda la página.
Hola @artf Como discutimos en el número #374. setComponents configurará el cuerpo y reemplazará todo el contenido presente en la página por...
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.