Tengo un problema con el componente de vídeo. Selecciono proveedor y añado el origen del vídeo y luego guardo el html, pero cuando cargo el html de nuevo en el editor, la fuente del componente de vídeo se reemplaza por < svg xmlns="http://www.w3.org/2000/svg" width="100" viewBox="0 0 24 24" estilo="relleno: rgba(0,0,0...
artf
Hola @olgertpysqyli deberías seguir esto y confiar en los datos JSON para editar https://grapesjs.com/docs/modules/Storage.html#store-and-load-templates
Hola... Necesito poner el nombre personalizado de AF en mis componentes. Puedo hacerlo añadiendo data-gjs-custom-name="minombre", pero ¿cómo lo hago en elementos ya insertados? Intenté ser editor. SelectorManager.getAll().each(selector => $('h1').attr("data-gjs-custom-name","h1")); Pero no funciona. ¿Cómo es posible p...
artf
puedo hacerlo añadiendo data-gjs-custom-name="minombre" Usa 'name' en lugar de 'custom-name' (este se usa para capas cuando las editas), así que 'data-gjs-name="minombre"'¿Cómo es posible poner un nombre a todos los h1, por ejemplo? Puedes...
[PREGUNTA] ¡Hola! Estoy recuperando códigos dinámicos html, css y js de la base de datos. ¿Cómo puedo crear bloques con esto? Actualmente, este es mi código, ``` editor. BlockManager.add($aBlock['name'], { id: $aBlock['nombre'], Etiqueta: $aBlock['Nombre'], Categoría: $aBlock['Categoría'], Contenido: $aBlock['html'],...
cristianumali22
Hola @pouyamiralayi, así que, hago, 'contenido: '<div></div><style></style>'' ¿separará el HTML del CSS en la función de descarga de código de GrapesJS? Ten en cuenta que en cada bloque de código hay diferentes HTML, CSS y JS. ¿El CSS de,...
pouyamiralayi
@cristianumali22 tu código se ve bien y no se ejecuta antes de la inicialización de grapesjs porque estás pasando la referencia y no la llamas realmente. Te sugiero usar el grapesjs cli porque te hace todo el montaje y te proporciona un en...
pouyamiralayi
@cristianumali22 por favor, considera poner tanto tu ''html'' como ''css'' dentro de la propiedad ''content'' de esta manera: Para incluir scripts, debes definir un nuevo tipo de componente y luego proceder a component & js ¡Salud!
Quiero hacer que un elemento html externo se pueda arrastrar a GrapesJS, como cuando puedes arrastrar un bloque y que añada algo. Tengo una muestra, con un div con draggable="true", un div normal y una imagen. La imagen se arrastra bien y si seleccionas el texto del div normal y lo arrastras, funciona, pero el div con...
artf
@Davidvlv HTML5 D&D no funciona así, añadir 'draggable="true"' no es suficiente. Esto solo le dice al navegador "¡Oye, puedes arrastrarme!", pero también tienes que especificar QUÉ quieres arrastrar (usando la API 'dataTransfer.setData')....
sdrebel
¿Has probado esto? editor = grapesjs.init({ ....... dragMode: 'absoluto', // 'absoluto' | 'traducir' ...... }) Y también puedes configurar el modo de arrastre para cada componente. https://grapesjs.com/docs/api/component.html#index
Davidvlv
Hola @sdrebel Esto no resuelve mi problema. He adjuntado un vídeo mostrando el jsfiddle: fíjate en que el div con arrastrable="true" no se arrastra en el editor. Grapesjs importan draggable.zip
¿Es posible añadir un botón extra para llamar a cualquier otra acción dentro del gestor de activos por defecto? Algo así: <img width="895" alt="Captura de pantalla 2020-02-21 at 16 45 45" src="https://user-images.githubusercontent.com/26910184/75078089-48385600-54ca-11ea-9ad0-6279e7a8b20e.png">
Hola, Estamos teniendo un problema importante: nuestros diseños usan grandes cantidades de 'display: flex; columna: flex-direction;', y esto está causando un lag extremo en los navegadores Chrome y Safari (no Firefox). Si el estilo de 'dirección flexible' está configurado en 'row', no hay ralentización alguna. Ejemplo...
artf
Sí, definitivamente es más lento, no sé qué está pasando realmente, pero a primera vista podría ser esta función la que comprueba si el componente es un bloque (por ejemplo, div) o un elemento en línea (por ejemplo, span). https://github.c...
Hola, ¿hay alguna forma de establecer el ancho de un modal? Actualmente está configurado a 850px por CSS, pero me gustaría crear un diálogo con poca cantidad de texto y es demasiado grande para esto: ! imagen Pero sería genial conseguir esto: ! imagen Sin anular el CSS, porque aún me gustaría usar modales grandes. He...
ronaldaug
Para quienes no saben cómo usar los 'atributos' modales. Puedes añadir la opción 'opts.attributes' al método open de modal como se indica a continuación. '''javascript const modal = editor. modal; const opts = { atributos: { Clase:'Mi-Clas...
kaoz70
Vale, lo que estoy pensando es crear una función que pueda establecer el ancho como: setWidth('400px'), y también un método para establecer atributos personalizados: setAttributes({'data-custom-attribute': 123}). Creo que se necesitan 2 fu...
kaoz70
Hola, siento que ahora esté cargado de trabajo, si @sunnykgupta intentarlo sería genial.
Veo que los números de versión están incrementados, pero el paquete no se publica en npm después de la 0.15.15. Hora de un 0,16 😃 Otro problema sobre el NPM: https://github.com/artf/grapesjs/issues/2568 (no sé si está relacionado)
artf
Puede que haya una nueva versión disponible en el repositorio de desarrollo, pero eso significa que la versión aún no es estable para publicarse 😉
Hola @artf, Trabajar con Grapesjs ha sido genial hasta ahora. Es fácil de usar una vez que lo entendemos. Solo tengo una sugerencia, ¿es posible incluir cuadrículas y opciones de escala en el editor?
artf
¿A qué te refieres con cuadrículas y escala?
sdrebel
Hola @artf, Adjunto la imagen. Algo así ! imagen
artf
No, esto no está disponible ni siquiera está planeado, pero si alguien quiere intentar integrarlo (aunque sea a través de un plugin), por favor que me lo haga saber
¡Buenos días! ¿Cómo voy a crear una subcategoría a partir de la categoría principal? ¿Es posible que sea como la imagen adjunta? PD. La imagen solo está editada para mostrar lo que quería hacer. ! imagen