Je l’ai mis à jour vers markerjs2 et nettoyé le code.
Voici le lien pour la PR :
Les améliorations de l’éditeur sont fantastiques et ont supprimé une grande partie du code ![]()
Malheureusement, après avoir enregistré la modification, le message n’apparaît plus car le Markdown n’est pas tout à fait correct. Il semble que l’analyse de la chaîne de caractères soit erronée.
Le Markdown de l’image du haut correspond au fichier non modifié. Après l’édition, on constate que le composant est perturbé par le
(1) présent dans le nom de fichier et l’intègre dans le chemin de téléchargement, comme on peut le voir dans (1upload. Maintenant que les thèmes peuvent inclure des tests JavaScript, ajoutons un test pour l’analyse du nom de fichier.
Je vais désactiver temporairement le composant de thème ici sur Meta le temps que cela soit corrigé. Il est déjà marqué comme #theme:broken-theme, donc rien de nouveau à signaler ![]()
J’ai corrigé le bogue qui capturait les mauvaises parenthèses lors de la recherche de l’URL de l’image.
Voici le lien vers la PR :
Je prévois également d’ajouter une fonctionnalité permettant, au survol de l’image, à l’utilisateur de choisir entre l’annotation ou le recadrage (rotation/inversion).
Salut Nam,
Le composant est maintenant installé sur Meta et je viens de le tester !
Quelques retours :
- Il n’est pas clair comment ouvrir l’éditeur. Je recommanderais d’ajouter une indication ici (peut-être faire flotter le mot « Modifier » ou une icône de crayon ? dans la zone d’aperçu) :
-
Il y a un gros conflit de z-index avec le compositeur, ce qui place l’image derrière celui-ci. Il faut réduire considérablement le compositeur pour tout voir.
-
Les images en cours de modification semblent énormes. Y a-t-il un moyen de conserver les dimensions de l’image en cours d’édition ?
Merci beaucoup pour vos retours !
Je travaille sur le retour n°1. Je vais modifier leur style, mais les boutons « ANNOTER » ou « COUPER » ouvriront l’outil demandé.
Pour le retour n°2, pourriez-vous m’éclaircir le problème ?
Je peux m’occuper du n°3 bientôt.
Bien sûr :
Le compositeur s’affiche par-dessus l’éditeur d’images pour moi, donc je ne peux pas éditer correctement tant que je ne réduis pas le compositeur.
Un grand merci pour tout votre travail formidable ici !
Merci pour vos précisions !
Pourriez-vous me dire quel appareil, quel navigateur et quelle version vous avez utilisés ?
L’éditeur s’affiche au-dessus de l’éditeur d’images pour moi. Voici à quoi cela ressemble de mon côté :
Ah, je vois ce qui se passe ici. Pouvez-vous tester avec le thème « barre latérale focalisée », qui n’est activé que pour l’équipe Discourse (et fait partie de Discourse for Teams) ?
Je suppose que vous devez augmenter légèrement le z-index. @markvanlan nous aide sur ce point.
@Nam a intégré une modification géniale permettant de recadrer et de faire pivoter. Il y a désormais une étape de sélection après avoir cliqué sur une image (téléchargement local uniquement), pour soit annoter, soit recadrer/faire pivoter. ![]()
Le seul problème actuel est un autre problème de z-index, mais avec la modale de recadrage (le z-index de la modale d’annotation est correct). Il n’y a pas de className stable sur l’élément externe de la modale de recadrage, j’ai donc ouvert une PR pour la bibliothèque cropro afin d’en ajouter une.
Édité :
J’ai forké le dépôt et apporté le petit changement dont nous avions besoin. Plus de problème de z-index.
Il semble qu’il n’existe aucune solution au problème de la taille excessive des images en cours de modification. Cela est dû au fait que MarkerJs et Cropro définissent la taille de l’image pendant l’édition.
Ça fait un an, alors je demande une dernière fois, désespérément, car cela a tant de potentiel : y a-t-il un espoir pour les images hébergées sur S3 et utilisant un CDN ? ![]()
Meta utilise S3 et un CDN, et cela fonctionne très bien si vous téléchargez l’image au moment où vous souhaitez la modifier. À ma connaissance, cela ne fonctionne pas lors de la modification d’images existantes.
Intéressant, je l’ai essayé sur un autre site qui a actuellement tous les plugins et les TC désactivés, et j’ai le même problème, mais cela fonctionne avec S3 désactivé. Des idées ? L’image est aussi étrangement étirée ; elle devrait être au format 2:3, mais elle s’étire sur toute la largeur de l’écran.
Avez-vous DISCOURSE_ENABLE_CORS: true dans votre fichier app.yml ?
Non, je n’ai pas cette ligne, et rien n’est défini dans le paramètre de site cors-origins non plus.
Essayez de configurer cela et de reconstruire.
Cela se produit toujours après l’activation/reconstruction. Dois-je configurer quelque chose pour cors-origins ou DISCOURSE_CORS_ORIGIN ?
Je rencontre un problème : je ne peux pas modifier l’élément terminé.

Lorsque j’essaie cela sur un smartphone, il ne modifie pas l’image actuelle, mais remplace l’image suivante (celle qui suit l’actuelle).
Pourriez-vous vérifier ce problème ?










