Cara sederhana untuk mengimplementasikan fungsi Upload Gambar di Summernote

Saya akan terus menulis halaman web bootstrap seperti yang saya katakan sebelumnya ... dan kemudian saya akan menggunakan editor teks yang kaya, cukup cari dan pilih

Lalu saya menemukan masalah yang sangat memalukan ... fungsi unggahan gambar tidak valid ... maka berbagai pencarian tidak membuahkan hasil ... Akhirnya, saya menjentikkan dokumen resmi Summernote dan akhirnya menyelesaikannya. Singkatnya, saya menuliskan proses solusi.

Bagian backend tidak memberikan kode, itu penuh dengan orang. Di sini, dengan asumsi bahwa backend mendapatkan file yang diunggah dan mengembalikan alamat file.

Pertama, silakan lampirkan materi referensi: dokumen pengembangan resmi Sumnernote

Bicara secara singkat tentang rencana implementasi fungsi Upload Gambar Summernote

Pertama, menurut API yang disediakan oleh dokumen resmi, lampirkan acara Upload File, lalu gunakan JS untuk mengekspload ulang file, dan akhirnya gunakan API untuk memasukkan gambar ke dalam kotak pengeditan.

Itu adalah pertanyaan yang sangat sederhana, tetapi sayangnya pejabat itu tidak tahu mengapa antarmuka ditulis ... dan kemudian semua informasi yang saya cari online ditipu ... meskipun ada alasan mengapa saya tidak mencari secara mendalam

Singkatnya, dua API Summernote inti disortir, mengambil alih acara unggahan file dan memasukkan gambar, dan formatnya adalah sebagai berikut sesuai dengan dokumentasi resmi.

 //Take over image upload event $('#summernote').summernote({ callbacks: { onImageUpload: function(files) { // Upload the image to the server and insert the image to the edit box} }});//Insert the image $('#summernote').summernote('insertImage', url, filename);//For more detailed explanation, see the official website API document disediakan di atas

Maka Anda dapat dengan mudah mengimplementasikan kotak Edit Summernote yang mendukung pengunggahan gambar

Kodenya adalah sebagai berikut:

 $ ('#SumnerTen'). Summernote ({callbacks: {onimageupload: function (file) {// Unggah gambar ke server, menggunakan objek formdata. Adapun kompatibilitas ... {{{eversix {{{{{formdata {new formData (); 'Unggah', // Latar Belakang Antarmuka Unggah: 'Posting', Data: Formdata, ProcessData: False, ContentType: False, Success: Function (Data) {$ ('#Summernote'). Summernote ('InsertImage', 'IMG');

Akhirnya, ini hanya mengimplementasikan fungsi unggahan gambar paling sederhana, yang memiliki kompatibilitas yang buruk dan tidak mempertimbangkan permintaan pengecualian kesalahan sama sekali ... Harap ubah sendiri sesuai kebutuhan

Cara sederhana untuk mengimplementasikan fungsi Upload Gambar di Summernote adalah seluruh konten yang dibagikan oleh editor. Saya harap ini dapat memberi Anda referensi dan saya harap Anda dapat mendukung wulin.com lebih lanjut.