Hola, en este número #2861 podemos obtener todo el CSS de un elemento seleccionado y sus hijos con: Pero si quiero conseguir todo el CSS pero sin componente específico y son hijos o exactamente lo contrario de lo anterior ¿Hay alguna forma de hacerlo?
mcottret
¡Hola @RJCAM! No creo que haya una forma incorporada de lograr esto, pero basándote en la respuesta que enlazaste, puedes concatenar recursivamente el CSS de todos los componentes, filtrando el seleccionado y sus hijos como lo siguiente (a...
mcottret
@RJCAM lo siento, acabo de notar que mi respuesta anterior no funcionaba porque recuperar el CSS de un componente con hijos también incluía el CSS de los niños (por lo tanto, producía estilos duplicados, así como el estilo del componente s...
RJCAM
Hola @mcottret, gracias por tu respuesta Creo que tienes razón, voy a editar tu código para que funcione como espero ¡De verdad aprecio tu ayuda, gracias!
Versión: 0.16.18 ¿Puedes reproducir el error de la demo? [x] Sí: https://jsfiddle.net/ju1a0onx/ ¿Cuál es el comportamiento esperado? El guardado automático siempre debería llamar al comando "store" tras un cambio de estilo, incluso cuando las clases están desactivadas ¿Cuál es el comportamiento actual? Cuando desactiv...
artf
Gracias por el informe, hay un error con el método 'editor.load', que actualmente podría estar parcheado de esta manera '''js editor.load(() => { const em = editor.getModel(); em.get('storables').forEach(md => md.postLoad & & md.postLoad(e...
Joshmamroud
@Davidvlv estoy experimentando el mismo problema. Creo que es una combinación de 'avoidInlineStyles: 1' en la configuración y que no se seleccione ninguna clase. Parece funcionar como se espera con 'avoidInlineStyles: 0'
Davidvlv
Lo he probado, y esa opción evita que guarde cuando debería, pero luego introduce otros problemas en nuestra parte con cómo usamos la salida. Activamos avoidInlineStyles para evitar estos problemas.
Estoy intentando reemplazar el RTE por defecto en grapesjs por summernote. Recibí algo de ayuda del autor de summernote y conseguí que este codepen funcionara un poco, pero el autor de summernote concluyó que: 'Pero el elemento p de grapejs es un contenido en iframe. En otras palabras, existe una estructura donde exis...
wfcheng
He hecho algunos cambios más y ahora la barra de herramientas de SummerNote aparece correctamente, pero solo funciona el formato con viñetas. El nuevo código está aquí. @artf Cualquier consejo sería muy agradecido.
timramseyjr
@wfcheng ¿Llegaste a algo con esto? El codepen incluye el guion/estilos de lienzo que añade los recursos dentro del iframe, así que estaba un poco confundido sobre a qué se refería el autor de summernote.
wisecheng38
@timramseyjr acabé añadiendo más botones a la barra de herramientas de RTE para permitir aplicar estilos de fuente y color en textos seleccionados, aunque la documentación de grapesjs recomienda usar el gestor de estilos. He comprobado que...
Versión: 0.16.18 ¿Puedes reproducir el error de la demo? [X] Sí: https://codesandbox.io/s/empty-night-8q733?file=/index.js [ ] No ¿Cuál es el comportamiento esperado? El "Botón de Enlace" de Elemento no debería estar en una div. No debería haber una div, solo una etiqueta 'a' ¿Cuál es el comportamiento actual? Los blo...
mcottret
¡Hola @BerkeAras! Como se muestra en la página de Inicio, puedes especificar una propiedad 'tagName' al definir Bloques y Componentes personalizados para anular la etiqueta predeterminada 'div'. ¡Salud!
artf
Estás pasando una descripción para un componente ('<div>' por defecto) y luego añadiendo la etiqueta interna 'content' ('<a>') a ese componente
El texto importado directamente al envoltorio no se elimina del lienzo con el componente. Para verificar, se pueden importar textos simples varias veces a la demo y observar cómo se combinan en lugar de reemplazar el anterior. Añadir esto parece ayudar: editor. DomComponents.addType('textnode', { modelo: { eliminado()...
artf
No sigo tu ejemplo, ¿puedes ilustrar los pasos exactos para reproducir, por favor?
neon12345
Ve a la demo del boletín en https://grapesjs.com/demo-newsletter-editor.html y usa la función "Importar plantilla" con texto sencillo como "hola" pero sin HTML (o combínalo con html y texto a nivel raíz). Si repites esto, el texto a nivel...
artf
Gracias @neon12345, he encontrado el problema y debería solucionarse en la próxima versión
Hola @artf, estoy intentando ocultar propiedades de estilo basándome en el elemento seleccionado. por ejemplo, cuando arrastro y suelto una imagen en mi GrapesJS, me gustaría mostrar solo la propiedad de ancho, pero los atributos 'no estilizable/estilable' no funcionan. Versión: "grapesjs": "^0.16.18", ¿Puedes reprodu...
mcottret
¡Hola @cartifon! Creo que el atributo 'estilizable' solo funciona en Componentes y no en Bloques como en tu ejemplo. Lo siguiente debería ser suficiente: '''Manuscrito mecanografiado Bloqueos: [ { id: "imagen", etiqueta: "Image", Seleccion...
cartifon
Tengo otra pregunta, ¿funcionaría igual el unstylable?
cartifon
Hola @mcottret, gracias por la ayuda. ¡Sí, funciona con eso! Quizá la documentación debería ser más clara al respecto.
Versión: 0.16.12 ¿Puedes reproducir el error de la demo? [ ] Sí [x] No (no incluye un RTE personalizado) ¿Cuál es el comportamiento esperado? Al usar un RTE personalizado, el código generado/exportado debe corresponder al código generado por el RTE ¿Cuál es el comportamiento actual? El código generado corresponde a el...
artf
Tu solución parece ser correcta 👍 Un récord personal sería de gran ayuda
React-pdf está citado en la documentación, pero no veo ninguna otra mención de él en ningún sitio... ¿Alguien sabe si alguna vez se hizo un proyecto funcional usando grapesjs como creador de plantillas PDF? Cualquier información sobre cómo integrar ambos sería muy apreciada =)
artf
Puedes crear componentes personalizados y reflejar el comportamiento de los componentes de React-PDF (similar a lo que hemos hecho con MJML), así que se trata de entender cómo funcionan los componentes personalizados.
¿Qué intentas añadir a GrapesJS? Añadir estilos personalizados (como fondos) a un elemento usando ID. ¿Hay alguna alternativa en la última versión? [ ] Sí (describe la alternativa) [X] No ¿Está relacionado con algún problema? [ ] Sí (Da un enlace al número) [X] No
artf
La forma correcta sería esta: '''js const compById = editor.getWrapper().find('#i9x9h')[0]; compById & & compById.addStyle({ 'back-color': '...' }); ```
mcottret
¡Hola @BerkeAras! Aparentemente no está documentado pero 'editor. Components.allById()' podría ser lo que buscas, por ejemplo: '''Manuscrito mecanografiado editor. Components.allById()['your-id'].set('style', {'background-color': 'red'});...
La salida de "JSON.stringify(editor.getComponents())" muestra que el src de una imagen se almacena dos veces. { "tipo": "imagen", "vacío": cierto, "estado": "seleccionado", "contenido": "", "atributos": { "id": "iy3c7", "src": "Datos:Imagen/PNG; base64,..." <--- 1. }, "src": "Datos:Imagen/PNG; base64,...", <--- 2. "ac...
artf
@longdoan7421 creo que podemos eliminarlo en el método 'toJSON' cuando el 'src' es igual a 'attribute.src' y asegurarnos de que se carga correctamente al cargar
longdoan7421
Hola @artf, Acabo de echar un vistazo rápido a 'ComponentImage'. Creo que es posible eliminar la propiedad 'src' en el modelo de imagen y reemplazar el código que usa 'src' en 'ComponentImage' y 'ComponentImageView' por el 'attribute.src'....