โครงการของเราใช้ bootstrapvalidator สำหรับการตรวจสอบส่วนหน้า แต่มี ueditor ในรูปแบบ มันไม่มีผลเมื่อใช้ bootstrapvalidator เพื่อประโยชน์ของรูปแบบหน้าแบบครบวงจรเพียงแค่แก้ไขและแก้ไข
ก่อนอื่นมาดูเอฟเฟกต์ที่แก้ไขแล้ว
ueditor ด้านบนจะต้องมีการปรับจนถึงจุดนี้ ก่อนอื่นให้เขียนโครงสร้างพื้นฐานก่อน
<form style = "padding-top: 15px; width: 100%" id = "defaultform"> <div> <label id = "labelid" style = "Font-Weight: ปกติ;"> ueditor test </label> <div id = "divid"> <script id = "ueid" type = "ข้อความธรรมดา" style = "ความสูง: 0px; ชายแดน: 0px; มาร์จิ้น: 0px; padding: 0px"/> </div> </div> <div> <div> <button type = "ส่ง" id = "btn_save"> บันทึก </button> </div> </form>
ให้ความสนใจเป็นพิเศษฉันเพิ่มกล่องข้อความด้านหลัง Ueditor จุดประสงค์ของกล่องข้อความนี้คือการจัดเก็บเนื้อหาของ Ueditor เนื่องจาก ueditor ของคุณไม่สามารถใช้ bootstrapvalidator สำหรับการตรวจสอบฉันจะเพิ่มกล่องข้อความที่สามารถใช้สำหรับการตรวจสอบแล้วซ่อนอินพุตโดยใช้ style = "ความสูง: 0px; border: 0px; margin: 0px; padding: 0px;" วิธี. ให้ความสนใจเป็นพิเศษที่ไม่สามารถซ่อนอยู่ได้ด้วยการแสดงผล: ไม่มีดังนั้นการตรวจสอบจะถูกซ่อนไว้ด้วยกัน
จากนั้นมันจะไม่ทำงานในตอนนี้ มาเพิ่มการยืนยันเนื้อหากล่องข้อความกันเลย
$ ('#defaultform'). bootstrapvalidator ({message: 'การตรวจสอบล้มเหลว', feedbounticons: {ถูกต้อง: 'glyphicon glyphicon-ok', ไม่ถูกต้อง: 'glyphicon glyphicon-remove', การตรวจสอบ: 'ข้อมูลที่ส่งไม่สามารถว่างเปล่า', ตัวตรวจสอบ: {notempty: {// ข้อความที่ไม่ว่างเปล่า: 'ข้อมูลที่กรอกข้อมูลไม่สามารถว่างเปล่า'},}},}}) บน ('success.form.bv', ฟังก์ชัน (e) {e.preventDefault () $ .post ('ที่อยู่', {data: "data"}, ฟังก์ชั่น (ผลลัพธ์) {Alert (ผลลัพธ์);});มาลองกันเลยมันไม่ได้ผลเพราะเนื้อหาข้อความและข้อความที่ซ่อนอยู่ของเรายังไม่ได้ซิงโครไนซ์และควรซิงโครไนซ์เมื่อเราป้อนเนื้อหาใน Ueditor!
ดังนั้นเราจะซิงโครไนซ์ในเหตุการณ์ ContentChange ของ Ueditor หรือไม่? -
ดูเหมือนว่าไม่มีปัญหาในตอนแรก แต่คุณจะพบว่าสัญลักษณ์พิเศษเหล่านี้เช่น *&%￥ จะไม่กระตุ้นเหตุการณ์ ContentChange เมื่อป้อน
ตอนนี้มันน่าอายมาแก้ไขต่อไป!
ที่นี่เราจำเป็นต้องแก้ปัญหาสองปัญหาหนึ่งคือเหตุการณ์ ContentChange ปัญหาที่สัญลักษณ์พิเศษไม่สามารถเรียกใช้และปัญหาการมอบหมายและการตรวจสอบใหม่
ก่อนอื่นให้ดูที่ปัญหาแรกที่ไม่สามารถเรียกใช้สัญลักษณ์พิเศษได้ ก่อนอื่นดูสิ่งที่ ueditor ดูเหมือนหลังจากสร้างขึ้น
พบ iframe ที่นี่ ดูเหมือนว่าเนื้อหาของ Ueditor ถูกซ่อนไว้ที่นี่ ตราบใดที่คุณฟังเหตุการณ์การเปลี่ยนแปลงเนื้อหาในนั้นปัญหาแรกควรได้รับการแก้ไข
มีคำถามที่สองอีกคำถามเพียงอัปโหลดรหัส
editor = ue.getEditor ("UEID", {initialFrameHeight: 40}). พร้อม (ฟังก์ชั่น () {var editor = ue.getEditor ("ueid"); /* ค้นหา iframe ของ ueditor* / var fund () $ ("inputid"). val (ue.geteditor ("ueid"). getContent ()); {//document.All รับรู้ว่ามันเป็นจริงภายใต้ IE และภายใต้สารบัญ IE (0) .AttacheVent ('OnPropertyChange', ฟังก์ชั่น (e) {fn ();});หลังจากได้รับมอบหมายเราต้องใช้วิธีการ updatestatus และ validatefield ของ bootstrapvalidator เพื่อตรวจสอบใหม่แล้วลองอีกครั้ง
หากคุณมองอย่างใกล้ชิดมีสามปัญหาภายใน หนึ่งคือเส้นขอบไม่เปลี่ยนสีด้วยกัน ประการที่สองคือไม่มีไอคอนที่มี√และ×ทางด้านขวา ประการที่สามคือการบันทึกจุดตรงไม่ได้กระตุ้นการตรวจสอบ
โอเคมาแก้มันทีละตัว! ก่อนอื่นทำไมไม่เปลี่ยนสีชายแดน ที่จริงแล้วมันเป็นเรื่องปกติเพราะเรากำลังตรวจสอบกล่องข้อความที่ซ่อนอยู่ หากสีเปลี่ยนไปควรเป็นกล่องข้อความ
ตกลงจากนั้นเราจะเพิ่มชิ้นส่วนของ JS และทำให้สีขอบเหมือนกันกับสีฉลากด้านซ้ายดังนั้นเพิ่มโค้ดชิ้นหนึ่งหลังจากการตรวจสอบใหม่ของ ueditor อีกครั้ง
$ ($ ('#ueid div') [0]). css ('สีชายแดน', $ ('#labelid'). css ('color'));
ปัญหาที่สองคือการปล่อยให้√×แสดง นี่เป็นปัญหาเล็กน้อย ฉันปรับสไตล์ทีละบิต ในที่สุดฉันก็พบวิธีแก้ปัญหา ค้นหาคลาส. edui-default .edui-editor ในไฟล์ ueditor.css และเปลี่ยนตำแหน่งเป็นตำแหน่ง: เริ่มต้น; จากนั้นปรับขอบด้านบนให้เหมือนกับแถบเครื่องมือในวิธีการพร้อมของ Ueditor
var margintop = $ ($ ('#ueid .edui-editor-toolbarbox') [0]). ความสูง ();
$ ($ ('##divid i') [0]). css ('margin-top', Margintop);
อันสุดท้ายได้รับการแก้ไขที่ดีที่สุดเพียงเพิ่มชิ้นส่วนของรหัสเพื่อส่งแบบฟอร์มส่ง
$ ('#defaultform') ส่ง (function () {$ ('#defaultform'). ข้อมูล ('bootstrapvalidator') .UpDatestatus ('inputName', 'NOT_VALIDATED', NULL) .ValidateField ('inputName'); $ ('#labelid'). css ('color'));})ในที่สุดเราสามารถเห็นเอฟเฟกต์สุดท้ายและเมื่อเราส่งแบบฟอร์มเราสามารถใช้ Val () ของกล่องข้อความโดยตรงและเราไม่ต้องการเพิ่มการตัดสินเพิ่มเติมถ้า (เป็น ueditor) {.... } ในที่สุดเนื้อหา HTML ทั้งหมดจะถูกแนบ
<! doctype html> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "html; charset = utf-8"/> href = "สคริปต์ /bootstrap.css" rel = "stylesheet" /> <link href = "bootstrapvalidator.min.css" rel = "stylesheet" /> <style> .form-control-feedback } </style> </head> <body> <form style = "padding-top: 15px; width: 100%" id = "defaultform"> <div> <label id = "labelid" style = "Font-Weight: Normal;"> Ueditor Test </label> name = "inputName" style = "ความสูง: 0px; ชายแดน: 0px; มาร์จิ้น: 0px; padding: 0px"/> </div> </div> <div> <div> <button type = "ส่ง" id = "btn_save"> บันทึก </button> </div> src = "jQuery-1.9.1.min.js"> </script> <script src = "scripts/bootstrap.min.js"> </script> <script src = "bootstrapvalidator.min.js"> </script> src = "ueeditor/ueditor.all.min.js"> </script> <script src = "zh_cn.js"> </script> <script src = "ueeditor/lang/zh-cn/zh-cn.js"> </script> initialFrameHeight: 40}). พร้อม (ฟังก์ชั่น () {var editor = ue.getEditor ("ueid"); /*ค้นหา iframe ของ ueditor* / var margintop = $ ($ ('#ueid .edui-editor-toolbarbox') [0]) Margintop); เนื้อหา var = $ ('#ueid') ค้นหา ('iframe') สารบัญ (); .UPDATESTATUS ('InputName', 'NOT_VALIDATED', NULL) .ValidateField ('InputName'); contents.get (0) .attachevent ('onpropertychange', ฟังก์ชั่น (e) {fn ();}); 'not_validated', null) .validatefield ('inputname'); 'glyphicon glyphicon-ok', ไม่ถูกต้อง: 'glyphicon glyphicon-remove', การตรวจสอบ: 'glyphicon glyphicon-refresh'}, ฟิลด์: {inputname: {// // // // // // // // },}},}}). on ('success.form.bv', ฟังก์ชั่น (e) {e.preventdefault (); var $ form = $ (e.target); var bv = $ form.data ('bootstrapvalidator'); // ส่งแบบฟอร์ม }) </script>อย่าลืมเพิ่ม bootstraps และ jQuery ให้กับสิ่งที่คุณใช้
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น