Issue #2261✓ ResueltoAbierto el 10 de septiembre de 2019por raghuv9Reacciones 3

Carga un archivo HTML local en grapesjs

Respuesta rápidapor pouyamiralayi2

¡Hola! Además de leer el contenido del archivo, eso depende mucho de tu entorno (si estás en un entorno de nodos puedes usar el módulo 'FS'), puedes usar editor.setComponents ('tu contenido HTML'). Más información aquí Salud.

Lee la respuesta completa abajo ↓

Pregunta

Fragmento de códigoTEXT
Hola, soy bastante nuevo en Grapejs y quiero cargar un archivo HTML local en la carpeta Assets del editor de Grapesjs, por favor dime cómo puedo cargar un archivo HTML local. Gracias de antemano... 
Aquí está mi código
----------------------------
importar uvas de 'uvas';

importar 'grapesjs/dist/css/grapes.min.css';
importar 'grapesjs-preset-newsletter/dist/grapesjs-preset-newsletter.css';
importar 'grapesjs-preset-webpage/dist/grapesjs-preset-webpage.min.css';

importa gjspresetnewsletter de 'grapesjs-preset-newsletter';
importar gjspresetwebpage desde 'grapesjs-preset-webpage';

exportar default {
        data() {
            return {
                editor: null
            }
        },
        Métodos: {
            cambio() {
                this.$emit('change', this.editor.getHtml());
            },
        },
          montado() {
                const LandingPage = {
                html: '.. /userpage/index.html',
                CSS: ['.. /página de usuario/style.css','.. /página de usuario/css.css','.. /página de usuario/bootstrap.min.css'],
                componentes: nulo,
                estilo: nulo,
                };
                this.editor = grapesjs.init({
                contenedor: "#gjs",
                canvas: {},
                fromElement: cierto,
                componentes: Landing Page.components || LandingPage.html,
                estilo: Página de Aterrizaje.estilo || LandingPage.css,
                Plugins: [],
                pluginsOpts: {
                    "gjs-preset-webpage": {}
                },
                 storageManager: {
                    Tipo: 'Local',
                    pasosAntesDeguardar: 10,
                    urlStore: '',
                    urlLoad: 'https://raghuv9.github.io/Tapmusic/',
                    params: {}, token
                    cabeceras: {},
                    }
                });
        }
    }

Respuestas (3)

👍 Muy útilpouyamiralayi10 de septiembre de 2019

¡Hola! Además de leer el contenido del archivo, eso depende mucho de tu entorno (si estás en un entorno de nodos puedes usar el módulo 'FS'), puedes usar editor.setComponents ('tu contenido HTML'). Más información aquí Salud.

nikolabtt10 de septiembre de 2019

El navegador (GrapesJS se ejecuta en el navegador) no debería poder acceder a cualquier archivo arbitrario desde el sistema de archivos de la máquina anfitriona. Si eso estuviera permitido, podrías añadir algo de JS a una página web y robar archivos a tus usuarios. Si quieres lograr esto, debes alojar tus archivos en un servidor http.

raghuv910 de septiembre de 2019

¡hola! Además de leer el contenido del archivo, eso depende mucho de tu entorno (si estás en un entorno de nodos puedes usar el módulo 'FS'), puedes usar editor.setComponents ('tu contenido HTML'). más información aquí salud.

No, en realidad intento poner el enlace de ese archivo html como url:'.. /somefolder/test.html' así es como quiero cargarlo en el editor en lugar de pegar código html dentro del método set-component, ¿hay alguna posibilidad de hacerlo así (urlLoad:"assets/folder/file.html") usando el método urlLoad dentro de storagemanager?

Preguntas y respuestas relacionadas

Continúa investigando con debates sobre temas similares.

Plugins de pago que cumplen con este problema

Seleccionado por temas clave y relevancia de etiquetas para ayudarte a enviar más rápido.

Ver todos los plugins

Cargando recomendaciones de plugins de pago...

Opción gratuita

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 →
Opción premium

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.