Estoy intentando crear un componente personalizado que contenga algo de texto lorem ipsum en el contenido, para editarlo una vez que esté en el lienzo. Pero también quiero modificar el HTML en la vista (para añadir contenido que quiero mostrar en el editor pero no en el HTML guardado). Probé algo así: El problema es q...
roytang
Probé lo anterior, como sigue: Pero sigo sin poder editar el texto en los elementos h1 y p después de dejar el componente en el lienzo. :(
artf
Perdona, no me había dado cuenta '''js var html = this.el.innerHTML; html = "<h1>ABC</h1>" + html; this.el.innerHTML = html; ``` básicamente eliminas elementos con modelos y adjuntas una nueva cadena como HTML (el editor ya no puede accede...
artf
Puedes ampliar el componente de texto en lugar del base '''js const defaultType = comps.getType('default'); const textType = comps.getType('text'); ... view: textType.view.extend({ ... ```
Perdón por el título tan vago. No sé cómo describirlo de forma concisa. Tengo un bloque personalizado donde quiero restringir que solo se puedan colocar imágenes en una parte concreta del bloque. Probé algo así: Sin embargo, cuando hago esto, intentar arrastrar el bloque fuera de la paleta de bloques genera el siguien...
roytang
Viendo que tu comentario corrigió el error original que encontré, cerraré este comentario y publicaré uno aparte para mis preguntas sobre el uso de la propiedad droppable.
artf
La 'vista' es obligatoria cuando defines un nuevo tipo de Componente '''js comps.addType('image-container', { modelo: defaultModel... view: defaultView; }); ```
roytang
¡Gracias! Añadir la Vista por defecto sí eliminó el error, pero sigo sin poder hacer lo que quiero: no consigo dejar una imagen dentro de la parte de "contenedor de imágenes" del ejemplo anterior. Cuando intento dejar el componente de imag...
Hola @artf 1) Tengo mis plantillas de editor así: ! 1 Quiero cambiar la alineación y también añadir un botón de retroceso en la esquina izquierda como este: ! 2 2) No sé por qué, cada vez que selecciono texto, las opciones del editor de ckles siempre aparecen en la parte superior: ! captura Quiero que aparezca junto a...
artf
Revisa la API de Paneles o simplemente puedes añadir o eliminar cosas una vez que el editor esté cargado '''js editor.on('load', () => { Cambia tu DOM aquí }) ```Acabo de probarlo en la demo y funciona como se esperaba, probablemente tenga...
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.
He visto que el combobox tiene diferentes estilos según el navegador. Firefox 56.0.2 (64 bits): ! captura de pantalla 2017-10-27 a las 17 23 49 Chrome: ! captura de pantalla 2017-10-27 a las 17 26 47 Safari: ! captura de pantalla 2017-10-27 a las 17 27 57 Creo que el problema está con Firefox. Además, al abrir el sele...
santiph
Con el tema de luz activado, así es como se ven las cajas de selección en Firefox para OSx <img width="198" alt="captura de pantalla 2017-10-27 at 19 15 28" src="https://user-images.githubusercontent.com/747646/32127161-47023f32-bb4b-11e7-...
leantorres73
@artf puedo trabajar en ello si me das las indicaciones, o si quieres, puedo proponer algo.
artf
Gracias@leantorres73 un récord personal sería genial. Todo gira en torno al CSS y el problema es el <option>estilo que debería estar aquí: https://github.com/artf/grapesjs/blob/dev/src/styles/scss/gjsinputs.scss (solo intenta buscar 'opció...
Estamos creando una plantilla donde renderizará la Div con imagen de fondo y, al pasar el cursor mostrará algo de texto; además, habrá un hipervínculo cuando alguien haga clic en ella que redirigirá al usuario y también el título debajo de la imagen para el texto. Hemos creado una plantilla pero no hemos podido hacerl...
artf
Consulta aquí #286
krunal039
@artf gracias por responder, pero aún así no entendí cómo crear bloques con componentes, ya que los componentes son los bloques de construcción y los bloques estarán hechos de componentes. Queremos tener una ventana única donde el usuario...
He probado este código: '''js Mostrar bloques por defecto, no estilos editor. Panels.getButton('views', 'open-sm').set('active', false) editor. Panels.getButton('vistas', 'bloques abiertos').set('activo', cierto) ``` Funciona, pero si haces esto, el selector de dispositivos en la esquina superior izquierda se oculta p...
artf
Prueba solo con '''js editor. Panels.getButton('vistas', 'bloques abiertos').set('activo', cierto) ``` Pero ponlo después del renderizado (si usas 'autorender: false')
Geczy
Ah, configurarlo después de renderizar funciona genial. Gracias
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.
Las reglas CSS guardadas previamente usando el método remoto no aparecen en el Administrador de Estilos. Respuesta remota en JSON '{"gjs-assets":"","gjs-css":"*{box-sizing: border-box;}body{margin:0;}#c743{color-de-fondo:#b0aeae;}cuerpo{margin-top:0px; margen-derecha:0px; margen-bottom:0px; marje-izquierda:0px;}#c743{...
Estoy intentando construir un redimensionador personalizado para uno de mis componentes. Es una disposición cuadrícula/columna basada en Flexbox y quiero que los usuarios puedan redimensionar una columna (a un ancho fijo) y que las otras columnas ocupen el espacio restante. Ya tengo un componente personalizado para mi...
artf
Sí, tienes razón. Esto ocurre simplemente porque las funciones no son serializables, por lo tanto, cuando grapesjs llama a 'JSON.stringify(Component)' simplemente se copia. La solución para tu caso es sobrescribir el método 'toJSON' en el...
thecodefish
Gracias@artf eso funcionó.
sakshigarg9
@thecodefish ¿Cómo cambias el estado inicial de las propiedades del Redimensionador? ¿A dónde va esta configuración si uso la página web de grapesjs-preset, simplemente bajo grapesjs.init{...}? Quiero fijar una dimensión mínima específicam...
Hola. Gracias por la herramienta tan buena. Tengo algunas preguntas: ¿Cómo debería configurar esta herramienta de subida http://prntscr.com/h214o4 para guardar imágenes en almacenamiento y en ¿El servidor? ¿Hay algún ejemplo o manual de cómo debería funcionar? ¿Qué respuestas debería enviar mi servidor? Muchas gracias.
artf
Claro, puedes encontrar más información aquí https://github.com/artf/grapesjs/wiki/Assets#uploading-assets
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.
En la demo veo la pestaña "flex" que nos da estilos flexibles a todos. Pero no existe tal pestaña en la versión actual de "0.12.17". ¿Es una construcción personalizada? P.D. Hay muchas otras pequeñas diferencias entre las versiones demo y las disponibles. El tema de la demo tiene un aspecto realmente increíble.
artf
Hola @desprit la demo amplía la biblioteca principal de grapesjs con su propio preset (estilos y plugins). Probablemente pronto cree su propio repositorio Por cierto, aquí encuentras la configuración flexible: https://github.com/artf/grape...
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.