โครงการพัฒนาปัจจุบันเกี่ยวข้องกับกล่องข้อความที่หลากหลาย หลังจากเรียนรู้เกี่ยวกับบรรณาธิการข้อความมากมายในที่สุดฉันก็ตัดสินใจใช้ Ueditor ของ Du Niang เหตุผล: มันมีฟังก์ชั่นที่ทรงพลังและมาพร้อมกับรูปภาพและการอัปโหลดวิดีโอที่ปรับให้เข้ากับแบ็กเอนด์ Java
แกลเลอรี่โครงการ
โดยไม่ต้องกังวลใจเพิ่มเติมที่อยู่ของโครงการคือ: http://ueditor.baidu.com/website/
เป็นเรื่องน่าเสียดายที่ Jianshu ไม่สนับสนุนลิงก์ภายนอกในเว็บไซต์อื่น ๆ
กระบวนการบูรณาการ
การเปลี่ยนแปลงแบ็กเอนด์
เนื่องจากโครงการใช้ Framework Springboot การสนับสนุนของ Ueditor สำหรับแบ็กเอนด์ Java จึงเป็นเพียงการให้ไฟล์ JSP ดังนั้นไฟล์จะต้องดำเนินการและแก้ไขเป็นคอนโทรลเลอร์แบบครบวงจรสำหรับ SpringBoot
@controller @transactional @requestmapping ("/static/common/ueditor/jsp") คลาสสาธารณะ jspcontroller {@requestmapping ("/คอนโทรลเลอร์") @responsebody โมฆะสาธารณะ getConfiginfo (httpservletRequest Request string rootpath = request.getSession (). getServletContext () .getRealAtPath ("/"); ลอง {string exec = ใหม่ actionenter (คำขอ, rootpath) .exec (); PrintWriter Writer = Response.getWriter (); Writer.write (Exec); Writer.flush (); Writer.close (); } catch (ioexception | jSonexception e) {e.printstacktrace (); -ดังที่ได้กล่าวไว้ข้างต้นโครงการสนับสนุนคำขออัปโหลดจาก/static/common/ueditor/jsp/controller
คำขอส่วนหน้า
เพิ่มการสนับสนุน Ueditor ในส่วนหน้า นั่นคือนำเข้าแพ็คเกจ Uediootr ทั้งหมดลงในโครงการและนำเข้า JS ที่ใช้การควบคุม
เมื่อมีการแนะนำโครงการโครงสร้างรหัสที่เกี่ยวข้องของฉันมีดังนี้:
บทนำหน้ารหัสที่เกี่ยวข้องจะถูกนำมาใช้ดังนี้:
<script type = "text/javascript" charset = "utf-8" th: src = "@{/static/common/ueditor/ueditor.config.js}"> </script> <script type = "text/javascript" charset = "utf-8" th: src = "@ เพียงแค่ยกตัวอย่าง ueditor editor ด้านล่างนี้เป็นพารามิเตอร์การเริ่มต้นของฉันสำหรับการอ้างอิงเท่านั้น
// อินสแตนซ์แก้ไข var ue ue = ue.getEditor (''+id, {toolbars: [['fontfamily', // font 'font'fontsize', // font size'undo ', // undo', // redo '|', 'อารมณ์', // // bold'underline ', // unline'strikethrough', // strikethrough '|', 'justifyleft', // list-align'justifyright ', // right-align'justifycenter', // center-align '|', 'link', // hyperlink'unlink ' // music ', // music //' insertVideo ', // video', // ล้างรูปแบบ 'formatmatch', // รูปแบบ brush 'source', // ซอร์สโค้ด]], enableautosave: false, autoheightenabled: true, autofloatenabledณ จุดนี้คุณจะเห็นกล่องข้อความที่หลากหลายเมื่อไปที่หน้าของเรา
อย่างไรก็ตามมันจะแจ้งให้เราทราบว่ามีข้อผิดพลาดในไฟล์การกำหนดค่าพื้นหลังและไม่สามารถใช้ฟังก์ชันการอัปโหลดได้
ใช้ฟังก์ชั่นอัปโหลด
แก้ไขไฟล์ config.js และเส้นทางคำขอทั่วโลกที่สอดคล้องกัน คำขอนี้คือการได้รับข้อมูลการกำหนดค่าที่สอดคล้องกับ config.json คุณสามารถส่งคืนข้อมูลการกำหนดค่าโดยตรงในคอนโทรลเลอร์หรืออ่านไฟล์ JSON ในคอนโทรลเลอร์ ฉันใช้วิธีการอ่านไฟล์การกำหนดค่าที่นี่โดยใช้วิธีการที่มาพร้อมกับ ueditor บทความได้ถูกนำไปใช้ในตอนแรก นี่คือคำขอที่ต้องแก้ไข:
หลังจากเสร็จสิ้นการกำหนดค่าด้านบนให้โหลดหน้า Ueditor อีกครั้งและปุ่มอัปโหลดของภาพสามารถเสร็จสิ้นได้
หมายเหตุ: หากคุณเริ่มโหมดการดีบักให้เพิ่มจุดพักและทดสอบเมื่อโหลดสตริง JSON ข้อผิดพลาดการหมดเวลาจะเกิดขึ้น ไม่พบฟิลด์การกำหนดค่าในไฟล์การกำหนดค่าสำหรับเวลา ทั้งหมดควรสังเกตที่นี่ หากการกำหนดค่าทั้งหมดไม่เป็นปัญหา แต่ข้อผิดพลาดการกำหนดค่าพื้นหลังยังคงถูกส่งคืนคุณสามารถยกเลิกจุดพักทั้งหมดและลองได้
หมายเหตุ: การอัปโหลดต้องการการเพิ่มส่วนประกอบอัปโหลดใช้ fileuoload ที่นี่
<การพึ่งพา> <roupId> Commons-FileUpload </groupId> <ratifactId> Commons-FileUpload </artifactId> <version> 1.3 </Serfever>
ใช้ servlet เพื่อใช้การอัปโหลด
/** * ลองใช้ servlet เพื่อใช้ ueditor * * @author onywang * @create 2018-02-05 2:40 **/ @webservlet (name = "ueditorservlet", urlpatterns = "/แบบคงที่/ueditor/ueditor") DOPOST (คำขอ httpservletRequest, การตอบสนอง httpservletResponse) พ่น servletexception, ioexception {request.setcharacterencoding ("UTF-8"); Response.Setheader ("ประเภทเนื้อหา", "ข้อความ/html"); PrintWriter out = response.getWriter (); แอปพลิเคชัน servletContext = this.getServletContext (); string rootpath = application.getRealPath ("/"); String action = request.getParameter ("การกระทำ"); String result = new ActionEnter (คำขอ, rootPath+"web-inf/classes") .Exec (); if (action! = null && (action.equals ("listfile") || action.equals ("listimage")))) {rootpath = rootpath.replace ("//", "/"); result = result.replaceall (rootpath, "/"); } out.write (ผลลัพธ์); } @Override Void DoGet (httpservletrequest REQ, httpservletResponse resp) โยน servletexception, ioexception {dopost (req, resp); - ใช้วิธี servlet และสร้าง servlet หมายเหตุประกอบใหม่
คุณต้องเพิ่มคำอธิบายประกอบ @ServletComponentScan ลงในวิธีหลัก
แก้ไขเส้นทางการเข้าถึงเริ่มต้นของ ueditor
หมายเหตุ: ภายใต้ Springboot ไฟล์ทรัพยากรทั้งหมดจะอยู่ภายใต้คลาส ทั้งหมดระวังเมื่อจัดการเส้นทาง เพิ่มพา ธ ไปยัง Web-Inf/คลาส
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น