Lo actualicé a markerjs2 y limpié el código.
Aquí está el enlace a la PR:
Las mejoras del editor son fantásticas y han eliminado mucha código ![]()
Desafortunadamente, después de guardar la edición, la publicación ya no aparece, ya que el formato markdown no es del todo correcto. Parece que el análisis de la cadena no es correcto.
El markdown de la imagen superior es el archivo sin editar. Después de editar, puedes ver que el componente se confunde con el
(1) en el nombre del archivo y lo incluye en la ruta de carga; fíjate en (1upload. Ahora que los temas pueden tener pruebas de JS, añadamos una prueba para el análisis del nombre del archivo.
Voy a deshabilitar el componente del tema aquí en Meta por un momento mientras se soluciona este problema. Ya está marcado como #theme:broken-theme, así que nada nuevo ![]()
He corregido el error que capturaba los paréntesis incorrectos al buscar la URL de la imagen.
Aquí tienes el enlace a la PR:
También planeo agregar una función que, al pasar el cursor sobre la imagen, permita al usuario elegir si desea anotarla o recortarla (rotar/invertir).
Hola Nam,
El componente ya está instalado en Meta y lo estoy probando.
Algunas observaciones:
- No queda claro cómo abrir el editor. Recomiendo añadir algún indicador aquí (quizás flotar la palabra “Editar” o un ícono de lápiz en el área de vista previa):
-
Hay un gran conflicto de z-index con el editor de texto, lo que deja la imagen detrás de este. Tienes que reducir considerablemente el editor de texto para poder verla completa.
-
Las imágenes que se están editando parecen enormes. ¿Hay alguna forma de mantener las dimensiones de la imagen en edición?
¡Muchas gracias por los comentarios!
Estoy trabajando en el comentario #1. Cambiaré el estilo de los botones, pero los botones ‘ANNOTATE’ (Anotar) o ‘CROP’ (Recortar) abrirán la herramienta solicitada.
En cuanto al comentario #2, ¿podrías aclararme el problema?
Puedo trabajar en el #3 pronto.
Claro:
El compositor se renderiza encima del editor de imágenes para mí, por lo que no puedo editar correctamente hasta que reduzco el tamaño del compositor.
¡Muchas gracias por todo el trabajo increíble que hacen aquí!
¡Gracias por tu aclaración!
¿Podrías decirme qué dispositivo, navegador y versión utilizaste?
El editor aparece superpuesto al editor de imágenes en mi caso. Así es como se ve en el mío:
Oh, ya veo qué está pasando. ¿Podrías probar con el tema “barra lateral enfocada”, que solo está habilitado para el equipo de Discourse (y forma parte de Discourse for Teams)?
Mi suposición es que necesitas aumentar un poco más el z-index. @markvanlan está ayudando con esto.
@Nam Se ha integrado un cambio genial que permite recortar y rotar. Ahora hay una etapa de selección después de hacer clic en una imagen (solo subida local), para elegir entre anotar o recortar/rotar. ![]()
El único problema por ahora es otro conflicto de z-index, pero con el modal de recorte (el z-index del modal de anotación es correcto). No hay una className estable en el elemento externo del modal de recorte, así que tengo una PR abierta para la biblioteca cropro para agregar una.
Edición:
Hice un fork del repositorio e hice el pequeño cambio que necesitamos. Ya no hay problema de z-index.
Parece que no hay solución para el problema de que las imágenes que se están editando sean demasiado grandes. Esto se debe a que MarkerJs y Cropro establecen el tamaño de la imagen mientras se está editando.
¡Ya ha pasado un año, así que lo preguntaré una vez más con desesperación porque esto tiene mucho potencial: ¿hay alguna esperanza para imágenes alojadas en S3 y que usen una CDN? ![]()
Meta utiliza S3 y CDN, y funciona perfectamente si subes la imagen al mismo tiempo que deseas editarla. Por lo que sé, no funcionará al editar imágenes existentes.
Interesante, lo probé en otro sitio que actualmente tiene todos los plugins y TCs desactivados y tengo el mismo problema, pero funciona con S3 desactivado. ¿Alguna idea? La imagen también está extrañamente estirada; debería ser 2:3, pero se está estirando hasta el ancho de la pantalla.
¿Tienes DISCOURSE_ENABLE_CORS: true en tu archivo app.yml?
No, no tengo esa línea, y tampoco hay nada configurado en la configuración del sitio cors-origins.
Prueba a configurarlo y volver a compilar.
¿Sigue ocurriendo después de habilitar/reconstruir? ¿Necesito configurar algo para cors-origins o DISCOURSE_CORS_ORIGIN?
Tengo un problema, no puedo editar.

Cuando intento hacer esto en un teléfono inteligente, no edita la imagen actual y reemplaza la siguiente imagen (la siguiente a la actual).
¿Podrías verificar esto?










