Markdown เป็นภาษามาร์กอัปที่สามารถเขียนได้ในตัวแก้ไขข้อความปกติ ผ่านไวยากรณ์มาร์กอัปอย่างง่ายสามารถทำให้เนื้อหาข้อความธรรมดามีรูปแบบที่แน่นอน
คำนำ
editor.md เป็นโอเพ่นซอร์สตัวแก้ไข markdown ออนไลน์ (ส่วนประกอบ) ที่สร้างขึ้นบน codemirror, jQuery และทำเครื่องหมาย บทนี้จะใช้ Springboot เพื่อรวม editor.md เพื่อสร้างตัวแก้ไข Markdown
ดาวน์โหลดปลั๊กอิน
ที่อยู่โครงการ: editor.md
เปิดเครื่องซิปโครงสร้างไดเรกทอรี:
กำหนดค่า editor.md
วาง simple.html ในโฟลเดอร์ exapmles ลงในโครงการและกำหนดค่าไฟล์ CSS และ JS ที่เกี่ยวข้อง
ตัวแก้ไขการกำหนดค่า
...... <script src = "$ {re.contextpath} /jQuery.min.js"> </script> <script src = "$ {re.contextpath} /editor/editormd.min.js"> </script> nofollow "/> <link rel =" stylesheet "href =" $ {re.contextpath}/editor/css/editormd.css "rel =" external nofollow "/> <link rel =" Icon ทางลัด type = "image/x-icon" />.........<!-จัดเก็บไฟล์ต้นฉบับสำหรับการแก้ไข-> <textarea style = "แสดง: ไม่มี" id = "textContent" name = "textContent"> </textarea> <!- ฟิลด์ข้อความที่ซ่อนอยู่ที่สองใช้เพื่อสร้างรหัส HTML ที่สร้างขึ้นเพื่ออำนวยความสะดวกในการส่งแบบฟอร์ม ชื่อที่นี่สามารถดำเนินการโดยพลการ เมื่อได้รับการยอมรับในพื้นหลังคีย์ชื่อนี้จะได้รับการเอาชนะ -> <textarea id = "text" name = "text"> </textarea> </div>เริ่มต้นบรรณาธิการ
VAR Testeditor; $ (function () {testeditor = editormd ("test-editormd", {width: "90%", ความสูง: 640, syncscrolling: "single", path: "$ {re.contextpath}/editor/lib/", imageupload "webp"], imageuploadurl: "/ไฟล์", // การกำหนดค่านี้ไม่ได้มีอยู่ใน simple.html แต่เพื่อส่งแบบฟอร์มให้ใช้การกำหนดค่านี้เพื่อให้รหัส HTML ที่สร้างขึ้น;สิ่งนี้ใช้ตัวแก้ไข Editor.md ที่ง่ายที่สุดโดยมีเอฟเฟกต์ต่อไปนี้:
ที่อยู่การเข้าถึง: http: // localhost: 8080/
อัพโหลดรูปภาพ
เนื่องจากที่อยู่อัปโหลดรูปภาพที่กำหนดค่าในตัวแก้ไขการเริ่มต้นคือ imageUploadurl: " /ไฟล์" ซึ่งสอดคล้องกับมันเราสามารถประมวลผลไฟล์อัปโหลดใน /ไฟล์
@restController@requestmapping ("/file")@slf4jpublic คลาส fileController {// @Value ("") // สตริงโฟลเดอร์ = system.getProperty ("user.dir")+file.Saperator+"upload"+file.separator; / *** พา ธ การบันทึกไฟล์ที่กำหนดค่าไว้ในไฟล์กำหนดค่า*/ @Value ("$ {img.location}") โฟลเดอร์ส่วนตัว @PostMapping public fileinfo อัปโหลด (คำขอ httpservletRequest, @requestparam (value = "editormd-image-file", ต้องการ = false) ไฟล์ multipartfile) โยนข้อยกเว้น {log.info ("fileController file.getoriginalfilename (), file.getSize ()); log.info (request.getContextPath ()); string filename = file.getoriginalfilename (); String Suffix = filename.substring (filename.AlastIndexof (".") + 1); String newFileName = new Date (). getTime () + " + คำต่อท้าย; ไฟล์ localfile = ไฟล์ใหม่ (โฟลเดอร์, newfilename); file.transferto (localfile); log.info (localfile.getabsolutepath ()); ส่งคืน FileInfo ใหม่ (1, "อัปโหลดสำเร็จ", request.getRequesturl (). substring (0, request.getRequesturl (). lastIndexof ("/"))+"/"+newfileName); } @getMapping ("/{id}") การดาวน์โหลดโมฆะสาธารณะ (@PathVariable String ID, คำขอ httpservletRequest, การตอบสนอง httpservletResponse) {ลอง (inputstream inputstream = new fileInputStream (โฟลเดอร์ใหม่ (โฟลเดอร์, id + ".txt"); Response.SetContentType ("แอปพลิเคชัน/X-Download"); Response.SetheAder ("เนื้อหา-การจัดสรร", "สิ่งที่แนบมา; ชื่อไฟล์ = test.txt"); ioutils.copy (inputstream, outputstream); outputstream.flush (); } catch (Exception E) {}}}}ตัวอย่างไฟล์
เมื่อมีการส่งแบบฟอร์มโพสต์ Editor.md แปลเอกสารไวยากรณ์ของเราเป็นภาษา HTML และส่งสตริง HTML ไปยังแบ็กเอนด์ของเราซึ่งยังคงมีสตริง HTML เหล่านี้ลงในฐานข้อมูล วิธีการแสดงผลเฉพาะบนหน้ามีดังนี้:
<! doctype html> <html lang = "zh"> <head> <meta charset = "utf-8"/> <title> editor.md ตัวอย่าง </title> <link rel = "stylesheet" href = "$ {re.contextpath rel = "stylesheet" href = "$ {re.contextpath} /editor/css/editormd.css" rel = "ภายนอก nofollow"/> </head> <body> <!-เพราะเราใช้ชุดรูปแบบมืด src = "$ {re.contextpath} /jquery.min.js"> </script> <script src = "$ {re.contextpath}/leb/lib/marked.min.js"> </script> <script src = "$ {re.contextpath src = "$ {re.contextpath} /editor/lib/prettify.min.js"> </script> <script src = "$ {re.contextpath}/editormd.min.js"> </script> <script type = "text/javascript"> editormd.markdowntohtml ("เนื้อหา"); </script> </body> </html>ดูตัวอย่างที่อยู่: http: // localhost: 8080/editorWeb/Preview/{id}
แก้ไขที่อยู่: http: // localhost: 8080/editorWeb/edit/{id}
ดาวน์โหลดรหัส
ดาวน์โหลดจาก GitHub ของฉัน https://github.com/longfeizheng/editor-markdown
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น