English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Il componente UEditor è un insieme di editor di testo online open-source fornito da Baidu, con caratteristiche come leggerezza, personalizzabilità e attenzione all'esperienza utente, basato sul protocollo MIT e dotato di funzionalità molto potenti. Recentemente, durante l'uso, ho notato che le immagini caricate (o le immagini delle表情ggiate esistenti) non possono essere ridimensionate correttamente. Se selezioni un'immagine e clicchi e trascini i piccoli etichette ai margini dell'immagine, l'immagine può solo essere ridotta e non ingrandita. Ho provato molti metodi diversi senza successo, persino controllando il codice sorgente JavaScript, ma non ho trovato alcun problema anomalo.
Successivamente, ho scoperto casualmente che la pagina ha introdotto Bootstrap, e Bootstrap imposta per default lo stile box-sizing su border-box. Per i dettagli specifici, puoi consultare i log di pubblicazione di Bootstrap:http://blog.getbootstrap.com/2013/08/19/bootstrap-3-released/
Per informazioni sulla definizione e l'uso dello stile box-sizing, vedere qui:http://www.w3school.com.cn/cssref/pr_box-sizing.asp
I css influenti in Bootstrap:
, :before, :after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
Dobbiamo solo ridefinire il css sulla pagina per sovrascrivere lo stile menzionato in Bootstrap, come ad esempio:
.edui-container *{ -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .edui-container *:before, .edui-container *:after { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; }
* .edui-container è la classe css utilizzata per l'elemento padre del componente UEditor.
La seguente è l'intera descrizione della soluzione al problema di box-sizing di Bootstrap 3 che causa l'immagine del componente UEditor non possa essere ridimensionata correttamente, spero sia utile a tutti voi. Se avete qualsiasi domanda, lasciate un commento e io risponderò prontamente!