เมื่อเร็ว ๆ นี้เนื่องจากข้อกำหนดของโครงการจำเป็นต้องใช้กล่องแก้ไขข้อความส่วนหน้าด้วยฟังก์ชั่นของการอัปโหลดรูปภาพแบบเรียลไทม์ ฉันเปรียบเทียบปลั๊กอินหลายรายการออนไลน์ ครั้งแรกมันคือ ueitor ของ Baidu และพบว่ากรอบงานมีขนาดใหญ่เกินไป ไม่ใช่สิ่งที่ฉันต้องการดูว่ากรอบเล็ก ๆ แนะนำไฟล์จำนวนมากหรือไม่ ประการที่สองมันเป็น EasyUi ของ JQuery แม้ว่าเวอร์ชันส่วนบุคคลจะฟรี แต่โครงการเป็นของธุรกิจของ บริษัท และดูเหมือนว่ามันไม่เหมาะสมที่จะใช้เฟรมเวิร์กเวอร์ชันเชิงพาณิชย์ เมื่อพิจารณาว่าส่วนหน้าของโครงการส่วนใหญ่จะถูกสร้างขึ้นบน bootstrap ปลั๊กอิน bootstrap-wysiwyg ถูกเลือกในที่สุดซึ่งในที่สุดก็เลือกได้ง่ายมากน้ำหนักเบาและขยายได้สูง
มันสะดวกมากที่จะแนะนำ bootstrap-wysiwyg และใช้ฟังก์ชั่นการแก้ไขข้อความ แต่ฉันสังเกตเห็นว่าการอัปโหลดรูปภาพถูกนำไปใช้โดยใช้ FileApi สำหรับเว็บไซต์ส่วนใหญ่แม้ว่าประสบการณ์ของผู้ใช้ที่ไม่ได้อัปโหลดนั้นดีมากกับ FileApi เมื่อเก็บไว้ในฐานข้อมูลจริง ๆ เรายังคงหวังว่าจะเก็บเส้นทางคงที่ของภาพบนเซิร์ฟเวอร์แทนที่จะเป็นภาพที่ถูกรัด ในระยะสั้นเราจำเป็นต้องเขียนใหม่เล็กน้อยของ bootstrap-wysiwyg (ต่อไปนี้จะเรียกว่า WY)
ก่อนอื่นมาสังเกตการควบคุมภาพบนหน้า ข้ามการควบคุมอื่น ๆ และตรวจสอบซอร์สโค้ด มันง่ายที่จะค้นหารหัสต่อไปนี้:
<div> <a id = "picturebtn"> <i> </i> </a> <อินพุต type = "ไฟล์" data-Role = "Magic-Overlay" data-target = "#pictureBtn" data-edit = "InsertImage"/> </div>
มาอธิบายกันเถอะ คุณสมบัติบทบาทและข้อมูลเป้าหมายข้อมูลเป็นเหตุการณ์ที่กำหนดไว้ล่วงหน้าใน bootstrap ที่นี่เราสามารถเข้าใจว่ามันเกี่ยวข้องกับเค้าโครงโดยไม่ต้องพิจารณา ประเด็นสำคัญคือที่นี่ ข้อมูลข้อมูลคุณสมบัติที่สามไม่มีเหตุการณ์ดังกล่าวใน Bootstrap สังเกต bootstrap-wysiwyg.js คุณสามารถค้นหารหัสบางอย่างเช่นนี้:
Toolbar.find ('input [type = file] [data-' + opotions.commandrole + ']') .change (... ... commandrole: 'แก้ไข',กล่าวอีกนัยหนึ่งคุณสมบัตินี้ถูกนำไปใช้เพื่ออำนวยความสะดวกตัวเลือกซึ่งเทียบเท่ากับการเพิ่มเหตุการณ์ผู้ฟังลงในปุ่มรูปภาพ
มาศึกษาการใช้งานตัวอย่าง WY Image ต่อไป ขั้นตอนแรกคือดังที่แสดงในรหัสด้านบนผู้ฟังจะจับเหตุการณ์การเปลี่ยนแปลงของ FileInput ตอบสนองและเรียกใช้ฟังก์ชัน InsertFiles
RestoresElection (); ถ้า (this.type === 'ไฟล์' && this.files && this.files.length> 0) {insertFiles (this.files);} saveselection (); His.value = '';ค้นหาฟังก์ชัน insertfiles
insertFiles = function (ไฟล์) {editor.focus (); $ .Each (ไฟล์, ฟังก์ชั่น (idx, fileinfo) {ถ้า (/^image////.test(fileinfo.type)) {$. เมื่อ (readfileintodataurl (fileinfo)). ทำ (ฟังก์ชั่น (dataurl) {execommand ('insertimage' ตัวเลือก FileUploadError ("File-Reader", E); -เราสังเกตเห็นว่ามันใช้วิธีการ $ .deferred () ของ jQuery ซึ่งเรียกว่าวิธี ReadFileIntodataUrl ก่อนจากนั้นจะส่งออกภาพไปยังกล่องข้อความผ่านวิธี Execcommand ที่ห่อหุ้มด้วยตนเองสำเร็จ ภาพนี้เป็นแท็ก <img> แต่แอตทริบิวต์ SRC เป็นภาพที่แสดงด้วยสตริง ดังนั้นสิ่งที่เราต้องทำคืออัปโหลดไฟล์หลังจากที่ผู้ฟังถูกเรียกใช้ SRC ของรูปภาพแล้วส่งลิงก์ไปยังวิธีการ ExecCommand ที่ตามมา
เนื่องจากผู้เขียนไม่คุ้นเคยกับการรอการตัดบัญชีมากเขาจึงยังคงใช้โหมดการโทรกลับทั่วไปมากขึ้น
สังเกตวิธีการโทรของ AjaxFileUpload:
$ .ajaxFileUpload ({url: ... , secureUrl: false, filelementId: ... , datatype: "json", ความสำเร็จ: ฟังก์ชั่น (obj) {... }, ข้อผิดพลาด: ฟังก์ชัน () {... }});มีคุณสมบัติที่จำเป็นสองประการคือ URL และ FilelementId เพื่อรักษาความถูกต้องของการพึ่งพาไม่แนะนำให้เขียน AjaxFileUpload ใหม่ อย่างไรก็ตามเนื่องจากการควบคุม WY ถูกนำไปใช้โดยผู้ฟังจึงไม่สมจริงที่จะส่งผ่านพารามิเตอร์ผ่านฟังก์ชั่นดังนั้นเราจึงต้องกำหนดคุณสมบัติบางอย่างสำหรับกล่องอินพุตเพื่อให้บรรลุเป้าหมายของเรา
เพิ่มคุณสมบัติบางอย่างใน FileInput
<input type = "file" id = "pictureInput" name = "picture" data-Role = "Magic-Overlay" data-target = "#pictureBtn" data-edit = "insertImage" action = "... " />
ID ถูกใช้เป็น fileElementId และแอตทริบิวต์ชื่อก็เป็นสิ่งจำเป็นส่วนใหญ่สำหรับการเลือกค่าพื้นหลังการกระทำคือ URL ที่ต้องส่งรูปภาพ
กำหนดฟังก์ชั่นใน bootstrap-wysiwyg.js เรียกว่า uploadfileToserver รูปแบบฟังก์ชันมีดังนี้:
var uploadfileToserver = function (id, action, callback) {$ .ajaxfileupload ({url: การกระทำ, secureUrl: false, fileElementId: id, ข้อมูลประเภท: 'json', ความสำเร็จ: ฟังก์ชั่น (obj) {ถ้า (obj.status) obj.message);}, ข้อผิดพลาด: function () {ตัวเลือก FileuploadError ("อัพโหลด-เฟลลัว", "");เขียนวิธี InsertFiles ใหม่ดังนี้:
insertFiles = function (ไฟล์, id, action) {editor.focus (); $ .Each (ไฟล์, ฟังก์ชั่น (idx, fileinfo) {ถ้า (/^image////.test(fileinfo.type)) {/ * * $. เมื่อ (readfileintodataUrl (fileinfo)) {function (dataurl) { * execommand ( ตัวเลือก fileuploaderror ("file-reader", e);ในเวลาเดียวกันทำการปรับเปลี่ยนบางอย่างให้กับผู้ฟังเพื่อรับแอตทริบิวต์ที่จำเป็น
Toolbar.find ('input [type = file] [data-' + opotions.commandrole + ']') .change (function () {restoreselection (); ถ้า (this.type === 'ไฟล์' && this.files && this.files.length> 0) {insertFiles } saveselection ();ส่วนใหญ่มีการเพิ่มตำแหน่งพารามิเตอร์สองตำแหน่ง
ด้วยวิธีนี้การเขียนใหม่จะเสร็จสมบูรณ์ โปรดทราบ ว่าเพื่อให้แน่ใจว่าการดำเนินการที่ถูกต้องจะดำเนินการโปรดดูที่ ajaxfileupload.js ก่อนการควบคุม
หากคุณยังต้องการศึกษาในเชิงลึกคุณสามารถคลิกที่นี่เพื่อศึกษาและแนบ 3 หัวข้อที่น่าตื่นเต้นให้คุณ:
การสอนการเรียนรู้ bootstrap
การสอนการใช้งาน Bootstrap
การสอนการใช้งานปลั๊กอิน bootstrap
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น