Baru-baru ini, karena persyaratan proyek, kotak pengeditan teks front-end diperlukan, dengan fungsi pengunggahan gambar real-time. Saya membandingkan beberapa plug-in online. Pertama, itu adalah Ueitor Baidu dan menemukan bahwa kerangka kerja itu terlalu besar. Bukan itu yang ingin saya lihat jika kerangka kerja kecil memperkenalkan begitu banyak file; Kedua, itu adalah Easyui JQuery. Meskipun versi pribadi gratis, proyek ini milik bisnis perusahaan, dan tampaknya tidak tepat untuk menggunakan versi komersial kerangka kerja. Mempertimbangkan bahwa ujung depan proyek ini terutama dibangun di atas bootstrap, plug-in bootstrap-wysiwyg akhirnya dipilih, yang sangat sederhana, ringan dan sangat dapat diperluas.
Sangat nyaman untuk memperkenalkan bootstrap-wysiwyg dan mengimplementasikan fungsi pengeditan teks, tetapi saya perhatikan bahwa unggahan gambar diimplementasikan menggunakan fileAPI. Untuk sebagian besar situs web, meskipun pengalaman pengguna tanpa mengunggah sangat baik dengan FILEAPI, ketika sebenarnya disimpan dalam database, kami masih berharap untuk menyimpan jalur statis gambar di server daripada gambar senar. Singkatnya, kita perlu membuat sedikit penulisan ulang bootstrap-wysiwyg (selanjutnya disebut WY).
Pertama, mari kita amati kontrol gambar pada halaman. Lewati kontrol lain dan periksa kode sumbernya. Mudah untuk menemukan kode berikut:
<div> <a id = "pictureBtn"> <i> </i> </a> <input type = "file" data-role = "magic-overlay" data-target = "#pictureBtn" data-edit = "insertImage"/> </div>
Mari kita buat penjelasan. Properti Data-Role dan Data-Target adalah peristiwa yang telah ditentukan sebelumnya di Bootstrap. Di sini kita dapat memahaminya sebagai terkait tata letak, tanpa mempertimbangkannya. Poin kuncinya ada di sini. Edit data properti ketiga, tidak ada peristiwa seperti itu di Bootstrap. Amati Bootstrap-wysiwyg.js, Anda dapat menemukan beberapa kode seperti ini:
toolbar.find ('input [type = file] [data-' + options.commandole + ']') .change (... ... commandrole: 'Edit',Dengan kata lain, properti ini sebenarnya diimplementasikan untuk memfasilitasi pemilih, yang setara dengan menambahkan acara pendengar ke tombol gambar.
Mari kita lanjutkan untuk mempelajari implementasi pratinjau gambar WY. Langkah pertama adalah, seperti yang ditunjukkan pada kode di atas, pendengar menangkap peristiwa perubahan fileInput, merespons, dan memanggil fungsi InsertFiles
restoreselection (); if (this.type === 'file' && this.files && this.files.length> 0) {insertFiles (this.files);} saveSelection (); his.value = '';Temukan fungsi InsertFiles
InsertFiles = function (file) {editor.focus (); $ .each (file, fungsi (idx, fileInfo) {if (/^image///.test(fileInfo.type)) {$ .when (readFileIntodataurl (fileInfo)). Done (function (dataUrl) {execomommand ('insertImage', dataurl);}). FACEURL (EXECECCOMMAND ('InsertImage', Dataurl);}). FACEURL). Options.FileUploadError ("File-Reader", E); }Kami memperhatikan bahwa ia menggunakan metode jQuery $ .Deferred (), pertama kali disebut metode ReadFileIntodataurl, dan kemudian berhasil mengeluarkan gambar ke kotak teks melalui metode ExecCommand yang dienkapsulasi sendiri. Gambar ini sebenarnya adalah tag <mmg>, tetapi atribut SRC adalah gambar yang diwakili oleh string. Jadi yang perlu kita lakukan adalah mengunggah file setelah pendengar dipicu, dapatkan SRC gambar, dan kemudian menyerahkan tautan ke metode ExecCommand berikutnya.
Karena penulisnya tidak terlalu terbiasa dengan ditangguhkan, ia masih menggunakan mode panggilan balik yang lebih umum
Amati metode panggilan Ajaxfileupload:
$ .AJAXFILEUPLOAD ({url: ..., SecureUrl: false, FileElementId: ..., DataType: "json", Success: function (obj) {...}, error: function () {...}});Ada dua properti yang diperlukan, URL dan FileElementID. Untuk mempertahankan kebenaran ketergantungan, tidak disarankan untuk menulis ulang AjaxfileUpload. Namun, karena kontrol WY diimplementasikan oleh pendengar, tidak realistis untuk melewati parameter melalui fungsi, jadi kita perlu mendefinisikan beberapa properti untuk kotak input sendiri untuk mencapai tujuan kita.
Tambahkan beberapa properti di fileInput
<input type = "file" id = "pictureInput" name = "picture" data-role = "magic-overlay" data-target = "#pictureTn" data-edit = "insertImage" action = "..." />
ID digunakan sebagai FileElementID, dan atribut nama juga diperlukan, terutama untuk pemilihan nilai latar belakang, tindakan adalah URL yang perlu diserahkan oleh gambar.
Tentukan fungsi dalam bootstrap-wysiwyg.js yang disebut unggahfiletoServer, format fungsi adalah sebagai berikut:
var unggahfiletoServer = fungsi (id, tindakan, callback) {$ .AjaxFileUpload ({url: action, SecureUrl: false, FileElementId: id, dataType: 'json', Success: function (OBJ) {if (Obj.Status) {callback (obj.imgsrc); {ife-lengeR.status) {callback (obj.imgsrc); {ifeDEad (} {callback (Obj.imgs); obj.message);}, kesalahan: function () {options.fileuploadError ("unggah-failure", "");Tulis ulang metode InsertFiles sebagai berikut:
InsertFiles = fungsi (file, id, tindakan) {editor.focus (); $ .each (file, fungsi (idx, fileInfo) {if (/^image///.test(fileInfo.type)) {/ * $ .when (readFileIntodataurl (fileInfo)). Done (function (dataurl) { * execCommand ('insertImage', dataur); Options.FileuploadError ("File-Reader", E);Pada saat yang sama, buat modifikasi tertentu ke pendengar untuk mendapatkan atribut yang diperlukan
toolbar.find ('input [type = file] [data-' + options.commandole + ']') .change (function () {restoreselection (); if (this.type === 'file' && this.files && this.files.length> 0) {insertFiles (ini. } saveSelection ();Terutama, dua posisi parameter telah ditambahkan.
Dengan cara ini, penulisan ulang selesai. Perhatikan bahwa untuk memastikan bahwa eksekusi yang benar dilakukan, silakan merujuk ke Ajaxfileupload.js sebelum kontrol.
Jika Anda masih ingin belajar secara mendalam, Anda dapat mengklik di sini untuk mempelajari dan melampirkan 3 topik menarik kepada Anda:
Tutorial Pembelajaran Bootstrap
Tutorial Praktis Bootstrap
Tutorial Penggunaan Plug-In Bootstrap
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.