มาดูคำอธิบายอย่างเป็นทางการของฟังก์ชั่นที่เกี่ยวข้องของบรรณาธิการนี้
1. สามารถผูกคีย์มาตรฐานมาตรฐานสำหรับการดำเนินงานทั่วไปบนแพลตฟอร์ม Mac และ WnDows โดยอัตโนมัติ
2. คุณสามารถแทรกรูปภาพได้โดยการลากและลดลง สนับสนุนการอัปโหลดรูปภาพ (คุณสามารถรับรูปภาพบนอุปกรณ์มือถือของคุณได้)
3. อินพุตการจดจำเสียง (เบราว์เซอร์ Chrome เท่านั้น)
4. อนุญาตแถบเครื่องมือที่กำหนดเอง ไม่มีการสร้างแท็กเพิ่มเติม สนับสนุนเว็บไซต์เพื่อใช้ประโยชน์จากคุณสมบัติที่ยอดเยี่ยมของไลบรารีเครื่องมือเช่น Bootstrap, Font Awesome ฯลฯ
5. ทุกอย่างขึ้นอยู่กับคุณหากไม่มีสไตล์บังคับ
6. พึ่งพาคุณสมบัติมาตรฐานของเบราว์เซอร์ไม่มีรหัสที่ไม่ได้มาตรฐาน สามารถปรับแต่งฟังก์ชั่นแถบเครื่องมือและแป้นพิมพ์และสามารถเรียกใช้คำสั่งใด ๆ ที่รองรับโดยเบราว์เซอร์
7. ตัวแก้ไขนี้จะไม่สร้างเฟรมแยกต่างหากพื้นที่ข้อความสำรอง ฯลฯ พยายามทำให้มันง่ายที่สุดเท่าที่จะทำได้และเรียกใช้ใน DIV
8. (ไม่บังคับ) ล้างพื้นที่หาง; ล้าง div ที่ว่างเปล่าและช่วง
9. ต้องทำงานบนเบราว์เซอร์ที่ทันสมัย (ทดสอบใน Chrome 26, Firefox 19, Safari 6 และผู้ใช้รายงานว่าพวกเขาสามารถทำงานบน IE10 ได้)
10. สนับสนุนเบราว์เซอร์มือถือ (ทดสอบบน iOS 6 iPad/iPhone และ Android 4.1.1 Chrome)
หมายเหตุ: WYSIWYG และ WYSIHTML5 เป็นบรรณาธิการสองตัวที่แตกต่างกัน Wysiwyg เป็นรุ่นปรับปรุงของ Wysihtml5 ซึ่งค่อนข้างคล้ายกัน ดังนั้นคุณสามารถใช้มันตามความต้องการของคุณ
เว็บไซต์ทางการของ WYSIWYG: http://mindmup.github.io/bootstrap-wysiwyg/
เว็บไซต์ภาษาจีน wysiwyg: http://www.bootcss.com/p/bootstrap-wysiwyg//
Wysihtml5 เว็บไซต์ทางการ: http://jhollingworth.github.io/bootstrap-wysihtml5/
เนื่องจาก Wysiwyg เป็นรุ่นที่ได้รับการปรับปรุงของ Wysihtml5 ให้ฉันพูดถึงการใช้งานของ Wysiwyg, Wysihtml5 จึงคล้ายกัน
ขั้นตอนในการใช้งาน
1. แนะนำไฟล์ JS และ CSS ต่อไปนี้ ที่นี่ฉันต้องการระบุว่าเว็บไซต์อย่างเป็นทางการเป็นเพียงการใช้งานทั่วไปและต้องมีการแนะนำเอกสารต่อไปนี้ก่อนที่พวกเขาจะมีผลบังคับใช้ดังนั้นเว็บไซต์นี้มุ่งเน้นไปที่แอปพลิเคชันจริงและรายละเอียดเหล่านี้ไม่สามารถเพิกเฉยได้
<link href = "http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.no-icons.min.css" rel = "Stylesheet"> <ลิงค์ href = "http://netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel = "stylesheet"> <สคริปต์ src = "http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"> </script> <script src = "https://mindmup.s3.amazonaws.com/lib/jquery.hotkeys src = "http://netdna.bootstrappcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"> </script> <script src = "http://twitter.github.com/bootstrap/assetset href = "index.css" rel = "stylesheet"> <script src = "bootstrap-wysiwyg.js"> </script>
2. เพิ่มรหัส JS เนื่องจากรหัสมากเกินไปจะไม่อยู่ในรายการที่นี่ เว็บไซต์นี้ได้จัดเรียงซอร์สโค้ด โปรดดูซอร์สโค้ดของ demo.html
-
3. เพิ่มรูปแบบ HTML รูปแบบต่อไปนี้ลงในแท็กตัวถัง ควรสังเกตที่นี่ว่าตัวแก้ไขไม่ได้ห่อหุ้ม แต่เขียนรหัสลงในหน้า HTML โดยตรง ตัวแก้ไขทั้งหมดสามารถแบ่งออกเป็นสองส่วนแถบเครื่องมือด้านบนและกล่องแก้ไขข้อความ
1) แถบเครื่องมือด้านบน: เป็น div.btn-toolbar ที่มีหลาย div.btn-groups แต่ละปุ่มเครื่องมือคือกลุ่ม div.btn ในแต่ละ div.btn-Group เราสามารถกำหนดค่าข้อความแจ้งเตือนตัวเองเพื่อแสดงภาษาจีน
<div data-Role = "editor-toolbar" data-target = "#editor"> <div> </div> .......... <div> </div> </div>
นอกจากนี้ยังมีเครื่องมืออินพุตเสียง HTML5 ที่นี่ รหัสมีดังนี้:
<input type = "text" data-edit = "InsertText" id = "voiceBtn" x-webkit-speech = ""> "
2) กล่องข้อความเนื้อหา: div#editor
<div id = "editor"> เนื้อหา </div>
ข้างต้นเป็นการแนะนำสั้น ๆ เกี่ยวกับ bootstrap-wysiwyg มาดูเอฟเฟกต์
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น
หากคุณยังต้องการศึกษาในเชิงลึกคุณสามารถคลิกที่นี่เพื่อเรียนรู้และแนบหัวข้อที่ยอดเยี่ยมให้คุณ: การสอนการเรียนรู้ bootstrap
ในความเป็นจริง WYSIWG จำเป็นต้องกำหนด DIV บางตัวเพื่อสร้างตัวแก้ไขภาพในขณะที่ส่วนการแก้ไขต้องการเฉพาะ DIV พร้อมตัวแก้ไข ID เพื่อให้เสร็จสมบูรณ์ ฉันหวังว่าการแนะนำสั้น ๆ เกี่ยวกับ Bootstrap-Wysiwyg Visual Editor จะช่วยทุกคนได้จริงๆ