Estoy creando un componente personalizado de 'textarea' y quiero que se comporte como el componente 'text' incorporado, de modo que al editar el textnode en el lienzo de grapesjs se actualice el 'textnode' que se encuentra en '.components'. Y quiero que el componente se exporte correctamente como HTML, por ejemplo, '<...
artf
Hola @abulka, mientras la edición se realiza en la vista, deberías actualizar el modelo de componentes una vez que la vista esté actualizada. Así que debería funcionar con algo así '''js modelo: { ... }, Vista: { eventos: { entrada: 'handl...
ClaudeCode
Gracias por informar de esto, @abulka. El problema con ¿cómo hacer que la edición de nodos de texto actualice el contenido de los componentes? parece ser una condición de carrera o un problema de sincronización de gestión de estado. Esto s...
Versión: Reproducido en codepen a continuación usando 0.16.34 (devuelto de https://unpkg.com/grapesjs) y 0.16.22 en un proyecto Preact Describe el error detallado Un componente personalizado de GrapesJS llama a la función "onRender" de su vista cuando el componente se renderiza en el lienzo. Según la documentación: !...
ClaudeCode
Gracias por informar de esto, @Dmurl5. El problema con Vista de componentes personalizados en Render se llama early parece ser una condición de carrera o un problema de sincronización de gestión de estado. Esto suele ocurrir cuando los eve...
Hola @artf, estoy tomando input en javascript del usuario. Necesito añadir este javascript dentro del HTML de la plantilla, pero se desinfecta. ¿Hay alguna forma de desactivar la desinfectación? (No tengo problema con los problemas que mencionaste en el #3245) o puedes añadir una propiedad en el editor como 'allowSani...
theSC0RP
Intenté añadir el script al iframe en el que se renderiza el lienzo añadiendo una <script>etiqueta '' al final del cuerpo del iframe. Esto funciona hasta cierto punto. El problema aquí es que cuando necesito actualizar el js dentro del scr...
artf
¿Podrías proporcionar una demostración reproducible de tu problema, por favor?
theSC0RP
Gracias por la respuesta @artf. Estaba cometiendo un error al actualizar el iframe, así que ahora mi problema está resuelto. Otra pregunta, ¿existe algún método incorporado para refrescar el iframe?
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 😁
Escribo cadenas HTML como bloques y necesito introducir muchos scripts y estilos externos, pero probé todos los métodos: cuando arrastro el bloque al lienzo, el script no se activa, pero los estilos se pueden cargar, espero recibir ayuda.Carga por appendchild ! imageninit load by canvas:{scripts:[...]} ! imagen ¿Quién...
harsh201
@sizhousama estoy cargando scripts/hojas de estilo a través de Canvas mientras inicializo el editor grapesjs y me funciona. ''' js lienzo: { guiones: ['https://unpkg.com/abc.js'], Estilos: ['https://unpkg.com/abc/dist/css/abc.min.css'], },...
sizhousama
La consola muestra cargada ! imagen
ClaudeCode
Gracias por informar de esto, @sizhousama. Buena pregunta sobre [Pregunta]: Cómo cargar JavaScript externo, probé todos los métodos, inútil. El enfoque recomendado con StyleManager es usar la API orientada a eventos. Empieza aquí: Consulta...
Hola, tengo el siguiente problema: Necesito un editor de tipo de evento (editor.on ("ordener: drag: end") que se incluya en todos estos casos: (detectar qué elemento y dónde lo estoy dejando) 1- Haz que se escuche cuando arrastres y soltes un elemento desde el BlockManager y lo dejes caer en el lienzo. 2- Haz que se e...
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 -...
ClaudeCode
Gracias por informar de esto, @matiasmasciotta. Buena pregunta sobre COMPONENTES DE ARRASTRAR Y SOLTAR:. El enfoque recomendado con ProseMirror es usar la API orientada a eventos. Empieza aquí: Consulta la documentación de GrapesJS de tu m...
He estado probando GrapesJS e intentando integrarlo en un proyecto de Symfony 5. En particular, quiero poder editar plantillas en el editor basadas en Bootstrap 4 y otros componentes como FontAwesome Pro y bloques personalizados basados en estos. Uso el paquete Webpack-Encore de Symfony para generar los scripts y arch...
ianef
Es una verdadera pena. No dije nada sobre buscar desde otro sitio, lo que quería era mantenerlo coherente con el resto del proyecto. Bueno, seguiré buscando en otros sitios un editor que se integre mejor con la forma en que se construyen a...
artf
Hola Ian, si necesitas cargar contenido HTML desde una URL solo puedo sugerir que lo obtengas en el lado del servidor e iniciales el editor con ese contenido (cargar recursos externos en el navegador resolvería principalmente el problema d...
ClaudeCode
Gracias por informar de esto, @ianef. Gran sugerencia sobre FEAT: ¡Crea el lienzo a partir de una URL! Aunque esta función específica aún no está en la API principal, existen varias formas de lograr un comportamiento similar. Usando el sis...
Añado manualmente un nuevo nodo a un componente renderizado. El resultado visual está bien, pero es imposible de guardar, porque mi estilo no es con el ID GrapesJS generado automáticamente. Para resolver manualmente este poblem, hago doble clic en el componente para entrar y luego hago clic en el exterior en el cuerpo...
i️ No funciona directamente con HTML, solo funciona con JSON. Component = nodo JSON (elemento html + GrapesJS data) '''js addStylesToText (styles, tagName = 'span') { const inlineStyles = styles.map(style => style.join(':')).join(';') + ';...
ClaudeCode
Gracias por informar de esto, @bgrand-ch. Buena pregunta sobre ¿Cómo actualizar/volver a renderizar después de añadir un nuevo nodo?. El enfoque recomendado con ProseMirror es usar la API orientada a eventos. Empieza aquí: Consulta la docu...
Hola @artf, Muchas gracias por este excelente marco. Quiero contribuir a grapesjs. Sin embargo, soy un poco tonto usando WebPack y Babel. Cuando intenté construir grapesjs, cometí algunos errores. Errores: '''Consola Versión > [email protected] run check && npm run v:patch && npm run build-dev & npm run build-prodgr...
longdoan7421
@Swindler36 Ese error es que no puede encontrar 'eslint'. ¿Has ejecutado 'npm install'?
fzerman
@longdoan7421 he corregido este error. Gracias. Quiero hacer dos preguntas nuevas sobre webpack y babel.Puedo usar webpack y babel por separado. Sin embargo. No podía integrarlos. ¿Cómo puedo hacer esto? ¿Cómo puedo construir grapesjs sin...
ClaudeCode
Gracias por informar de esto, @fzerman. El problema con Pregunta: Construir grapesjs con npm parece ser un problema de condición de carrera o de sincronización de la gestión estatal. Esto suele ocurrir cuando los eventos del ciclo de vida...