Preguntas sobre alguna personalización.
Entonces, lo primero de todo, ¿cómo puedo incluir mi propia hoja de estilo en el iframe del editor? Puedes inyectar 'estilos' y 'javascripts' en Init mediante opciones de canvas '''js grapesjs.init({ ... lienzo: { Scripts: ['https://.../file1.js', 'https://..../file2.js'], Estilos: ['https://..../file1.css', '...'], }...
Lee la respuesta completa abajo ↓Pregunta
Hola a todos,
Primero, muchas gracias por tu trabajo, este proyecto parece realmente prometedor. Tengo algunas preguntas para una página web que estoy creando.
En mi caso no necesito un Constructor de Páginas completo, sino solo una ayuda para que el usuario final cree/edite el contenido de las páginas y publicaciones de forma visual, así que algunas partes de la página deberían ser visibles en el editor, pero el código HTML final no debería incluirlas (como el encabezado de página, el pie de página y otras cosas).
Ahora, después de pasar dos días intentándolo, hay cosas que realmente no entiendo. Entonces, lo primero de todo, ¿cómo puedo incluir mi propia hoja de estilo en el iframe del editor?
Ahora mismo lo que hago es recorrer document.styleSheets para encontrar la hoja de estilo que quiero, después de eso echo un bucle sobre cada cssRule y guardo su contenido en una cadena con cssText. Luego inyecto el CSS en el editor con editor.setStyle(). Este método realmente funciona, el problema es: 1 - es lento (tengo mucho CSS para incluir) 2 - el CSS que estoy inyectando se muestra en el editor CSS (y eso es malo, no quiero que el usuario final vea o edite los estilos, y no quiero exportarlo porque ya lo tengo)
Mi segundo problema es que tengo algunas partes de mi sitio que necesito mostrar en el editor, pero no quiero que el usuario las edite ni que sean visibles en el editor HTML. Solo deberían poder editarse a través de una barra lateral general de Configuración de Páginas.
Mi tercera pregunta es: ¿cómo creo una nueva barra lateral (no encuentro documentación sobre eso), como el gestor de estilos o el gestor de capas, ya que necesito que cree una nueva barra lateral para algunas opciones generales de la página.
Espero haber podido explicarme.
Espero que pueda obtener una respuesta pronto.
Un saludo y gracias.
Respuestas (2)
Entonces, lo primero de todo, ¿cómo puedo incluir mi propia hoja de estilo en el iframe del editor?
Puedes inyectar 'estilos' y 'javascripts' en Init mediante opciones de canvas '''js grapesjs.init({ ... lienzo: { Scripts: ['https://.../file1.js', 'https://..../file2.js'], Estilos: ['https://..../file1.css', '...'], } })
> Mi segundo problema es que tengo algunas partes de mi sitio que necesito mostrar en el editor, pero no quiero que el usuario las edite ni que sean visibles en el editor html. Solo deberían poder editarse a través de una barra lateral general de Configuración de Páginas.
Creo que en este caso puedes intentar crear un nuevo [componente personalizado](https://github.com/artf/grapesjs/wiki/Components) similar a este
'''js
domc.addType('void-component', {
model: defaultModel.extend({
Valores por defecto: { ... defaultModel.prototype.defaults,
Style: { 'pointer-events': 'None' } // No podrás seleccionarlo
},
toHTML() {
regresar ''; retorna ningún HTML
}
}, {
isComponent: function(el) {/**/},
}),
view: defaultView,
});
Y luego, en tus plantillas, establece el tipo explícitamente '''html
<div data-gjs-type="void-component"> ... </div> ```¿cómo creo una nueva barra lateral?
Quizá quieras usar Panels API, pero no te limites solo a los paneles de grapesjs, puedes crear tus propios contenedores, con tus estilos, tus animaciones, solo tienes que meter cosas dentro y usar la API de grapesjs. Desde el https://github.com/artf/grapesjs/releases/tag/v0.14.5 incluso puedes cambiar dónde renderizar los paneles integrados
Este hilo se ha bloqueado automáticamente porque no ha habido actividad reciente desde que se cerró. Por favor, abre un nuevo problema para bugs relacionados.
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #428
Cambiar el fondo del cuerpo
Hola, Antes que nada, quiero daros las gracias por este proyecto increíble! Tengo algunas preguntas sobre el editor, y más concretamente so...
Issue #1150
[Pregunta] Obtén subidas como Base64
Hola a todos, Necesito ayuda para integrar esto en una aplicación web que tengo. Todo se renderiza y funciona como se espera, pero estoy in...
Issue #1588
[PREGUNTA]
¡Hola a todos y gracias por vuestro magnífico trabajo y por esta API! Tengo una pregunta sobre la caja, que envuelve todos los componentes...
Issue #1537
Componente duplicado, no estilo
Hola, Antes que nada, muchas gracias por el trabajo increíble ❤️ !! Tengo una pregunta sobre la herramienta de duplicación, así que aquí es...
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.
Explorar categorías de plugins
Ve directamente a las páginas de categorías de plugins en el marketplace.