Artikel ini mengajarkan Anda cara menggunakan editor teks Bootstrap-Wysiwyg untuk memberikan permainan penuh untuk keuntungan editor. Saya harap Anda bisa mendapatkan sesuatu.
Fitur Utama:
5KB super kecil
Dukungan Hotkey Otomatis (Mac and Windows)
Seret dan lepas Sisipkan Gambar, Dukungan Upload gambar (mendukung fotografi ponsel)
Dukungan Input Suara (Dukungan Chrome)
Izinkan Toolbar Kustom untuk menggunakan semua konten Bootstrap, Font
Tidak ada gaya wajib yang digunakan
……………………………………………………………………
Faktanya, lebih dari itu, semua orang perlu menjelajahinya sendiri, ayolah!
Ini sebenarnya sangat mudah digunakan. Tuang JS dari Bootstrap Terkait CSS, JS, JQuery, dan Bootstrap-Wysiwyg, sebagai berikut:
<tautan href = "bootstrap-combined.no-icons.min.css" rel = "stylesheet"> <tautan href = "bootstrap-pesponsive.min.css" rel = "stylesheet"> <tautan href = "http://netdna.bootstrappcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel = "stylesheet"> <tautan rel = "stylesheet" href = "index.css" type = "teks/css"> </link = "JUCS1 JUPSS" TYPE = "TEXS/CSS"> </link ". type = "Text/JavaScript"> </script> <script src = "bootstrap.min.js"> </script> <skrip src = "bootstrap-wysiwyg.js" type = "text/javascript"> </script> <script src = "eksternal/JQUERY.HOTKEYS.js.js"
Tentukan Properti dan Metode Item Menu Terkait:
fungsi inittoolbarbootstrapbindings () {var fonts = ['serif', 'sans', 'Arial', 'Arial Black', 'Courier', 'Courier New', 'Comic Sans Ms', 'Helvetica', 'Impact', 'Lucida Grande', 'Lucida Sans', 'Tahanta'] = $ ('[title = font]'). saudara kandung ('. dropdown-menu'); $ .each (font, fungsi (idx, fontName) {fontTarget.append ($ ('<li> <a data-edit = "fontname' + fontname + '" style = "font-family:/' + fontName + ')););/); $ ('A [title]'). Tooltip ({container: 'body'}); $ ('. Input dropdown-menu'). Klik (function () {return false;}) .change (function () {$ (this) .parent ('. dropdown-menu'). SIBLINGS ('. DROWDOWN-toggle'). DROWDOWN ('toggle');}) .keydown ('function'). $ ('[Data-role = Magic-overlay]'). masing-masing (fungsi () {var overlay = $ (this), target = $ (overlay.data ('target')); overlay.css ('opacity', 0) .css ('posisi', 'absolute'). Offset (target.ofcacity (). }); if ("onWebKitspeechchange" di document.createElement ("input")) {var editoroffset = $ ('#editor'). Offset (); $ ('#voiceBtn'). css ('position', 'absolute'). offset ({top: editoroffset.top, kiri: editoroffset.left+$ ('#editor'). INNERWIDTH ()-35}); } else {$ ('#voiceBtn'). hide (); }}; function showerroralert (reason, detail) {var msg = ''; if (reason === 'tidak didukung-file-tipe') {msg = "format yang tidak didukung" +detail; } else {console.log ("file unggah kesalahan", alasan, detail); } $ ('<div> <tombol type = "tombol" data-dismiss = "waspada"> × </button>'+'<strong> kesalahan unggahan file </strong>'+msg+'</div>'). prependTo ('#alert'); }; inittoolbarbootstrapbindings (); $ ('#editor'). wysiwyg ({fileuploaderror: showerRoralert});Akhirnya, kode HTML:
<Div Data-Role = "Editor-ToolBar" Data-target = "#Editor"> <v> <a data-koggle = "dropdown"> <i> </i> <b> </b> </a> <ul> </ul> </Div> <Div> <a data-koggle = "dropdown"> </ul> </Ali> </a. Data-edit = "FontSize 5"> <font size = "5"> BESAR </font> </a> </li> <li> <a data-edit = "fontSize 3"> <font size = "3"> </font> </a> </li> <li> <a data-edit = "font 3" <li> <a data-edit = "fontSize 1"> <font size = "1"> Small </font> </a> </li> </ul> </div> <div> <a data-edit = "bold"> </i> </a> <a editor = "italic"> <i> </i> </a> <a> <a editor = "Italic"> <i> </i> </a> <a> data-edit="strikethrough"><i></i></a> <a data-edit="underline"><i></i></a> </div> <div> <a data-edit="insertunorderedlist"><i></i></a> <a data-edit="outdent"><i></i></a> <a Data-edit = "Outdent"> <i> </i> </a> <a data-edit = "Outdent"> <i> </i> </a> <a data-edit = "Outdent"> <i> </i> </a> <a data-div = "indent"> <i> </i> </a> </a> <a> <deD <den "> <i> </i> </a> </a> Data-edit = "JustifyLeft"> <i> </i> </a> <a data-edit = "JustifyCenter"> <i> </i> </a> <a data-edit = " Data-koggle = "dropdown"> <i> </i> </a> <div> <input placeholder = "url" type = "text" data-edit = "createLink"/> <tombol type = "tombol"> </button> </div> <a data-edit = "unrontink"> <i> </i> </a> </Div> Div = "unrlink"> <i> </i> </a> </Div> Div = "unrlink"> <i> </i> </a> </Div> id="pictureBtn"><i></i></a> <input type="file" data-role="magic-overlay" data-target="#pictureBtn" data-edit="insertImage" /> </div> <div> <a data-edit="undo"><i></i></a> <a data-edit="redo"><i></i></a> </div> <input type = "text" data-edit = "insertText" id = "voiceBtn" x-webkit-speech = ""> </div> <div id = "editor"> masukkan konten ... </div>
Jika Anda masih ingin belajar secara mendalam, Anda dapat mengklik di sini untuk mempelajari dan melampirkan topik yang luar biasa kepada Anda: Tutorial Pembelajaran Bootstrap
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.