Hola, Estamos teniendo un problema: el color del nombre de la propiedad, como "Width", es azul al arrastrar un nuevo componente a canvas, pero no modificamos su valor. ! imagen Grapesjs es poderoso y muy útil para nosotros. Sin embargo, somos nuevos en grapesjs y hemos dedicado mucho tiempo a este tema sin ningún avan...
artf
Hola @luziye9 seguro que estás usando un bloque/componente con una propiedad personalizada de 'estilo'... De todos modos, si abres un problema de BUG, tienes que seguir la plantilla (versión de grapesjs, demo reproducible, etc.). Así que,...
ClaudeCode
Gracias por informar de esto, @luziye9. Buena pregunta sobre ¿Cómo cambia el color de la propiedad a azul cuando cambia el valor?. El enfoque recomendado con Canvas es usar la API orientada a eventos. Empieza aquí: Consulta la documentació...
Estaba trasteando con formas de cambiar el estilo de los elementos dentro del lienzo y me di cuenta de que al usar el rasgo color-selecter para establecer la propiedad de color de estilo en línea del elemento (no la etiqueta de estilo en línea que obtienes a través de getCS()), esa propiedad de estilo desapareció comp...
artf
Hola @DodoTrip la razón es que con CSS en línea no puedes definir estilos con estados (por ejemplo, ':hover') ni consultas de medios, así que siempre lo he visto como una limitación inútil en lugar de una característica. A pesar de eso, pu...
ThetripGr
Hola @artf y gracias por tu respuesta. ¿Te importaría darme un ejemplo de cómo se hace ahora mismo o debería avoidInlineStyle hacerlo funcionar fácilmente?
artf
Sinceramente, dejé de usar avoidInlineStyle hace tiempo, pero supongo que debería funcionar 😁
Quiero especificar la posición del elemento arrastrado. por ejemplo, si tengo un bloque de cabecera que, no importa dónde arrastres, debería colocarse en la parte superior del documento. ¿cómo debería hacerlo?
RutujaBadbe
después de colocar el bloque de cabecera en el lienzo, necesito que vaya encima de cualquier otro componente o bloque. Ahora mismo, estoy haciendo esto. Pero no está funcionando. editor.on('canvas:drop',(DataTransfer, model)=> { si (model....
artf
Puedes usar la propiedad 'arrastrable' para definir (mediante cadenas de consulta CSS) dónde se podría colocar el componente, pero no puedes especificar la posición. Puedes intentar crear un componente personalizado como contenedor para co...
RutujaBadbe
@artf gracias por la respuesta. No sé si es la forma correcta, pero hice algo y me funcionó. Soy bastante nuevo en esto y todavía estoy aprendiendo de los médicos. Yo hice esto— editor.on('canvas:drop',( model)=> { si (model.is('encabezado...
@artf Me encanta trabajar con GJS. Tengo una última cosa en la que me encantaría que me ayudaras. Sería increíblemente útil poder personalizar las etiquetas en el gestor de capas. He buscado por todas partes pero no he encontrado nada. La forma predeterminada en que solo muestra '''Texto''' y '''Cuadro' no es muy útil...
artf
Puedes ampliar el modelo de tu(s) componente(s) y sobrescribir la función 'getName'
fmay
Por si esto le resulta útil a alguien, he encontrado una forma sencilla/alternativa de hacerlo cuando se crea un componente.
flauc
Así lo hice yo: La ventaja es que si el id o la etiqueta de los componentes cambian más adelante, seguirán actualizándose en el gestor de capas y también puedes renombrar componentes individuales.
Oye, @artf. Quiero acceder al json que se genera cuando se almacena una plantilla sin almacenar realmente la plantilla. El objeto json se puede acceder usando los eventos, pero no quiero llamar a 'editor.store()' y luego usar los eventos. ¿Hay alguna forma de obtener el objeto json (una llamada a función en el editor...
Joshmamroud
@theSC0RP ¿Esto es lo que buscas? editor.getComponents()
artf
@theSC0RP no está claro si quieres la funcionalidad de almacenamiento o no, pero lo que propues Josh es correcto o siempre puedes añadir tu almacenamiento (y no hacer nada dentro si hace falta...) https://grapesjs.com/docs/modules/Storage....
theSC0RP
siempre puedes añadir el almacenamiento (y no hacer nada dentro si hace falta...) https://grapesjs.com/docs/modules/Storage.html#define-new-storage Gracias @artf. Esto fue lo que acabé haciendo. Con 'editor.getComponents()', obtienes una e...
Hola @artf - lo que has construido es magnífico. Ha sido una lucha suave porque estoy lejos de ser un mago de JS. Sin embargo, tengo casi todo configurado, ¡excepto esto! Quiero establecer rasgos que se muestren cuando se selecciona una imagen (alt, src, id). Estoy seguro de que se puede hacer una vez al inicializar,...
artf
Hola Freddy, en este caso puedes simplemente ampliar el componente de imagen '''js editor. Components.addType('image', { modelo: { Predeterminados: { Rasgos: [{Nombre: 'Alt'}, {Nombre: 'SRC'}, {Nombre: 'ID'}] } } }); ```
ClaudeCode
Gracias por informar de esto, @fmay. Buena pregunta sobre Pregunta: Rasgos. El enfoque recomendado con Componentes es utilizar la API orientada a eventos. Empieza aquí: Consulta la documentación de GrapesJS de tu módulo específico Busca el...
Me gustaría crear un nuevo rasgo personalizado para usar, que tenga la entrada del selector de color y una casilla de verificación para que el resultado final sea el color predefinido que viene de la casilla marcada o, si está desmarcado, elegir desde el selector. Esto es demasiado específico para mi caso, así que mi...
artf
Ahora mismo no, estoy trabajando en un nuevo módulo de interfaz que permitirá reutilizar y anular elementos internos de la interfaz.
ClaudeCode
Gracias por informar de esto, @ThetripGr. Buena pregunta sobre ¿Es posible usar los tipos de rasgos existentes en nuevos rasgos personalizados? (por ejemplo, el selector de color). El enfoque recomendado con GrapesJS es usar la API orienta...
'grapesjs-custom-code' funciona bien con la etiqueta 'script' hasta GrapesJS 0.16.27; después de esta versión, no se ejecuta contenido de 'script'. ✔️ Editor init() opción: 'allowScripts: 1' ✔️ Importación de plugins: https://github.com/artf/grapesjs-custom-code/issues/11#issuecomment-724512902 ¿Está relacionado con h...
nithinpillalamarri123
Hola, muchas gracias por tu repetición... Sí, exactamente, después de que vuelvas a jugar lo probé con la 0.16.27 del script de bloques personalizados funciona como se esperaba, pero en versiones anteriores a la 0.16.27, mientras arrastras...
artf
Hola @bgrand-ch, probablemente estés hablando de un error 😂 corregido Principales razones por las que no deberías permitir que se ejecute un script aleatorio de un usuario:Auto-XSSNo podemos controlar el script si lo ejecutamos dentro del...
ClaudeCode
Gracias por informar de esto, @bgrand-ch. ¡Gran sugerencia sobre grapesjs-custom-code no se <script> ejecuta desde GrapesJS 0.16.30 en adelante! Aunque esta función específica aún no está en la API principal, existen varias formas de logra...
Versión: 16.00.27 hasta más tarde ¿Puedes reproducir el error de la demo? Sí [X] Sí [ ] No ¿Cuál es el comportamiento esperado? Insertar bloque de texto dentro de otro bloque de texto Describe el error detallado Al añadir un nuevo bloque, o incluso al crear un nuevo tipo personalizado, el atributo "textable no funcion...
artf
Duplicado del #2771
ClaudeCode
Gracias por informar de esto, @hanna404. El problema con Textable attribut que no funciona y causa excepciones parece ser una condición de carrera o un problema de temporización de gestión de estado. Esto suele ocurrir cuando los eventos d...
Versión: 0.16.34 ¿Cuál es el comportamiento esperado? Cuando el editor se inicializa, no se selecciona ningún elemento, por lo que el gestor de estilos debería decir "Selecciona un elemento antes de usar el Administrador de Estilos", como hace cuando no se usa "appendTo" en la configuración del editor. ¿Cuál es el com...
mosh-tudor
Usé este código para resolverlo: '''js const showStylesSector = editor => { const stylesButton = editor. Panels.getButton ('encabezado de panel en barra lateral', 'show-styles'); const layersButton = editor. Panels.getButton ('panel-sideba...
Nielsticot
Esto no es lo que quiero, mi problema es antes de que se seleccione cualquier elemento, así que antes de que el evento "component:selected" se trigere. Lo arreglé temporalmente seleccionando un elemento al cargar el editor, pero no es lo q...
artf
Si usas el StyleManager en un elemento personalizado, tienes que gestionar ese estado tú mismo. '''html <div class="sm-wrapper"> <div id="styles"></div><!-- aquí es donde se añade el gestor de estilos --> <div class="sm-vacty-state"> Selec...