KindEditor เป็นตัวแก้ไข HTML แบบโอเพ่นซอร์สที่ทรงพลังซึ่งรองรับเอฟเฟกต์การแก้ไข WYSIWYG มันเขียนด้วย JavaScript และสามารถรวมเข้ากับสถานที่ต่าง ๆ ได้อย่างราบรื่นเช่น. NET, PHP, ASP, Java ฯลฯ เว็บไซต์ทางการสามารถดูได้ที่นี่: http://kindeditor.net/index.php
Kindeditor มีปลั๊กอินที่ใช้งานได้จริงมากมายและเนื่องจากรหัสเป็นโอเพ่นซอร์สนักพัฒนาจึงสามารถขยายและแก้ไขได้ตามต้องการ
พิจารณาสถานการณ์นี้เมื่อแก้ไขเนื้อหาเว็บไซต์โดยใช้ Kindeditor: บรรณาธิการมีแนวโน้มที่จะคัดลอกเนื้อหาจากหน้าอื่นหรือเอกสารคำลงในตัวแก้ไข Kindeditor แทนที่จะเขียนเนื้อหาจากแผ่นกระดาษเปล่า หากเนื้อหาที่คัดลอกมีรูปภาพคุณจะต้องดาวน์โหลดภาพจากที่อยู่ต้นทางไปยังพื้นที่ท้องถิ่นก่อนและอัปโหลดไปยังเซิร์ฟเวอร์ที่เว็บไซต์นี้อยู่ไม่เช่นนั้นภาพจะยังคงชี้ไปที่หน้าหรือเอกสารที่คุณคัดลอกซึ่งจะทำให้ภาพไม่สามารถเปิดได้อย่างถูกต้องในหน้า บรรณาธิการมักจะต้องประมวลผลเอกสารจำนวนมากและการดำเนินการดังกล่าวนั้นยุ่งยากมากอย่างไม่ต้องสงสัย KindEditor สามารถจดจำเนื้อหาที่วางลงไปโดยอัตโนมัติและอัปโหลดภาพไปยังเซิร์ฟเวอร์ได้หรือไม่? รหัสต่อไปนี้ใช้ฟังก์ชั่นนี้
สำหรับรายละเอียดเกี่ยวกับวิธีการใช้ KindEditor บนหน้าคุณสามารถดูเอกสารประกอบเว็บไซต์อย่างเป็นทางการ
แนวคิดพื้นฐานของการใช้งานฟังก์ชั่นนี้: เพิ่มรหัสไปยังเหตุการณ์ Keyup ของตัวแก้ไข Kindeditor เพื่อตรวจสอบว่าตัวแก้ไขมีรูปภาพหรือไม่ ค้นหารูปภาพที่ต้องอัปโหลดไปยังเซิร์ฟเวอร์โดยอัตโนมัติโทรโปรแกรมอัปโหลดรูปภาพผ่าน AJAX เพื่ออัปโหลดรูปภาพไปยังเซิร์ฟเวอร์ ในฟังก์ชั่นการโทรกลับ AJAX ให้เปลี่ยนที่อยู่ SRC ของรูปภาพที่เกี่ยวข้องเป็นที่อยู่สัมพัทธ์ท้องถิ่น
คุณสมบัตินี้ไม่รองรับการคัดลอกและอัปโหลดรูปภาพใน Word ไปยังเซิร์ฟเวอร์
ภาพด้านบนเป็นผลลัพธ์สุดท้าย โปรแกรมจะจดจำเนื้อหาในตัวแก้ไขโดยอัตโนมัติ หากมีรูปภาพที่จำเป็นต้องอัปโหลดข้อความแจ้งจะปรากฏขึ้นที่ด้านบนของตัวแก้ไข เมื่อผู้ใช้คลิกที่ลิงค์ "อัปโหลด" โปรแกรมจะเรียกโปรแกรมอัพโหลดรูปภาพผ่านคำขอ AJAX และแก้ไขที่อยู่ SRC ของภาพที่เกี่ยวข้องไปยังที่อยู่สัมพัทธ์ท้องถิ่นในฟังก์ชันการโทรกลับ
ขั้นตอนการใช้งานเฉพาะและรหัสที่เกี่ยวข้อง:
1. การปรับเปลี่ยนตัวแก้ไข Kindeditor
ค้นหาไฟล์ kindeditor.js และเพิ่มรหัสที่กำหนดเองในเหตุการณ์ keyup () รหัสที่จัดทำโดย Kindeditor เวอร์ชันต่าง ๆ อาจแตกต่างกันอย่างมากและต้องการการค้นหาด้วยความช่วยเหลือของเอกสารอย่างเป็นทางการ บทความนี้มีพื้นฐานมาจาก Kindeditor เวอร์ชัน 4.1.10
2. รหัสไฟล์ auto.js
ฟังก์ชั่น df () {var haspicContainer = document.getElementById ("has_pic"); ถ้า (has_pic "== null) {haspicContainer = document.createElement (" div "); haspiccontainer.id =" has_pic "; haspiccontainer.innerhtml =" <อินพุตประเภท = 'ข้อความ' id = 'piclist' เซิร์ฟเวอร์ </b> <a href = 'JavaScript: uploadpic ();' > อัปโหลด </a> </div> <div id = 'ยืนยัน'> </div> "; $ (". ke-toolbar ") หลังจาก (haspiccontainer);} var img = $ (". ke-edit-iframe ") (img"; (That.attr ("src") .indexof ("http: //")> = 0 || that.attr ("src") .indexof ("https: //")> = 0) {piccount ++; $ (img) .length - 1) strtr += that.attr ("src"); {$ ("#has_pic"). hide (); ประเภท: รับ ", beforesend: function () {$ ("#upload "). ซ่อน ("#ยืนยัน ") ข้อความ (" อัปโหลด ... "); $ (". ke-edit-iframe"). สารบัญ (). ค้นหา ("img"); That.attr ("src", "/uploads/image/" + str [i]); href = 'javascript: closeUpload ();'> ปิด </a> ");} อื่น $ ("#ยืนยัน ") ข้อความ (" อัปโหลดล้มเหลว! ");}});}$ (". ke-edit-iframe"). สารบัญ () ค้นหา ("IMG") ใช้เพื่อค้นหารูปภาพทั้งหมดในเนื้อหาของตัวแก้ไข โดยค่าเริ่มต้นเนื้อหาของตัวแก้ไขจะถูกเก็บไว้ในองค์ประกอบ iframe ซึ่งมีคุณสมบัติของ class = "ke-edit-iframe" โปรแกรมจะพิจารณาว่าค่าของแอตทริบิวต์ SRC ของแต่ละภาพมี "http: //" หรือ "https: //" ดังนั้นจึงพิจารณาว่าภาพเป็นภาพระยะไกลหรือภาพท้องถิ่น หากภาพเป็นภาพระยะไกล uploadpic.ashx จะถูกเรียกโดยวิธี Ajax ของ jQuery เพื่ออัปโหลดปิ๊กไปยังเซิร์ฟเวอร์ ในเวลาเดียวกันแก้ไขที่อยู่ SRC ของรูปภาพที่เกี่ยวข้องในฟังก์ชันการโทรกลับ
3. รหัสไฟล์ uploadpic.ashx
คลาสสาธารณะ Uploadpic: ihttphandler {โมฆะสาธารณะ ProcessRequest (บริบท httpContext) {context.response.contentType = "ข้อความ/ธรรมดา"; String pic = context.request.querystring ["pic"]; String [] arr = pic.split ('|'); string str = ""; uploadimg st = uploadimg ใหม่ (); สำหรับ (int i = 0; i <arr.length; i ++) {ถ้า (arr [i] .indexof ("http: //")> = 0 || arr [i] .indexof ("https: //")> = 0) if (std.length> 0) {ถ้า (i == arr.length - 1) strr += std; else strr + = std + "|"; }}} context.response.write (SSTR); } บูลสาธารณะ isreusable {รับ {return false; }}} คลาสสาธารณะ uploadimg {สตริงสาธารณะ saveurlpics (สตริง imgurlary, เส้นทางสตริง) {string strhtml = ""; String dirpath = httpContext.current.server.mappath (เส้นทาง); ลอง {ถ้า (! dirctory.exists (dirpath)) {directory.createdirectory (dirpath); } สตริง 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 = new WebClient (); wc.downloadfile (imgurlary, dirpath + newfilename); strhtml = ymd + "/" + newfilename; } catch (Exception Ex) {// return ex.message; } return strhtml; -ภาพระยะไกลจะถูกดาวน์โหลดไปยังเส้นทางที่สัมพันธ์กันของเซิร์ฟเวอร์ "/อัปโหลด/รูปภาพ/" ผ่านวิธีการ webclient และโฟลเดอร์และชื่อไฟล์ที่เกี่ยวข้องจะถูกสร้างขึ้นโดยอัตโนมัติตามวันที่ ผลลัพธ์ที่ส่งคืนมีที่อยู่สัมพัทธ์ท้องถิ่นของรูปภาพทั้งหมดคั่นด้วย "|" ในฟังก์ชั่น uploadpic () ของไฟล์ auto.js ในขั้นตอนที่ 2 ความสำเร็จของวิธีการโทรกลับได้รับค่าและแยกวิเคราะห์และกำหนดที่อยู่ให้กับแอตทริบิวต์ SRC ของภาพที่เกี่ยวข้อง
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น