¿Cómo cargar hijos de un componente de solo lectura?
¡Hola! Puedes establecer la propiedad arrastrable del componente objetivo de esta manera: de este modo, solo podrá arrastrarse dentro de la ranura. Lo mismo puede hacerse con el tipo de solo lectura. Si necesitas más ayuda para tu caso específico, agradecería que lo intentaras. Salud.
Lee la respuesta completa abajo ↓Pregunta
Estoy intentando montar un componente de solo lectura (arrastrable, soltable, etc., todo configurado en falso) y permitir que el usuario edite componentes hijos en su interior.
Por ejemplo, si tengo el siguiente contenido
'''html
<div class="wrapper"> <header>Un cabecero</header> <div> EDITOME </div> <footer>Un pie de página</footer> </div> ```Quiero cargar todo este contenido dentro del componente y permitir que el usuario arrastre nuevos bloques donde diga "EDÍTAME".
Respuestas (3)
¡Hola! Puedes establecer la propiedad arrastrable del componente objetivo de esta manera:
this.set('arrastrable','ranura, ranura *')
de este modo, solo podrá arrastrarse dentro de la ranura. Lo mismo puede hacerse con el tipo de solo lectura. Si necesitas más ayuda para tu caso específico, agradecería que lo intentaras. Salud.
¡Hola! Si te refieres a inyectar el componente en el editor sin interacciones del usuario, puedes usar:
editor.setComponents (tu definición de componente)
Más sobre esto aquí
permitir que el usuario arrastre nuevos bloques donde diría "EDITARME"
Si te refieres a hacer que el componente de solo lectura vuelva a ser editable, se puede lograr de esta manera:
editor.getWrapper().findType('tu tipo de solo lectura')[0].set('droppable',true)
Más sobre esto aquí ¡Salud!
@pouyamiralayi ¡Gracias! He implementado un componente 'Slot' y estoy anulando los atributos dentro del método init
'''javascript const Slot = () => ({ modelo: { Predeterminados: { redimensionable: falso, Contenido: '<div style="min-height: 75px" class="teditor-wrapper"></div>' }, init() { Anula las banderas en caso de que la ranura se cargue dentro de un componente solo de lectura this.set ('droppable', cierto) this.set ('hoverable', cierto) this.set ('editable', cierto) this.set ('removible', cierto) this.set ('badgeable', cierto) this.set ('estilizado', cierto) this.set ('resaltado', cierto) this.set ('copiable', cierto) this.set ('seleccionable', cierto) } }, isComponent: el => el.tagName === 'DIV' && el.classList.contains('teditor-wrapper') })
Slot.id = 'ranura'
exportar ranura por defecto
El problema que tengo ahora es que el uso puede arrastrar un elemento por encima de la cabecera de solo lectura, por ejemplo. ¿Hay alguna forma de prevenir este comportamiento?
- Carrocería
- Solo lectura
- Ranura
- Texto
- Imagen
- Ranura
- Solo lectura
Quiero evitar que se suelten objetos entre Cuerpo y Solo Lectura. Pensé que podría anular el componente por defecto con droppable=false, evitando que se caigan cosas sobre el cuerpo, pero no estoy seguro de cómo hacerlo.
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #1912
[PREGUNTA] Componentes personalizados hijos por defecto
Hola, Estoy intentando entender cómo puedo lograr lo siguiente.Crear un componente con un contenido predeterminado como hijos.Crea un bloqu...
Issue #1179
[Pregunta] No se pueden cargar estilos guardados como !importante
¡Hola! Estoy intentando que todos los estilos de usuario tengan la bandera "!important", para evitar que otras clases existentes lo anulen...
Issue #2192
[PREGUNTA] ¿Es posible tener diferentes características de componentes para distintos dispositivos?
Estoy intentando crear un componente deslizante que tenga rasgos como 'número de diapositivas' y quiero que ese rasgo sea diferente para ca...
Issue #1964
[PREGUNTA] Requisitos mínimos para crear un componente personalizado
He estado leyendo la documentación todo el día sobre cómo crear un componente personalizado. También he mirado grapesjs-mjml como ejemplo....
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.