Un componente que inserta HTML editable

Question

¿Sería posible crear un bloque que permitiera al usuario escribir en HTML responsivo, ya sea directamente en la plantilla o en un lateral en el gestor de estilo/maquetación?

ryandeba · Accepted Answer

Hola @NorthstarTech,

Acabo de crear un plugin (muy temprano, podría necesitar más trabajos) que puede que te resulte útil: https://github.com/ryandeba/grapesjs-html-block.

Deberías poder incluir ese archivo en tu proyecto e incluir el plugin en la configuración de init de grapesjs: 'grapesjs.init({ ..., Plugins: ['HTML-Block'] })`

Después de hacer eso, deberías ver un nuevo bloque de "código HTML". Arrástrala y suelta en algún sitio, selecciona el elemento y deberías ver un botón de "código" en la barra de herramientas. Haz clic en el botón de código y deberías obtener un modal que te permite editar el contenido HTML.

Avísame si tienes algún problema.

ryandeba · Answer

@chiqui3d Cambia la función 'isComponent' a esta para evitar que el html interno inicial sea analizado por grapesjs en componentes:

isComponent: function(el) {
	if (el.hasAttribute && el.hasAttribute("data-html-code")) {
		return {
			Tipo: 'html-code',
			contenido: el.innerHTML,
			Componentes: []
		};
	}
}

El otro código que publiqué debería impedir que grapesjs analice el html después de editar a través del modal. La clave para ambos es que necesitas poner el HTML interno en la propiedad 'content' en lugar de 'components'.

ryandeba · Answer

Creo que este asunto ya está resuelto y podría cerrarse basándose en el primer comentario aquí: https://github.com/ryandeba/grapesjs-html-block/issues/1. @NorthstarTech podrías confirmar o responder con más detalles si quieres mantener este tema abierto?

Un componente que inserta HTML editable

Pregunta

Respuestas (3)

Preguntas y respuestas relacionadas

[PREGUNTAS] Bloque de código personalizado y JS

Gestor de activos por defecto en un componente personalizado

[PREGUNTAS] Lienzo en modal

[PREGUNTA] Cambios de ID al importar HTML o pasar HTML en components prop en config.

Plugins de pago que cumplen con este problema

Tutoriales relacionados

🚀 Introducing GrapesJS Email Blocky: The Ultimate Email Block Library for GrapesJS

Explorar categorías de plugins