Componentes editables en la plantilla renderizada de Handlebars
Solo para aclarar más, ahora siento que mi publicación fue más larga de lo necesario. Investigué un poco más y encontré el #978. El problema descrito allí es idéntico al mío. Básicamente tengo un componente personalizado que tiene varios elementos hijos en la cadena html, pero ninguno de los hijos es seleccionable o e...
Lee la respuesta completa abajo ↓Pregunta
Hola, llevo usando uvas unos días ya. Gracias por el trabajo increíble en este proyecto. He leído la documentación de la API (espero no haberme perdido esta parte) y también he probado algunas cosas. Básicamente, uso uvas para cargar archivos .hbs (manillares) existentes que el usuario podrá editar. Vi una pregunta anterior sobre cómo integrar el manillar en el #938 y seguí el consejo que acabé con.
'''javascript
var comps = this.grapesEditor.DomComponents;
Obtén el modelo y la vista desde el tipo de Componente por defecto var defaultType = comps.getType('default'); var defaultModel = defaultType.model; var defaultView = defaultType.view;
comps.addType('handlebars', { model: defaultModel.extend({ defaults: Object.assign({}, defaultModel.prototype.defaults, { Droppable: Cierto, Editable: Cierto }) }), view: defaultType.view.extend({ El render() debería devolver 'esto' render: función () { Extiende el método de renderizado original defaultType.view.prototype.render.apply(esto, argumentos); plantilla const = Handlebars.compile(this.el.innerHTML); this.el.innerHTML = plantilla(); devuelvo esto }, }), });
Y luego colocar los componentes en el editor así:
'''javascript
this.grapesEditor.setComponents({
Tipo: 'manillares',
content: fileData
});
Esto funciona muy bien y acabo con mi plantilla de manillar renderizada mostrando en el editor con el HTML de origen como plantilla de manillar, que es exactamente lo que necesito. Sin embargo, cuando se introduce la plantilla, aparece como un solo componente en el gestor de capas llamado Handlebars, lo que significa que no puedo editar elementos individuales ni añadir nada nuevo.
! imagen
Esto tiene todo el sentido al leer la documentación y considerar que los componentes son simplemente piezas atómicas que forman los bloques de construcción. Dicho esto, no sé muy bien cómo hacer para que sea
- Puedo traer un fragmento existente del código del manillar
- Renderizar la plantilla del manillar en el edtior
- Conservar el código fuente de la plantilla del manillar
- Que los elementos individuales de la plantilla de manillares renderizados puedan ser editables en el editor de uvas
Veo que pasar la cadena HTML de manillares sin compilar directamente a 'editor.setComponents()' sí funciona para conseguir componentes editables, pero obviamente no me da una plantilla de manillar renderizado. Por otro lado, pasar la cadena de la plantilla HTML del manillar compilado de la misma manera a 'editor.setComponents()' sí funciona para darme componentes editables individualmente desde la plantilla compilada del manillar, pero cambia el html de origen (al html compilado).
Seguiré investigando y leyendo algunas muestras / probando algunas cosas, pero tengo curiosidad por saber si es posible hacer esto de alguna manera con un componente personalizado.
Respuestas (3)
Solo para aclarar más, ahora siento que mi publicación fue más larga de lo necesario. Investigué un poco más y encontré el #978. El problema descrito allí es idéntico al mío. Básicamente tengo un componente personalizado que tiene varios elementos hijos en la cadena html, pero ninguno de los hijos es seleccionable o editable. Todos se incorporan como un único elemento editable en el elemento padre (la mayoría de las veces un '<div>' en mi caso). ¿Es posible iterar entre todos los hijos y hacer que reconozcan componentes individualmente, igual que al usar editor.setComponents(), pero en su lugar usando un componente personalizado? Necesito un componente personalizado porque me gustaría cambiar la vista renderizada para que sea diferente al html original. Gracias
Veo que hay algunos conflictos en algunos puntos:
- Conserva el código fuente de la plantilla del manillar
- Que los elementos individuales de la plantilla de manillares renderizados puedan ser editables en el editor de uvas
Si editas cosas, esperarías que recibieras esas ediciones, ¿verdad? Pero sigues pidiendo la plantilla del manillar como devolución, así que ¿cuál es el sentido de editarlos?
Por cierto, te daré algunas pistas y luego intentaré averiguar qué necesitas (no lo probé): '''js comps.addType('handlebars', { model: defaultModel.extend({ Predeterminados: { ... defaultModel.prototype.defaults Droppable: Cierto, Editable: Cierto }, init() { Si no tengo componentes dentro, compilo la plantilla Y será un contenido editable si (!this.components().length) { this.components(Handlebars.compile(this.get('template'))); } }, toHTML() { Si tengo componentes, seguiré el método original de lo contrario, devuelvo la plantilla si (this.components().length) { return defaultModel.prototype.toHTML.apply(esto, argumentos); } else { return this.get('template'); } } }, { isComponent es obligatorio cuando defines nuevos componentes isComponent(el) { Acéptalo solo cuando se solicite explícitamente el tipo 'manillar'. return false; } }), view: defaultType.view });
Luego añade un bloque así
'''js
editor. BlockManager.add('hdb1', {
etiqueta: 'Plantilla 1',
Contenido: {
Tipo: 'manillares',
plantilla: '<div ...>...</div>', // you Plantilla de manillares
}
})
Este asunto se ha cerrado automáticamente porque no ha recibido respuesta a nuestra solicitud de más información por parte del autor original. Con solo la información que actualmente hay en el asunto, no tenemos suficiente información para actuar. Por favor, contacta con nosotros si tienes o encuentras las respuestas que necesitamos para que podamos investigar más a fondo.
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #1906
Componentes y Js - Plantilla de carga
Hola, Tengo un componente al que se le conecta un JS. Todo se crea usando el JS. Cuando arrastro y suelto mi bloque por primera vez, el JS...
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 #1123
[PREGUNTA] Onload event dentro de la plantilla
¡Hola! Tengo un problema con algunas plantillas. Esta plantilla tiene algunos scripts ejecutándose después de cargar la página. Cuando Grap...
Issue #1047
[BUG] El modelo no puede cambiar después de cambiar el valor en el menú desplegable Seleccionar personalizado.
Hola, Estoy usando el enlace CDN para uvas JS de unpkg.com En mi proyecto, he usado un rasgo personalizado como menú desplegable de selecci...
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.