ฉันจะสรุปปัญหาที่ฉันพบในกระบวนการปรับแต่งสไตล์สำหรับตัวแก้ไขส่วนใหญ่เป็นอินเทอร์เฟซการพัฒนารองของบรรณาธิการและปรับแต่งสไตล์ด้วย Angular มีปัญหามากมาย ในที่สุดด้วยความช่วยเหลือของ ** มันก็เสร็จสมบูรณ์ ยังไม่มีการโต้ตอบระหว่างเวอร์ชันเก่าและเวอร์ชันใหม่ แต่ก็ไม่ยาก ต่อไปนี้อธิบายปัญหาแยกกัน
การพัฒนา Ueditor
คุณสามารถดาวน์โหลดเวอร์ชันใดก็ได้ในเว็บไซต์อย่างเป็นทางการและใช้: http://ueditor.baidu.com/website/download.html หลังจากดาวน์โหลดคุณสามารถใช้ตามการกำหนดค่าบนเว็บไซต์ทางการ ที่อยู่เอกสาร: http://fex.baidu.com/ueditor/ มีปัญหามากมายเกี่ยวกับการพัฒนารอง Ueditor และพวกเขาอยู่ที่นี่
1. ueditor กรองแท็ก div โดยอัตโนมัติลงในแท็ก p
ในระหว่างกระบวนการสไตล์ที่กำหนดเองฉันพบว่า DIV ทั้งหมดถูกกรองและพบแท็ก UNP ฉันพบข้อมูลออนไลน์จำนวนมาก แต่ไม่มีใครมีประโยชน์ ต่อมาฉันเห็นการเขียนหลักว่าการกำหนดค่าของ Ueditor เวอร์ชันต่าง ๆ นั้นแตกต่างกัน ที่นี่ฉันเขียนโซลูชันของฉัน: เปิดไฟล์กำหนดค่า ueditor.config.js และเพิ่มรหัสต่อไปนี้:
, lewlowdivtranstop: เท็จ
โปรดทราบว่ามีการเพิ่มด้วยตนเองใน window.uediroe_config! นอกจากนี้บางคนพบสถานการณ์ที่คล้ายกันและสามารถอ้างถึง: http://www.cnblogs.com/olive116/p/3464495.html
2. วิธีการแทรกสไตล์ที่กำหนดเองลงในตัวแก้ไข?
อินเทอร์เฟซมีให้ในตัวแก้ไขลองมาดูกันเถอะ
ฟังก์ชั่น inserthtml () {var value = prompt ('แทรกรหัส HTML', ''); ue.getEditor ('editor'). execommand ('inserthtml', ค่า)}ดังนั้นคุณจะใช้อินเทอร์เฟซนี้ในโครงการของเราเองได้อย่างไร? ก่อนอื่นคุณต้องตระหนักถึงตัวแก้ไขโดยปกติจะใช้ ue.getEditor () โดยตรงเพื่อรับอินสแตนซ์
// ใช้วิธีการของโรงงาน GetEditor เพื่อสร้างและอ้างอิงอินสแตนซ์ของตัวแก้ไข หากคุณอ้างถึงตัวแก้ไขภายใต้การปิดบางอย่างคุณสามารถโทรหา ue.getEditor ('editor') โดยตรงเพื่อรับอินสแตนซ์ที่เกี่ยวข้องก่อนใช้งาน เราจำเป็นต้องแนะนำตัวแก้ไขเพื่อเรียกวิธีการของมัน
<script src = "libs/ueditor/ueditor.config.js"> </script> <script src = "libs/ueditor/ueditor.all.min.js"> </script>
สร้างตัวอย่างตัวแก้ไขในโครงการเชิงมุมของเรา ตัวแก้ไขมีวิธีการพร้อมในการสร้างอินสแตนซ์:
// สร้างคอลัมน์จริงของตัวแก้ไข $ scope.ready = function (ueditor) {window.editor = ueditor;};ตกลงตอนนี้เราสามารถใช้อินสแตนซ์ของตัวแก้ไขได้แล้ว ถัดไปมาดูสไตล์ที่กำหนดเอง
รูปแบบที่กำหนดเอง
มาดูสไตล์ของเมนูหีบเพลงที่เราเขียนไว้ในมือ ดาวน์โหลดที่อยู่: https://github.com/foreverjiangting/set-menu/tree/master/menu การโต้ตอบที่ใช้ที่นี่ใช้ data-toggle = "ล่มสลาย" แต่มันขัดแย้งกับ NG ดังนั้นจำเป็นต้องใช้ NG เพื่อควบคุมการโต้ตอบ มาดูวิธีการเขียน:
<!-เพิ่มแถบเครื่องมือ-> <div> <h4> แถบเครื่องมือ </h4> <!-เนื้อหาแถบด้านข้าง-> <div> <a ng-click = "สลับ ('titlestyle')"> <span> </span> บ้าน </a> ng-click = "inserthtml ('titles', ชื่อเรื่อง)"> <a> {{title.name}} </a> </li></ul> <a ng-click = "toggle ('titleicon')" articlem> </span> sources.imgs "ng-click =" inserthtml ('imgs', img) "> <a> <img ng-src =" {{img.url}} "> </a> </li> </ul> ng-hide = "titleyouxia" id = "glyphicnmenu"> <li ng-repeat = "yx ใน sources.yxs" ng-click = "inserthtml ('yxs', yx)"> <a> {{yx.name}} </a> </li> ng-click = "toggle ('titleserve')"> <span> </span> กระดานข้อความ </a> <ul ng-hide = "titleserve" id = "servemenu"> <li ng-repeat = "ser ในแหล่งที่มา ser) "> <a> {{ser.name}} </a> </li></ul> <a ng-click =" สลับ ('titlearticle') "> <pan> </span> บทความที่แนะนำ </a> ng-click = "inserthtml ('arcs', arc)"> <a> {{arc.article}} </a> </li> </ul> </div> <!-ธีมของเนื้อหาสิ้นสุดลง-> </div>รหัสใน JS มีดังนี้:
// รูปแบบการโต้ตอบแถบเครื่องมือ $ scope.titlestyle = $ scope.titleicon = $ scope.titleyouxia = $ scope.titleserve = $ titlearticle = false; $ scope.toggle = ฟังก์ชั่น (สไตล์) {$ scope [style] =! $ SCOPE [Style];}เอฟเฟกต์หีบเพลงที่ควบคุมโดย NG นั้นง่ายและเบาด้วยรหัสจำนวนเล็กน้อย
ผลกระทบมีดังนี้:
หลังจากเขียนสไตล์แล้วมันจะถูกแทรกลงในตัวแก้ไข แล้วจะแทรกอย่างไร? มีสองประเภทที่นี่: แทรกโดยตรงและแทรกตามบทความหลังจากค้นหา ง่ายกว่าที่จะแทรกโดยตรง
$ scope.inserthtml = function (type, item) {ถ้า (type === 'ชื่อ' || type === 'imgs') {editor.execcommand ('inserthtml', item.html);}เอฟเฟกต์หลังจากการแทรกมีดังนี้:
แน่นอนว่าการใช้สิ่งนี้คืออะไร? ส่วนใหญ่ใช้เนื้อหาในตัวแก้ไขและใช้การเชื่อมโยงข้อมูล NG เพื่อสะท้อนมันในแอพดังนั้นการสร้างอินเทอร์เฟซการแก้ไขบทความของแอป
การผลิตฟังก์ชั่นการค้นหา
ข้อมูลได้มาจาก API ตามธรรมชาติ จะรับข้อมูลใน API ได้อย่างไร? มาดูกันเถอะ เราใช้ HTTP เป็นหลักในการรับข้อมูลจากนั้นใช้วิธีการโทรกลับรับ HTTP รับข้อมูลจากนั้นใช้วิธีการโทรกลับรับข้อมูล Data
Angular.Module ('บริการ'). บริการ ('ArticleService', ฟังก์ชั่น ($ http) {return {searcharticle: function (title) {return $ http.get ('api/บทความ/ค้นหา', {data: {title: title: title}});}};};});ที่นี่เราประกาศว่าบทความและส่งคืนข้อมูล API ดังนั้นเราจึงฉีดการพึ่งพาเข้าไปในหน้าเพื่อเรียกมันเพื่อเรียกวิธีการของมัน มาดูรหัส: โดยปกติบริการโทร
ข้อมูลที่ส่งคืนโดย API จะถูกวางไว้ในโฟลเดอร์และคอนโทรลเลอร์ที่ควบคุมข้อมูลจะถูกวางไว้ในโฟลเดอร์ ลองมาดูกันว่าข้อมูล API ถูกเรียกกลับมาในคอนโทรลเลอร์อย่างไร
Angular.module ('article.controllers'). คอนโทรลเลอร์ ('servicectrl', ฟังก์ชั่น ($ scope, $ rootscope, $ filter, $ timeout, $ state, $ stateparams, contentservice, articleservice, ประเภท) {โปรดทราบว่าคุณต้องฉีด Articleservice ลงในคอนโทรลเลอร์ก่อนที่คุณจะสามารถโทรกลับข้อมูลได้ จะโทรกลับข้อมูลได้อย่างไร? ดูรหัสต่อไปนี้:
var arcfullSearch = {text: '', ผลลัพธ์: [], เลือก: [], // เก็บข้อมูลที่เลือกไว้ก่อนในอาร์เรย์เริ่มต้นการค้นหา: ฟังก์ชัน () {var self = this; var text = self.text.trim () data. data. ผ่านใน self.result = data.data; // รับข้อมูล}, ฟังก์ชัน (err) {console.log (err);}); -ตกลงเราสามารถโทรกลับไปยังข้อมูลฟังก์ชั่นได้สำเร็จ เกี่ยวกับส่วนการค้นหาต่อไปนี้เป็นบทสรุปของจุดความรู้ที่ไม่รู้จัก
สรุปคะแนนความรู้
1. วิธีการเขียนอาร์เรย์ลงในสตริง
2. เกี่ยวกับการใช้งานแทนที่ด้วยฟังก์ชั่น
Ecmascript กำหนดว่าการเปลี่ยนพารามิเตอร์ของวิธีการแทนที่ () อาจเป็นฟังก์ชันหรือสตริง ในกรณีนี้การแข่งขันแต่ละรายการเรียกฟังก์ชันและคำที่ส่งคืน
สตริงจะถูกใช้แทนข้อความ พารามิเตอร์แรกที่ส่งคืนโดยฟังก์ชั่นการเรียกกลับฟังก์ชั่นหมายถึงอักขระการจับคู่และข้อมูลแพ็คเก็ตที่สองและต่อมา มาดูรหัสกันเถอะ
3. นรกคืออะไร [p.slice (0, ดัชนี)] [p.slice (ดัชนี+1)]? คุณจะรู้หลังจากการดีบัก
มาดูกันว่ารหัสการสังเคราะห์หมายถึงอะไร
var arr = serves.map (ฟังก์ชั่น (xx) {return item.html.replace (/{{([/w /.like+?) }/ gi, ฟังก์ชั่น (จับคู่, p) {var index = p.indexof ('.'); ถ้า (ดัชนี> 0) {return formatfield (xx formatial (xx [p]);}});});4. เกี่ยวกับหลักการของการตั้งค่าตัวจับเวลาลองมาดูรหัสก่อน
ทำไมเอาต์พุต -1? ก่อนอื่นให้ดูที่หลักการ settimout ()
settimeout () เรียกใช้งานรหัสเพียงครั้งเดียว หากคุณต้องการโทรหลายครั้งให้ใช้ setInterval () หรือมีรหัสตัวเองเรียกใช้ setTimeout () อีกครั้ง
Settimeout ใช้เพื่อล่าช้าเป็นระยะเวลาหนึ่งก่อนทำการดำเนินการบางอย่าง นั่นคือหลังจากเวลาที่กำหนดล่าช้าหลังจากการโหลดนิพจน์จะถูกดำเนินการหนึ่งครั้งและมีการดำเนินการเพียงครั้งเดียวเท่านั้น
settimeout (รหัสเวลาหน่วง);
เวลาหน่วงไม่ใช่เวลาที่คุณคาดหวัง เบราว์เซอร์ที่แตกต่างกันมีเวลาหน่วงที่แตกต่างกัน นำตัวอย่างด้านบนนั่นคือเวลาหน่วงไม่ใช่ 0 ด้านบน การเปรียบเทียบ
กล่าวอีกนัยหนึ่งการตั้งถิ่นฐานจะถูกดำเนินการเพียงครั้งเดียว แต่เวลาไม่ใช่ 0 มันไม่แน่ใจว่ามีความล่าช้ากี่วินาที ถ้าอย่างนั้นก็ไม่น่าแปลกใจว่าทำไมมันถึงปรากฏเป็น -1 มาวิเคราะห์โปรแกรมกันเถอะ
เมื่อฉัน = 3 หลังจากนั้น (3) ฉันจะลดลงเหลือ 2 และดำเนินการ settimeout
เมื่อฉัน = 2 หลังจากนั้น (2) ฉันจะลดลงเหลือ 1 และดำเนินการ settimeout
เมื่อฉัน = 1 หลังจากนั้น (0) ฉันจะลดลงเหลือ 2 และมีการดำเนินการ settimeout
เมื่อฉัน = 0 หลังจากนั้น (0) ฉันจะลดลงเหลือ -1 ในเวลานี้โปรแกรมจะสิ้นสุดลง แต่ช่วงเวลาสำหรับการตั้งค่า settimout คือ 0 จะไม่เข้าใจการดำเนินการและจะถูกแทรกลงในคิวการดำเนินการของเธรดรอฉันรอ
เมื่อมันกลายเป็น -1 สามครั้งก่อนหน้านี้จะถูกดำเนินการและในเวลานี้ฉันเปลี่ยนเป็น -1 ดังนั้นผลลัพธ์คือ -1 คอนโซลที่พิมพ์ในเวลานี้ถูกพิมพ์โดยคอนโซลก่อนหน้า
Settimeout เป็นรหัสแบบอะซิงโครนัสซึ่งหมายความว่าการเขียน SetTimeOut (FN, 100) ไม่ได้หมายความว่า FN จะถูกดำเนินการทันทีหลังจาก 100 มิลลิวินาทีและความล่าช้ามีแนวโน้มที่จะนานขึ้น เพราะทั้งหมด
เหตุการณ์แบบอะซิงโครนัส (รวมถึงตัวจับเวลาหรือ XMLHTTPREQUEST เสร็จสิ้น) จะถูกดำเนินการเฉพาะเมื่อมีฟรีระหว่างการดำเนินการของโปรแกรมไม่ใช่เมื่อคุณกำหนดเมื่อคุณดำเนินการ
ข้างต้นเป็นบทสรุปของปัญหาของการแทรกสไตล์ที่กำหนดเอง AngularJs ลงใน Ueditor ที่แนะนำโดยบรรณาธิการ ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับทุกคนในเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!