L’ho aggiornato a markerjs2 e ho ripulito il codice.
Ecco il link alla PR:
I miglioramenti dell’editor sono fantastici e hanno eliminato così tanto codice ![]()
Purtroppo, dopo aver salvato la modifica, il post non viene più visualizzato, poiché il markdown non è del tutto corretto. Sembra che l’analisi della stringa non sia corretta.
Il markdown dell’immagine in alto è il file non modificato. Dopo la modifica, puoi vedere che il componente si confonde a causa del
(1) nel nome del file e lo inserisce nel percorso di caricamento, guarda (1upload. Ora che i temi possono avere test JS, aggiungiamo un test per l’analisi del nome del file.
Disabiliterò il componente del tema qui su Meta per un po’ mentre viene risolto questo problema. È già contrassegnato come #theme:broken-theme, quindi niente di nuovo ![]()
Ho corretto il bug che catturava le parentesi sbagliate durante la ricerca dell’URL dell’immagine.
Ecco il link alla PR:
Sto anche pianificando di aggiungere una funzione che, quando si passa il mouse sull’immagine, permetta all’utente di scegliere se annotarla o ritagliarla (ruotarla/ribaltarla).
Ciao Nam,
Il componente è stato installato su Meta e l’ho messo alla prova!
Alcuni feedback:
- Non è chiaro come aprire l’editor. Suggerirei di aggiungere un’indicazione qui (magari facendo apparire la parola “Modifica” o un’icona a forma di matita nell’area di anteprima):
-
C’è un grosso conflitto di z-index con il compositore che lascia l’immagine dietro di esso. Devi ridurre notevolmente le dimensioni del compositore per vederla tutta.
-
Le immagini in fase di modifica sembrano enormi. C’è modo di mantenere le dimensioni dell’immagine che viene modificata?
Grazie mille per il feedback!
Sto lavorando sul feedback #1. Cambierò lo stile dei pulsanti, ma i pulsanti ‘ANNOTATE’ o ‘CROP’ apriranno lo strumento richiesto.
Per il feedback #2, potresti chiarirmi il problema?
Posso occuparmi del #3 a breve.
Certo:
Per me, il compositore viene renderizzato sopra l’editor di immagini, quindi non posso modificare correttamente finché non riduco le dimensioni del compositore.
Grazie infinite per tutto il vostro fantastico lavoro qui!
Grazie per il chiarimento!
Potresti dirmi quale dispositivo, browser e versione hai utilizzato?
Per me l’editor appare sovrapposto all’editor delle immagini. Ecco come appare sul mio:
Ah, capisco cosa sta succedendo qui. Puoi fare una prova con il tema “barra laterale focalizzata”, che è abilitato solo per il team di Discourse (e fa parte di Discourse for Teams).
Il mio sospetto è che tu debba aumentare leggermente lo z-index. @markvanlan sta dando una mano in merito.
@Nam Ho unito una fantastica modifica che consente il ritaglio e la rotazione. Ora c’è una fase di selezione dopo aver cliccato su un’immagine (solo caricamento locale), per annotare oppure ritagliare/ruotare. ![]()
L’unico problema al momento è un altro conflitto di z-index, ma riguarda la finestra modale di ritaglio (la z-index della finestra modale di annotazione è corretta). Non c’è una className stabile sull’elemento esterno della finestra modale di ritaglio, quindi ho aperto una PR per la libreria cropro per aggiungerne una.
Modifica:
Ho fatto un fork del repository e apportato la piccola modifica di cui avevamo bisogno. Non c’è più il problema dello z-index.
Sembra che non ci sia una soluzione per il problema per cui le immagini in fase di modifica sono troppo grandi.
Questo accade perché MarkerJs e Cropro impostano le dimensioni dell’immagine mentre viene modificata.
È passato un anno, quindi chiederò di nuovo per disperazione perché questo ha così tanto potenziale: c’è speranza per le immagini ospitate su S3 e l’uso di una CDN? ![]()
Meta utilizza S3 e CDN e funziona perfettamente se carichi l’immagine nello stesso momento in cui desideri modificarla. Per quanto ne so, non funziona durante la modifica di immagini già esistenti.
Interessante, l’ho provato su un altro sito che attualmente ha tutti i plugin e i TC disabilitati e ho lo stesso problema, ma funziona con S3 disabilitato. Hai qualche idea? L’immagine è anche stranamente allungata: dovrebbe avere un rapporto 2:3, ma si sta estendendo per tutta la larghezza dello schermo.
Hai impostato DISCOURSE_ENABLE_CORS: true nel tuo file app.yml?
No, non ho quella riga e non ho impostato nulla nell’impostazione del sito cors-origins.
Prova a configurarlo e a ricostruirlo.
Accade ancora dopo aver abilitato/ricostruito. Devo impostare qualcosa per cors-origins o DISCOURSE_CORS_ORIGIN?
Ho un problema: non riesco a modificare l’elemento completato.

Quando provo a farlo su smartphone, non modifica l’immagine corrente, ma sostituisce quella successiva (quella accanto a quella attuale).
Potresti verificare questo problema?










