Kindeditor adalah editor html open source online yang kuat yang mendukung efek pengeditan WYSIWYG. Ini ditulis dalam JavaScript dan dapat diintegrasikan dengan mulus dengan beberapa lokal yang berbeda seperti .NET, PHP, ASP, Java, dll. Situs web resmi dapat dilihat di sini: http://kindeditor.net/index.php
Kindeditor sendiri menyediakan banyak plugin yang sangat praktis, dan karena kode ini open source, pengembang dapat memperluas dan memodifikasinya sesuai kebutuhan.
Pertimbangkan skenario ini saat mengedit konten situs web menggunakan Kindeditor: Editor cenderung menyalin konten dari halaman lain atau dokumen Word ke editor Kindeditor, daripada menulis konten dari selembar kertas kosong. Jika konten yang disalin berisi gambar, Anda harus terlebih dahulu mengunduh gambar dari alamat sumber ke area lokal dan mengunggahnya ke server di mana situs web ini berada, jika tidak gambar masih akan menunjuk ke halaman atau mendokumentasikan yang Anda salin, yang akan menyebabkan gambar gagal dibuka dengan benar di halaman. Editor sering harus memproses banyak dokumen, dan operasi semacam itu tidak diragukan lagi sangat rumit. Dapatkah Kindeditor secara otomatis mengenali konten yang ditempelkan ke dalamnya dan mengunggah gambar ke server? Kode berikut mengimplementasikan fungsi ini.
Untuk detail tentang cara menggunakan Kindeditor di halaman, Anda dapat melihat dokumentasi situs web resmi.
Ide Dasar Menerapkan Fungsi ini: Tambahkan kode ke acara Keyup dari Editor Kindeditor untuk memeriksa apakah editor berisi gambar; Cari tahu gambar yang perlu diunggah ke server secara otomatis, hubungi program unggahan gambar melalui Ajax untuk mengunggah gambar ke server; Dalam fungsi panggilan balik AJAX, ubah alamat SRC dari gambar yang sesuai ke alamat relatif lokal.
Fitur ini tidak mendukung menyalin dan mengunggah gambar di Word ke server.
Gambar di atas adalah hasil akhirnya. Program akan secara otomatis mengenali konten di editor. Jika ada gambar yang perlu diunggah, pesan cepat akan ditampilkan di bagian atas editor. Ketika pengguna mengklik tautan "Unggah", program akan menghubungi program unggahan gambar melalui permintaan AJAX, dan memodifikasi alamat SRC dari gambar yang sesuai ke alamat relatif lokal dalam fungsi callback.
Langkah implementasi spesifik dan kode terkait:
1. Modifikasi Editor Kindeditor
Temukan file Kindedititor.js dan tambahkan kode khusus di acara keyup (). Kode yang disediakan oleh berbagai versi Kindeditor dapat sangat bervariasi dan memerlukan pencarian dengan bantuan dokumen resmi. Artikel ini didasarkan pada Kindeditor versi 4.1.10.
2. Kode file auto.js
function df () {var haspicContainer = document.geteLementById ("has_pic"); if (has_pic "== null) {haspicContainer = document.createElement (" div "); haspicContainer.id =" has_pic "; haspiccontainer.innerHtml =" <input type = 'unggah' Id = 'piclist' value = '' style = 'display: none none;' Server </b> <a href = 'javascript: unggah ();' > Unggah </a> </div> <div id = 'konfirmasi'> </div> "; $ (". Ke-toolbar "). Setelah (HasPICContainer);} var img = $ (". Ke-edit-edit-iFrame "). Isi () (find (" img "); var piccount = 0; var str =" "() (" iMg "); var piccount = 0; var str =" "() (" iMg "); var piccount = 0; var str =" "(). (That.attr ("src") .indexof ("http: //")> = 0 || that.attr ("src") .indexof ("https: //")> = 0) {piccount ++; $ (Img). $ ("has_pic"). Hide (); "Get" BeforeSend: Function () {$ ("#Unggul"). Hide (); $ (". Ke-edit-iframe"). Isi (). Find ("IMG"); itu.attr ("src", "/unggah/gambar/" + str [i]); href = 'javascript: closeupload ();'> tutup </a> ");} else $ ("#confirm "). Teks (" Unggah gagal! ");}});}$ (". Ke-edit-iframe"). Isi (). Temukan ("IMG") digunakan untuk menemukan semua gambar dalam konten editor. Secara default, konten editor disimpan dalam elemen iframe, yang memiliki properti class = "ke-edit-iframe". Program akan menentukan apakah nilai setiap atribut SRC berisi "http: //" atau "https: //", dengan demikian menentukan apakah gambar tersebut merupakan gambar jarak jauh atau gambar lokal. Jika gambar adalah gambar jarak jauh, unggahpas.Ashx dipanggil dengan metode AJAX JQuery untuk mengunggah unggah ke server. Pada saat yang sama, ubah alamat SRC dari gambar yang sesuai dalam fungsi callback.
3. unggah kode file
Public Class unggahan: ihttphandler {public void ProcessRequest (konteks httpcontext) {context.response.contenttype = "text/polos"; string pic = context.Request.QueryString ["pic"]; string [] arr = pic.split ('|'); string str = ""; Unggah ST = unggah baru (); untuk (int i = 0; i <arr.length; i ++) {if (arr [i] .indexof ("http: //")> = 0 || arr [i] .indexof ("https: //")> = 0) {string std = St.SaveUrlpics (arr [i], "..../. if (std.length> 0) {if (i == arr.length - 1) strr += std; lain strr + = std + "|"; }}} context.response.write (sstr); } public bool isreusable {get {return false; }}} kelas publik unggahimg {public string saveUrlpics (string imgurlary, string path) {string strhtml = ""; string dirpath = httpcontext.current.server.mappath (path); coba {if (! Dirctory.exists (dirpath)) {directory.createDirectory (dirpath); } string ymd = datetime.now.toString ("yyyymmdd", datetimeformatinfo.invariantInfo); dirpath + = ymd + "/"; if (! Dirctory.exists (dirpath)) {directory.createdirectory (dirpath); } string newFileName = datetime.now.toString ("yyyymmddhhmmss_ffff", datetimeformatinfo.invariantInfo) + imgurlary.substring (imgurlary.lastindexof ("."))); WebClient wc = WebClient baru (); wc.downloadFile (imgurlary, dirpath + newfileName); strhtml = ymd + "/" + newFileName; } catch (Exception ex) {// return ex.message; } return strhtml; }}Gambar jarak jauh diunduh ke jalur relatif server "/mengunggah/gambar/" melalui metode WebClient, dan folder dan nama file yang sesuai akan secara otomatis dihasilkan sesuai dengan tanggal. Hasil yang dikembalikan berisi alamat relatif lokal dari semua gambar yang dipisahkan oleh "|". Dalam fungsi unggahan () dari file auto.js pada langkah 2, keberhasilan metode callback memperoleh nilai dan mem -parsing, dan menetapkan alamat ke atribut SRC dari gambar yang sesuai.
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.