Problemas con GrapesJS

Problemas analizados por 3,464 en GitHub 370 resuelto · 90 abierto. Busca, filtra y explora respuestas probadas en batalla.

Se han detectado problemas con 3,464

#58028 de noviembre de 2017por faizansaiyed3 respuestas
Reacciones 3

¿Cualquier evento o evento de disparo cuando se deja caer un bloque dentro del lienzo?

Hola, ¿Cómo puedo activar algún evento cuando se actualiza cualquier bloque o contenido nuevo dentro del canvas? Algo como 'editor.onCanvasUpdate()' ¡Gracias!

ryandeba

Hola @fsaiyedOB, He podido lograr esto con el evento 'component:update' que se muestra aquí: https://github.com/artf/grapesjs/wiki/API-Editor#available-events Mi código se ve algo así

duskhacker

Cuando pregunté por saber cuándo el lienzo está sucio para poder indicar, @artf me dijo:

artf

También añadiría un evento específico para cada bloque '''js editor.on('bloque:arrastrar:stop', modelo => console.log('drop', model)) ```

#57928 de noviembre de 2017por NorthstarTech3 respuestas
Reacciones 0

Sustituyendo RichtextEditor a CKEDITOR

Estoy sustituyendo richtexteditor por ckeditor en grapesjs pero no funciona. Richtexteditor sigue apareciendo. ¿Cómo debería resolver esto? Mi código es: editor.setCustomRte({ enable: function(el, rte) { rte = new CKEDITOR.inline(el, { barra de herramientas: [{ Atributos: { "Clase": "FA FA-Imagen" }, comando: "open-di...

ryandeba

Hola @NorthstarTech, Veo que tu código incluye el archivo grapesjs-plugin-ckeditor.js. ¿También estás incluyendo ese plugin al llamar a 'grapesjs.init()' como se muestra aquí?

NorthstarTech

Sí, también he añadido el plugin en grapesjs.init(), pero no funciona. Muestra el error que se muestra a continuación. ! error

ryandeba

No conozco muy bien el plugin ckeditor, pero parece que espera el plugin sharedspace ckeditor (ver aquí). Creo que solo tienes que asegurarte de incluir ese plugin en tu configuración de CKEditor. Aquí tienes un enlace a ese plugin, pero a...

#57828 de noviembre de 2017por krunal0393 respuestas
Reacciones 4

Desactiva la subida de archivos en el administrador de activos

¿Hay alguna forma de desactivar la subida de recursos? Queremos obligar al usuario a usar solo imágenes aprobadas y eso a través del cuadro de diálogo del gestor de activos.

ryandeba

Hola @krunal039, La docs indica que puedes pasar 'upload: false' para desactivarlo (véase el comentario en la sección "Ejemplos"). ¿Has probado a hacer eso? No tengo tiempo para probarlo yo mismo ahora mismo, pero estaré encantado de ayuda...

artf

@shareefhiasat simplemente usar CSS

ehsantalkhouncheh

Upload:false no me funcionó :(

#57728 de noviembre de 2017por krunal0393 respuestas
Reacciones 2

Solo permite un componente de tipo específico en el editor

¿Hay alguna forma de no permitir que ningún componente específico se deshaga más de una vez en la página? Tengo un componente personalizado y el usuario no puede dejarlo más de uno en la página, así que si el componente ya está añadido en la página, quiero mostrar un mensaje específico y no permitir que se elimine en...

ryandeba

Hola @krunal039, Mi mejor sugerencia sería escuchar el evento component:add. En la función de escucha de eventos podrías comprobar si el componente añadido es del tipo que buscas, y si ahora existen más de uno de esos componentes en el lie...

bunomonteiro

``` editor.on('component:add', model => { // ... Tu lógica va aquí if(remove){ model.destroy(); } });

artf

@krunal039 la sugerencia de Ryan es la forma correcta de cumplir tu petición

#57628 de noviembre de 2017por ryandeba3 respuestas
Reacciones 5

El contenido de texto no siempre se puede editar

Hola @artf, He notado que si añado un componente que contiene una combinación de texto y una <a>etiqueta '', el texto no es editable como suele ser. Si sustituyo la etiqueta '<a>' por una '<span>', entonces puedo editar el texto sin problema. Aquí hay algo para ilustrar a qué me refiero (fíjate en las últimas dos líne...

artf

Gracias, Daniel, estoy de acuerdo contigo y me encargaré de tus sugerencias. Solo quiero señalar, en el cuarto caso, que también puedes indicar explícitamente al editor dónde es un componente de texto '''html <div data-gjs-type="text"> Un...

artf

Debería arreglarse https://github.com/artf/grapesjs/releases/tag/v0.12.50

duskhacker

Yo también me estoy encontrando con esto.

#57527 de noviembre de 2017por NorthstarTech3 respuestas
Reacciones 0

Propiedades de ancho de borde

¿Es posible añadir propiedades de borde arriba, borde derecho o borde izquierdo individualmente bajo el encabezado de decoración en grapesjs? Esto sería similar al radio de frontera. Por ahora solo muestra el ancho del borde, lo que da todos los bordes laterales. Solo quiero bordes a la derecha o a la izquierda.

ryandeba

Hola @NorthstarTech, No tengo un ejemplo de código, pero ¿has mirado https://github.com/artf/grapesjs/wiki/API-Style-Manager#addproperty? Hay un ejemplo ahí que añade "min-height" — ¿podrías modificar ese ejemplo para adaptarlo a tus neces...

artf

@NorthstarTech Ejemplo para el borde derecho '''js editor. StyleManager.addProperty('Decorations', { nombre: 'Border right', propiedad: 'derecho fronterizo', tipo: 'compuesto', Propiedades: [{ nombre: 'Ancho', tipo: 'entero', Unidades: ['P...

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.

#57426 de noviembre de 2017por Snarkly3 respuestas
Reacciones 3

Usando uvas con Zeronet.

¿Hay alguna forma de usar grapesjs con zeronet? https://zeronet.io/ Puedes crear sitios en zeronet, pero para añadir cabeceras, banners y otras cosas tienes que acceder al CSS y HTML para escribir código. Odio programar con pasión y me gustaría usar grapesjs en zeronet para poder usar las funciones de arrastre y solta...

artf

Hola Jeffery, por desgracia Daniel tiene razón, si quieres usar GrapesJS en otros proyectos alguien (los desarrolladores) primero tiene que integrarlo. Creo que podrías al menos intentar preguntar a los desarrolladores de ZeroNet si han in...

duskhacker

@Snarkly GrapesJS no es una solución llave en mano de entrada directa. Tendrás que entender (y hacer) programación en Javascript solo para que el editor funcione. Su propósito es añadir un editor HTML avanzado a una pila web existente.

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.

#57326 de noviembre de 2017por NorthstarTech3 respuestas
Reacciones 1

Texto en posición específica en RichTextEditor

¿Cómo añadir el texto en una posición específica del cursor en RichTextEditor? ¿Algún código de ejemplo? Necesito urgentemente Gracias,

ryandeba

Hola @NorthstarTech, ¿Puedes explicar qué quieres decir con "posición específica del cursor"? ¿Es ese el principio/final de la selección? ¿O la posición objetivo es más dinámica? Un ejemplo de código que muestre lo que tienes hasta ahora (...

artf

Gracias Ryan por la explicación tan detallada, por cierto, creo que esto es lo mismo que el #111, así que casi es una duplicación

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.

#57226 de noviembre de 2017por NorthstarTech3 respuestas
Reacciones 1

Problema con el editor de texto enriquecido

¿Cómo añadir el icono de la Lista ordenada en el editor de texto enriquecido? Aquí está mi código. rte.add('insertOrderedList', { Icon: '',//¿cómo añadir el icono de la lista de órdenes aquí?? atributos: {título: "Lista ordenada"}, resultado: (rte, acción) => rte.exec('insertOrderedList'), });

ryandeba

Puedes simplemente poner el valor de 'icono' al marcado que quieras. Aquí tienes un ejemplo usando font awesome: Para que lo sepas: he visto algunas discusiones sobre eliminar font awesome de grapesjs. No estoy seguro de cuáles son los pla...

NorthstarTech

Muchas gracias. Ahora funciona bien.

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.

#57125 de noviembre de 2017por suraj7403 respuestas
Reacciones 3

Importar contenido dinámicamente

Hola @artf, ¿cómo puedo importar contenido dinámicamente desde un programa que se refleje automáticamente en Canvas?

duskhacker

@suraj740 'editor.setComponents()' aceptará tanto html como css, así que podrías saltarte la llamada 'setStyle'. En cuanto al resto, ¿has visto la documentación del gestor de almacenamiento, verdad? Puedes llamar a 'load/store' en él de fo...

duskhacker

En mi proyecto, establezco atributos 'data-' en un elemento HTML y los extrajo mediante '.dataset' en Javascript; una vez configurado el editor, ejecuto: Ten en cuenta que el HTML debe estar configurado para que grapesjs pueda entenderlo....

duskhacker

@suraj740 ^^

Explora todos los temas