บทความนี้สอนวิธีการใช้โปรแกรมแก้ไขข้อความ Bootstrap-Wysiwyg เพื่อให้การเล่นเต็มรูปแบบกับข้อดีของบรรณาธิการ ฉันหวังว่าคุณจะได้รับบางสิ่งบางอย่าง
คุณสมบัติหลัก:
5kb ขนาดเล็กสุด ๆ
การสนับสนุนฮอตคีย์อัตโนมัติ (Mac และ Windows)
ลากและวางรูปภาพแทรกสนับสนุนการอัปโหลดรูปภาพ (รองรับการถ่ายภาพโทรศัพท์มือถือ)
รองรับอินพุตเสียง (สนับสนุน Chrome)
อนุญาตให้แถบเครื่องมือที่กำหนดเองใช้เนื้อหา bootstrap ทั้งหมดแบบอักษร
ไม่มีการใช้รูปแบบบังคับ
-
อันที่จริงมันเป็นมากกว่านั้นทุกคนต้องสำรวจด้วยตัวเองมาเลย!
จริงๆแล้วมันใช้งานง่ายมาก เท JS ของ Bootstrap ที่เกี่ยวข้องกับ CSS, JS, JQuery และ Bootstrap-Wysiwyg ดังนี้:
<link href = "bootstrap-combined.no-icons.min.css" rel = "stylesheet"> <link href = "bootstrap-responsive.min.css" rel = "stylesheet"> <ลิงค์ href = "http://netdna.bootstrappcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel = "stylesheet"> <link rel = "Stylesheet" href = "index.css" type = "text/css" type = "text/javascript"> </script> <script src = "bootstrap.min.js"> </script> <script src = "bootstrap-wysiwyg.js" type = "text/javascript"> </script>
กำหนดคุณสมบัติรายการเมนูที่เกี่ยวข้องและวิธีการ:
ฟังก์ชั่น inittoolbarbootstrapbindings () {var fonts = ['serif', 'sans', 'Arial', 'Arial Black', 'Courier', 'Courier ใหม่', 'Comic Sans Ms', 'Helvetica', 'Times', 'Lucida Grande' fonttarget = $ ('[title = font]'). พี่น้อง ('. dropdown-menu'); $ .Each (แบบอักษร, ฟังก์ชั่น (idx, fontname) {fonttarget.append ($ ('<li> <a data-edit = "fontname' + fontname + '" style = "font-family:/' ' + fontname +'/'">' + fontname + '</a> $ ('A [title]'). Tooltip ({container: 'body'}); $ ('. dropdown-menu input'). คลิก (function () {return false;}) .change (function () {$ (this) .parent ('. dropdown-menu'). พี่น้อง ('. dropdown-toggle'). dropdown ('); $ ('[data-Role = Magic-Overlay]'). แต่ละ (ฟังก์ชั่น () {var overlay = $ (this), target = $ (Overlay.data ('target')); Overlay.css ('opacity', 0) - if ("onwebkitspeechChange" ใน document.createElement ("อินพุต")) {var editorOffset = $ ('#editor'). Offset (); $ ('#voiceBtn'). CSS ('ตำแหน่ง', 'Absolute'). ออฟเซ็ต ({top: editorOffset.top, ซ้าย: editorOffset.left+$ ('#editor'). innerWidth ()-35}); } else {$ ('#voiceBtn'). ซ่อน (); - ฟังก์ชั่น ShowerRoralert (เหตุผล, รายละเอียด) {var msg = ''; if (reision === 'ไม่ได้รับการสนับสนุนไฟล์ประเภท') {msg = "รูปแบบที่ไม่ได้รับการสนับสนุน" +รายละเอียด; } else {console.log ("ข้อผิดพลาดการอัปโหลดไฟล์", เหตุผล, รายละเอียด); } $ ('<div> <button type = "ปุ่ม" data-dismiss = "Alert"> × </button>'+'<strong> ข้อผิดพลาดการอัปโหลดไฟล์ </strong>'+msg+'</div>') - Inittoolbarbootstrapbindings (); $ ('#editor'). wysiwyg ({fileuploaderror: batherRoralert});ในที่สุดรหัส HTML:
<div data-Role = "editor-toolbar" data-target = "#editor"> <div> <a data-toggle = "dropdown"> <i> </i> <b> </b> </a> data-edit = "fontsize 5"> <font size = "5"> ใหญ่ </font> </a> </li> <li> <a data-edit = "Fontsize 3"> <font size = "3"> ปกติ </font> </a> </li> <li> <li> <a data-edit = "fontsize 1"> <font size = "1"> เล็ก </font> </a> </li> </ul> </div> </iD> </iD> <a data-edit = "bold"> <i> </i> </a> data-edit = "strikethrough"> <i> </i> </a> <a data-edit = "ขีดเส้นใต้"> <i> </i> </a> </div> <div> <a data-edit = "InsertunorderEdList"> <i> </i> </a> data-edit = "outdent"> <i> </i> </a> <a data-edit = "outdent"> <i> </i> </a> <a data-edit = "outdent"> <i> </i> </a> data-edit = "justifyleft"> <i> </i> </a> <a data-edit = "Justifycenter"> <i> </i> </a> <a data-edit = "Justifyright"> <i> </i> </a> data-toggle = "dropdown"> <i> </i> </a> <div> <อินพุต placeholder = "url" type = "text" data-edit = "createlink"/> <button type = "ปุ่ม"> เพิ่ม </button> </div> <a data-edit = " id = "picturebtn"> <i> </i> </a> <อินพุต type = "ไฟล์" data-Role = "Magic-Overlay" data-target = "#picturebtn" data-edit = "insertimage"/> </div> <div> <a data-edit = "undo"> <i> <input type = "text" data-edit = "InsertText" id = "voiceBtn" x-webkit-speech = ""> </div> <div id = "editor"> ป้อนเนื้อหา… </div>
หากคุณยังต้องการศึกษาในเชิงลึกคุณสามารถคลิกที่นี่เพื่อเรียนรู้และแนบหัวข้อที่ยอดเยี่ยมให้คุณ: การสอนการเรียนรู้ bootstrap
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น