He seguido la documentación y he podido subir imágenes. Cuando arrastro un bloque de imagen (usando el preajuste del boletín) y selecciono una imagen de los recursos, añade una imagen en blanco al lienzo. Necesito hacer doble clic en la imagen en el lienzo y seleccionar la imagen de nuevo para que se muestre. ¿Hay alg...
artf
... Añade una imagen en blanco al lienzo No se puede reproducir. ¿Alguna demo en directo? ¿O al menos un screencast/gif?
hillelcoren
He preparado un ejemplo básico y funciona, debe ser un problema de mi código.
hillelcoren
¡Perdona que te haga perder tiempo! Si alguien más ve este problema en mi caso, ocurría porque estaba usando el evento canvas:drop para ajustar el HTML (para hacer una fusión de correos). Lo he solucionado comprobando si el usuario está de...
Así que estoy intentando arrancar esta integración y creo que MDL Framework no funciona, porque los componentes JS no están inicializados en absoluto Aquí está el plunker He investigado el código tanto de GrapesJS como de MDL y ambos parecen funcionar bien. Probé varias formas de inicializar MDL JS: canvas init, init...
artf
Hola @vrudikov JS parece cargarse correctamente (y eso se puede ver en otros elementos de JS como el diálogo), pero parece que MDL no se está autoinicializando. Creo que solo tienes que encontrar cómo llamar a su método init
vrudikov
Para todos los que quieran tener integración con Material + GrapesJS, simplemente usad material-components-web
lock[bot]
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.
Hola, Tengo algunas dudas sobre el estilo del lienzo, en este caso tengo una configuración así. '''js var editor = grapesjs.init({ contenedor: '#gjs', lienzo: { Estilos: ['/constructor/css/builder-desktop.css'] } }) ``` Por defecto uso CSS con el nombre 'builder-desktop.css' como estilo de lienzo por defecto. Y luego...
hibuno
Hola, Olvídalo, yo soluciono este problema, solo añade eventos al cambio así. '''javascript editor.on('change:device', function(e) { if (e.attributes.device !== 'Escritorio') { editor.setStyle('/builder/css/builder-mobile.css') } else { ed...
lock[bot]
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.
Necesito que la función copie automáticamente el código html/css en el componente de código de vista. ¿Existe alguna función predefinida? ¿o debo implementarlo directamente?
hibuno
Hola @poirin, Tengo alguna solución, la semana pasada también tuve este problema, intenté guardar HTML y CSS actuales sin copiar manualmente. Y abajo está mi código. --- Añade un panel personalizado, por ejemplo. botón superior izquierdo (...
artf
Si hablas de almacenar tus plantillas en la base de datos o cualquier otro endpoint remoto donde puedas configurar el Remote Storage integrado, echa un vistazo aquí #778
lock[bot]
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.
Hola, Para empezar, esto es lo que llevo mucho tiempo buscando, así que gracias por vuestro esfuerzo. A continuación, me gustaría añadir una fuente en la sección Tipografía | Lista desplegable. ¿Cómo puedo añadir uno? Nota: He visto publicaciones donde sugieres añadir una nueva hoja de estilo, pero quiero que solo se...
IceCrystal0k
Así es como añadí nuevas fuentes al gestor de estilos: Llama a estas funciones después de inicializar, o en editor.on('load', ()=> { .... addFonts() ... }) Si usas un preset como el de newsletter que altera el gestor de estilos tras la car...
artf
Hola @webnoob actualmente la única forma de hacerlo es añadirlo a través del objeto de inicialización. Aquí tienes un fragmento de la demo https://github.com/artf/grapesjs/blob/gh-pages/demo.html#L1045-L1062 Como puedes ver, no especifico...
webnoob
Gracias por esto. Según lo que me has mostrado arriba, he usado el StyleManager para añadir la fuente extra, así: Supongo que usando este método tendría que importar la fuente real a través de una hoja de estilo al editor para que funcione...
He implementado un nuevo plugin que añade otro botón en la ventana de exportación, y funciona bien. Sin embargo, cuando aparece la página, no hay espacio entre ella y el botón existente de "Exportar ZIP". ¿Cómo podría añadir un espacio al estilo de Grapesjs? ¿Es solo averiguar qué propiedades de los elementos del dom...
ryandeba
Hola @kewilson, Si he entendido bien tu problema, apuesto a que ajustar el margen izquierdo en vez del relleno izquierdo funcionaría mucho mejor... ¿Está esta captura de pantalla cercana a lo que intentas conseguir? Si es así, podrías reem...
ryandeba
Hola @kewilson, Esto es un poco difícil de manejar sin un ejemplo de código en vivo (como una demo de jsfiddle), pero estoy viendo algunos problemas:'botones let = editor. Modal.getElementsByTagName("button") || {};`Probablemente esto esté...
kewilson
vale, así que button.style.paddingLeft = "30px"; Funciona, pero he notado que la zona del borde donde están los botones no distingue entre ambos... es decir, no hay borde de botón alrededor del texto de cada botón. Como el botón Exportar Z...
No veo ningún bloque básico en el que puedas crear una tabla. Aunque hago el bloqueo, es imposible editar el texto. Ejemplo de bloque Con esta opción no puedo modificar el contenido de cada TD y no me dan la opción de duplicar columnas o filas. @artf planeas crear un bloque de tabla?
chiqui3d
Envolver el texto en un párrafo funciona bien. pero como dije antes, planeas añadir opciones de tabla personalizadas, para los bordes y el color general de la mesa.
ionic666
@chiqui3d hola, ¿me puedes decir cómo manejar el bloque de mesas?
lock[bot]
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.
Estoy reafirmando un tipo de enlace así: Cuando se crea mi botón ('<a>'), se crea así: '<a class="btn botao-roxo">Botão</a>' Me gustaría saber cómo puedo cambiar el contenido de este (Botão) en los rasgos.
JulyanoF
Exactamente lo que buscaba: Definir nuevo tipo de rasgo
lock[bot]
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.
Lo que intento conseguir: Tengo un fragmento de código que necesito ejecutar cuando un componente está "dropeado". He puesto "dropped" entre comillas, porque necesita disparar cuando termina el movimiento tlb. Así que, como usuario, si hago clic en el icono de Mover en la barra de herramientas, al terminar de mover el...
artf
¿Has probado con Components-&-JS?
maxtacco
Tengo el mismo problema: no consigo identificar un evento en un componente para escuchar cuando termina el move.
maxtacco
Así que, la única forma en que pude que funcionara razonablemente fue escuchando el evento "selectedComponent" que se activa en https://github.com/artf/grapesjs/blob/b62e032b06f45382849b59e6a3f32049f0a021fc/src/commands/index.js#L168 en el...
En mi caso, intento cambiar dinámicamente las URLs de almacenamiento y carga que usa el gestor de almacenamiento remoto. Por lo que puedo ver, el editor no detecta ni usa ningún cambio en la configuración si los cambio directamente, es decir, '''Editor. Config.storageManager.storeUrl = 'blah'''' después de que el edit...
maxtacco
Puedes acceder a RemoteStorage y actualizar URLs en cualquier momento: '''javascript const RemoteStorage = editor. StorageManager.get('remote'); RemoteStorage.set('urlLoad', [urlLoad]); RemoteStorage.set('urlStore', [urlStore]); ```
arthuralmeidap
@ajwootto , Puedes crear un Almacenamiento Remoto personalizado y dentro de él aplicar tu lógica de guardado/actualización personalizado. Echa un vistazo a este enlace: https://github.com/artf/grapesjs/wiki/API-Storage-Manager
ajwootto
Ambas opciones probablemente funcionarían, aunque algo que olvidé mencionar es que en algunos casos quiero reinicializar el editor con componentes y estilos preespecificados (es decir, pasándolos en el init) en lugar de cargarlos desde alm...