Estoy trasteando con los componentes internos de las uvas porque me gustaría contribuir en el futuro. La mayor parte de mi interés es que valga la pena con sitios HTML genéricos, independientemente del estilo/estructura de CSS y HTML usados (incluyendo doctype, soporte para cuerpo, etc.). Esperaba que la jerarquía de...
maxtacco
Por cierto, parece que Layer Manager usa la propiedad https://github.com/artf/grapesjs/blob/49100b2f63411fb08d438d21a5f7ff9131773a75/src/dom_components/model/Component.js#L35 de Component al renderizar el nodo del árbol en https://github.c...
maxtacco
GrapesJS es basado en componentes. Así que, creo que en este caso muestra los nombres de los componentes en lugar de los nombres de etiquetas. Creo que añadir nombres de etiquetas y/o personalizar el renderizado de capas en el árbol sería...
maxtacco
De hecho, el componente GrapesJS puede consistir en varios elementos DOM, así que puede que no tenga sentido mostrar nombres de etiquetas en este caso porque se está estilizando un componente y no elementos individuales dentro de él.
¿Hay alguna opción para activar una casilla de confirmación antes de eliminar cualquier bloqueo?
artf
No, pero puedes ampliar el comando por defecto 'tlb-delete' '''js editor. Commands.add('tlb-delete', ed => { if (confirm('¿Seguro?')) { const selected = ed.getSelected(); seleccionados & seleccionados.destruir(); } }); ```
Iceweex
@artf esto solo funciona para el botón de la barra de herramientas, pero cuando pulso "suprimir" en el teclado no lo hace. ¿Cómo puedo anular este evento?
artf
Hola @Iceweex, por desgracia, por el momento, no puedes. Para la próxima versión, centralizaré esos comandos y también actualizaré su ciclo de vida de eventos, así que en ese caso, podrás realizar la tarea de esta manera '''js const comman...
Llamar a 'init()' en Grapes después de cambiar HTML falla. Este tipo de situaciones ocurren en aplicaciones de una sola página. Creo que se necesita una función de 'deshistoriar()' para reiniciar Grapes con gracia.https://jsfiddle.net/wdtrg1je/ (simulación muy básica de una app de una página)Haz clic en "Añadir uvas"...
nojacko
Parece que no soy el único que quiere esto 😉. Las aplicaciones de página única son donde esto tiene valor (el problema que menciono, pero también libera algo de memoria). Intentaré subir un récord personal cuando tenga algo.
artf
Como ya se mencionó aquí, actualmente no veo ningún valor en empezar una función así (creando un buen método de destrucción), pero me encantaría ver algo de :) de relaciones públicas
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, He estado echando un vistazo al interior del dom_components, pero no consigo averiguar cómo anular manualmente el aspecto del estilo. Necesito una forma para que el componente pueda guardar todos los estilos nuevos en la etiqueta de estilo en lugar de la clase CSS real. (Prueba a mover un componente que fue esti...
ryandeba
Hola @Owchzzz, Parece estar integrado en el núcleo de GrapesJS que los componentes no tendrán etiqueta de estilo; véase este ejemplo donde se elimina explícitamente. No estoy seguro de si modificar este comportamiento resolvería completame...
Amir2828
¿Conseguiste encontrar alguna solución completa que dejara las etiquetas de estilo intactas sin cambios?
amenk
La solución de @ryandeba parece influir únicamente en el uso de atributos de estilo en línea como '<div style="...">'. (Pero para mí tampoco se filtraron sin sobrescribir ese prototipo. Estamos teniendo el problema de que está filtrado, no...
Cuando se añaden comillas dobles a un atributo, se rompe el HTML.https://jsfiddle.net/szLp8h4n/Arrastra el bloque de enlace.Haz clic en el enlace del editorVe al panel de "Configuración de componentes"Introduce 'Este es un "ejemplo"' en el campo 'título'.Haz clic en el icono de ver código.Se genera HTML inválido '''ht...
artf
Gracias por la atención, James Se aceptan los recordes personales
artf
@nojacko no construyo archivos antes del lanzamiento, así que si usas archivos de 'dist' sigues usando el antiguo
artf
Corregido por https://github.com/artf/grapesjs/pull/939
Lo que puedo usar en lugar de seguir a mí— editor.setHtml( arrdata['html'] ), editor.setCss( arrdata['css'] ), En el código inferior.
rajatkumcom
A continuación está mi código:- '''js editor. Commands.add( 'load-command', { run(editor, sendero) { editor.load(() => { sender.set('active', 0); }); var arrhtmldata = {}; arrhtmldata['nid'] = 65; arrhtmldata['contenttype'] = ""; arrhtmlda...
artf
Simplemente no los uses para cargar los datos de tus plantillas '''js editor.setStyle( arrdata['estilo'] ), editor.setComponents( arrdata['components'] ); ``` es todo lo que necesitas
Tengo una gran cantidad de páginas web estáticas, algunas que se desarrollaron hace bastante tiempo (usando Bootstrap, etc.) y otras que se han desarrollado más recientemente (usando CSS grid, etc.). Algunos usan estilos en línea, otros usan estilo basado en clases, algunos se basan en la jerarquía de componentes (por...
tommedema
@artf gracias, ya veo. De hecho, me gusta que dependas del analizador CSS del navegador porque ya estoy notando problemas de rendimiento con plantillas grandes. Si también dependes de algo como postcss, temo que el rendimiento pueda degrad...
artf
creo que Grapes funciona únicamente con un estilo CSS tipo BEM. Es decir, cada componente tiene su propia clase. ¿Es correcto? El "selector/visor de clases" solo permite editar estilos de selectores basados en clases, como '.class1', '.cla...
tommedema
@artf ¡Gracias por la respuesta! Creo que tendré que explicar mejor mi caso de uso. No siempre es realista esperar que alguien que importa una plantilla defina qué CSS proviene de bibliotecas externas. La razón de esto es que normalmente C...
Hola a todos. El problema es: Los eventos, simplemente no son fuego, después de arrastrarse (dentro) del lienzo. editor.on('canvas:dragover') editor.on('canvas:drop') editor.on('canvas:dragenter') editor.on('lienzo:dragend') El código es solo el código de la demo del repositorio, añadiendo estos 4 eventos. Aquí está e...
konstantin55000
El código es sintaxis. Válido. Aquí está un jsfiddle con código https://jsfiddle.net/s9b2k7vp/ Aquí está la demo: https://www.screencast.com/t/pWcpkM7QO
konstantin55000
Actualización. Los eventos están activando, pero justo después de que el bloque cae en el lienzo. No estoy seguro de si esto es un problema, porque ¿Y qué hay de event canvas:dragend y canvas:dragover? Si el bloque no cae en la lona, simpl...
konstantin55000
Lo siento mucho. El evento no fue un incendio por la versión previa de grapes.js Gracias a todos por la atención.
Cuando usas un framework de interfaz que proporciona clases personalizadas, sería bueno poder usar estas clases en cosas como paneles, para no tener que reescribir el CSS. Una posible sintaxis podría ser: '''js panelManager.addPanel({ id: 'miNuevo Panel', visible : cierto, botones : [...], clases: ['miClase Personaliz...
artf
Puedes establecer atributos de esta manera '''js editor. Panels.addPanel({ id: 'miNuevo Panel', ... atributos: {'data-stuff': 'val1', 'classe': 'val2'} }) ```
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.
¿Qué hago con gjs-assets, gjs-components, gjs-css, gjs-html y gjs-style? ¿Y cómo cargo estas cosas a mi editor?
artf
'GJS-html' y 'GJS-CSS' son tus resultados finales, así que probablemente los imprimirías en alguna página para el usuario final. 'gjs-components' y 'gjs-style' contienen los datos JSON sobre tu plantilla, así que tienes que usarlos si nece...
josefph
@artf habría problemas si simplemente insertara el HTML y CSS guardados en el editor para editarlo? ¿Y no usar los componentes GJS ni el estilo GJS?
artf
@pranzikkin si usas elementos personalizados y te importa la coherencia al editar tus plantillas, pues sí, tendrás problemas