ฉันจะเขียนหน้าเว็บ bootstrap ต่อไปตามที่ฉันพูดไว้ก่อนหน้านี้ ... จากนั้นฉันจะใช้ตัวแก้ไขข้อความที่หลากหลายเพียงแค่ค้นหาและเลือกมัน
จากนั้นฉันก็พบปัญหาที่น่าอายมาก ... ฟังก์ชั่นการอัปโหลดรูปภาพไม่ถูกต้อง ... จากนั้นการค้นหาต่าง ๆ นั้นไร้ผล ... ในที่สุดฉันก็สะบัดผ่านเอกสาร Summernote อย่างเป็นทางการและแก้ไขได้ในที่สุด ในระยะสั้นฉันเขียนกระบวนการแก้ปัญหา
ส่วนแบ็กเอนด์ไม่ได้ให้รหัส แต่เต็มไปด้วยผู้คน ที่นี่สมมติว่าแบ็กเอนด์ได้รับไฟล์ที่อัปโหลดและส่งคืนที่อยู่ของไฟล์
ก่อนอื่นโปรดแนบเอกสารอ้างอิง: เอกสารการพัฒนาอย่างเป็นทางการของ Summernote
พูดคุยสั้น ๆ เกี่ยวกับแผนการดำเนินงานของฟังก์ชั่นการอัปโหลดรูปภาพของ Summernote
ขั้นแรกตาม API ที่จัดทำโดยเอกสารอย่างเป็นทางการให้แนบเหตุการณ์การอัปโหลดไฟล์จากนั้นใช้ JS เพื่ออัปโหลดไฟล์ใหม่และใช้ API ในที่สุดเพื่อแทรกภาพลงในกล่องแก้ไข
มันเป็นคำถามที่ง่ายมาก แต่น่าเสียดายที่เจ้าหน้าที่ไม่รู้ว่าทำไมอินเทอร์เฟซจึงเขียน ... และจากนั้นข้อมูลทั้งหมดที่ฉันค้นหาออนไลน์ถูกโกง ... แม้ว่าจะมีเหตุผลว่าทำไมฉันไม่ได้ค้นหาในเชิงลึกพอ
ในระยะสั้น APIs Summernote Core สองตัวจะถูกแยกออกมารับช่วงการอัพโหลดไฟล์และแทรกรูปภาพและรูปแบบมีดังนี้ตามเอกสารอย่างเป็นทางการ
// รับช่วงเหตุการณ์อัพโหลดรูปภาพ $ ('#summernote') summernote ({callbacks: {onimageupload: ฟังก์ชั่น (ไฟล์) {// อัปโหลดภาพไปยังเซิร์ฟเวอร์และแทรกภาพลงในกล่องแก้ไข}}}); เอกสาร API ที่ให้ไว้ข้างต้นจากนั้นคุณสามารถใช้กล่องแก้ไข SummerNote ที่รองรับการอัปโหลดรูปภาพได้อย่างง่ายดาย
รหัสมีดังนี้:
$ ('#summernote'). summernote ({callbacks: {onimageUpload: ฟังก์ชั่น (ไฟล์) {// อัปโหลดภาพไปยังเซิร์ฟเวอร์โดยใช้วัตถุ formData สำหรับความเข้ากันได้ ... มีการกล่าวว่ามันไม่เป็นมิตรกับ formdata (out) 'อัพโหลด', // ไฟล์พื้นหลังอัพโหลดประเภทอินเตอร์เฟส: 'โพสต์', ข้อมูล: formData, processData: false, contentType: false, ความสำเร็จ: ฟังก์ชั่น (ข้อมูล) {$ ('#summernote'). summernote ('insertimage', ข้อมูล 'img');ในที่สุดสิ่งนี้จะใช้ฟังก์ชันการอัปโหลดรูปภาพที่ง่ายที่สุดเท่านั้นซึ่งมีความเข้ากันได้ไม่ดีและไม่พิจารณาข้อผิดพลาดข้อผิดพลาดทั้งหมด ... โปรดแก้ไขด้วยตัวเองตามต้องการ
วิธีง่ายๆในการใช้ฟังก์ชั่นการอัปโหลดรูปภาพใน SummerNote คือเนื้อหาทั้งหมดที่แชร์โดยตัวแก้ไข ฉันหวังว่ามันจะให้ข้อมูลอ้างอิงและฉันหวังว่าคุณจะสนับสนุน wulin.com มากขึ้น