Hola, estoy creando una solución para que los estudiantes cuenten sus experiencias en el instituto como diapositivas hechas desde el editor de grapej (similar a Canva), y he configurado el editor en modo 'absoluto', que funciona de maravilla. Sin embargo, no consigo encontrar la forma de mover el bloque que se cae en...
artf
No, desafortunadamente, en ese caso, el keymap personalizado sería la única solución. Deberías simplemente conseguir el componente seleccionado y actualizar su estilo.
michaelhofer
He encontrado una solución funcional para esto de la siguiente manera: Los comandos se están añadiendo de la siguiente manera: El método 'moveSelectedElements' hace lo siguiente: Sin embargo, al mover los elementos con las flechas, el lien...
sathudeva7
keymaps.add('ns:my-keymap', '⌘+s, ctrl+s', 'some-gjs-command', { Evitar la acción predeterminada del navegador prevente: cierto, });
Versión: 0.16.44 ¿Puedes reproducir el error de la demo? [ ] Sí [x] No ¿Cuál es el comportamiento esperado? De verdad, cualquier otra cosa Describe el error detallado Estaba intentando cargar scripts en el lienzo. Mi primer intento fue 'scripts: []' y luego me encontré con el problema de sincronización mencionado en e...
KernelDeimos
Hace tiempo que no uso etiquetas en línea <script>y se me olvidó esta advertencia del analizador HTML. Cerrando esto.
ClaudeCode
Gracias por informar de esto, @KernelDeimos. ¿El problema con Intentos de cargar scripts en Canvas quizá rompe JavaScript?? Parece ser una condición de carrera o un problema de sincronización de la dirección estatal. Esto suele ocurrir cua...
Hola, @artf, este es un marco estupendo, muchas gracias. Ahora lo estoy usando para crear componentes del framework móvil de BUI y me encontré con un problema: añadí un área de texto personalizada para rasgos, ¿cómo puedo hacer esto? Cuando los datos cambian, se activan en el script de salida. '''js editor. TraitManag...
Ju99ernaut
Tendrás que añadir el rasgo a 'script-props', puedes leer más aquí https://grapesjs.com/docs/modules/Components-js.html#passing-properties-to-scripts
imouou
Gracias @Ju99ernaut, si son algunas funciones integradas, al modificar el script puede recibir el valor del parámetro, actualmente estoy experimentando problemas: la característica personalizada 'textarea' puede activar cambios como dom, p...
Hola chicos, en vez de peinar el init de esta manera... ¿Es posible usar un archivo SCSS en Canvas? Canvas { Style:['FILE. SCSS'] } ¿O simplemente hacerlo más limpio con un solo CSS de entrada? ¡Gracias! ' myComponent.append(<style> cuerpo { antecedentes: RGB(204,204,204); } .footer { posición: absoluta; Inferior: 5mm...
artf
Puedes usar canvasCSS option si no quieres usar archivos.
devtechk
¡Muchas gracias! ¡Este archivo de configuración me va a ayudar mucho!
ClaudeCode
Gracias por informar de esto, @devtechk. Buena pregunta sobre el css de estilo canvas. El enfoque recomendado con StyleManager es usar la API orientada a eventos. Empieza aquí: Consulta la documentación de GrapesJS de tu módulo específico...
Versión: ¿Actual? Puedes obtener la versión escribiendo 'grapesjs.version' en la consola ¿Puedes reproducir el error de la demo? [ ] Sí [ x] No // para ser justos, nunca lo intenté en la demo ¿Cuál es el comportamiento esperado? Al editar el texto de las capas, añadir una línea nueva y luego hacer backsspace, esperarí...
artf
Vale, voy a proponer una corrección para editar el nombre de capas, probablemente no tenga sentido tener nuevas líneas activadas ahí (haré que paren la edición en Enter/Esc). Para el segundo problema, si usas algo tuyo para redimensionar e...
anatoli-dp
Sí, no me di cuenta de que editor.refresh() existía hasta después. Si no, gracias. Proyecto genial
ClaudeCode
Gracias por informar de esto, @anatoli-dp. Buena pregunta sobre capas el texto no se centra después de crear una nueva línea. El enfoque recomendado con Canvas es usar la API orientada a eventos. Empieza aquí: Consulta la documentación de...
Versión: El de la demo ¿Puedes reproducir el error de la demo? [X] Sí [ ] No ¿Cuál es el comportamiento esperado? La vista móvil y la tableta deberían redimensionar el lienzo cuando la ventana cambia de tamaño. Describe el error detallado La vista de escritorio redimensiona correctamente el lienzo al redimensionar la...
Ju99ernaut
Los dispositivos 'móviles' y 'tablet' tienen pixel pased, así que simplemente redimensionan el lienzo a un cierto número de píxeles independientemente del tamaño de la ventana. Creo que 'escritorio' simplemente pone el lienzo al 100%.
artf
Como mencionó @Ju99ernaut así es como funcionan los dispositivos. Sinceramente, ni siquiera veo la razón detrás de este caso, ¿por qué el usuario debería redimensionar la ventana? También podrías empezar a ver o actualizar estilos que no e...
ClaudeCode
Gracias por informar de esto, @Andrew-Chen-Wang. El problema con la vista de la tableta y móvil que no se redimensionan parece ser una condición de carrera o un problema de sincronización de gestión del estado. Esto suele ocurrir cuando lo...
Versión: v0.16.41 ¿Puedes reproducir el error de la demo? [ ] Sí [x] No ¿Cuál es el comportamiento esperado? Cuando hago clic en un botón, debería añadirse la clase gjs-pn-active. Describe el error detallado Tengo 3 botones para 3 dispositivos diferentes (sobremesa, tablet y móvil). Los tengo en un panel superior y cu...
Ju99ernaut
Grapesjs requiere que tus comandos tengan las funciones de 'correr' y 'parar' para que puedan activar automáticamente los botones del panel, así que quizá ese sea el problema: '''js const cm = editor. Órdenes; Grapesjs no puede activar bot...
kerryj89
@Ju99ernaut Gracias por eso. El estado activo ahora me funciona al crear el panel 'devices-c' a través de 'grapesjs.init()'.
ClaudeCode
Gracias por informar de esto, @RaresVlaiduc. El problema con (v0.16.41) Botón no activado al hacer clic parece ser una condición de carrera o un problema de sincronización de gestión de estado. Esto suele ocurrir cuando los eventos del cic...
Versión: v0.16.41 ¿Puedes reproducir el error de la demo? [ ] Sí [ ] No ¿Cuál es el comportamiento esperado? Cuando tenemos un botón con la propiedad data-gjs-draggable en false, este botón no debería arrastrarse en el lienzo. Describe el error detallado PasosEstablecer un componente de botón con propiedad arrastrable...
artf
Supongo que estás haciendo algo mal, ¿cómo creas esos componentes y sus propiedades? Ni siquiera deberías ver esos atributos en el inspector.
marcepoblet
@artf En nuestros códigos no hemos cambiado nada. La única diferencia es que actualizamos la versión de GrapesJs. Antes tenía la versión v0.16.18 y funcionaba correctamente, pero ahora actualizamos GrapesJs a v0.16.41 y no funciona para lo...
marcepoblet
Establecemos las propiedades con esto: editor.getSelected().atributos.atributos["data-gjs-editable"] = 'falso' editor.getSelected().atributos.atributos["data-gjs-copyable"] = 'falso' editor.getSelected().atributos.atributos["data-gjs-dropp...
Hola. Esta pregunta ya se ha hecho dos veces (aquí y aquí) pero nunca ha recibido respuesta. ¿Hay alguna forma de añadir '<!DOCTYPE html>' como inicio del iframe de lienzo para que el iframe esté en modo estándar? Necesito esto porque intento usar tinyMce como RTE personalizado, y tinyMce requiere modo estándares.
artf
En la próxima versión, añadiré un nuevo asistente para eventos que permitirá editar contenido iframe antes de cargar: '''js editor.on('frame:load:before', ({ el }) => { const doc = el.contentDocument; doc.open(); doc.write("<!DOCTYPE html>...
bgrand-ch
Hola, Para futuras preguntas o problemas técnicos, que no sean errores, la pestaña Discussions de GitHub es el lugar ideal. No olvides cerrar este problema si se resuelve o escribir un nuevo mensaje detallado en la categoría Discussiones -...
artf
No realmente, pero estoy abierto a soluciones para hacerlo personalizable.
¿Qué intentas añadir a GrapesJS? Intento estilizar GrapesJS y posicionar sus elementos (paneles, botones, lienzo, etc.), es molesto anular todos los elementos de estilo. Describe tu solicitud de función Un GrapesJS sin renderizado.Añadir un elemento específico de GrapesJS (paneles, botones, lienzo, etc.) en cualquier...
ClaudeCode
Gracias por informar de esto, @bgrand-ch. ¡Gran sugerencia sobre HAZAÑA: Renderizado! Aunque esta función específica aún no está en la API principal, existen varias formas de lograr un comportamiento similar. Usando el sistema de eventos:...