Mari kita lihat deskripsi resmi fungsi yang relevan dari editor ini.
1. Ini dapat secara otomatis mengikat hotkeys standar untuk operasi umum pada platform Mac dan Wndows.
2. Anda dapat memasukkan gambar dengan menyeret dan menjatuhkan; Dukungan Image Unggah (Anda juga bisa mendapatkan foto di perangkat seluler Anda)
3. Input Pengenalan Suara (hanya browser Chrome)
4. Izinkan toolbar khusus; Tidak ada tag tambahan yang dihasilkan; Dukung situs web untuk memanfaatkan fitur -fitur yang sangat baik dari pustaka alat seperti bootstrap, font mengagumkan, dll.
5. Semuanya terserah Anda jika tidak ada gaya wajib
6. Mengandalkan fitur standar browser, tidak ada kode non-standar; Fungsi toolbar dan keyboard dapat disesuaikan, dan dapat menjalankan perintah apa pun yang didukung oleh browser.
7. Editor ini tidak akan membuat bingkai terpisah, area teks cadangan, dll., Cobalah untuk membuatnya sesederhana mungkin dan menjalankannya dalam div.
8. (Opsional) Bersihkan ruang ekor; Bersihkan Div dan Span kosong
9. Harus dijalankan di browser modern (diuji pada Chrome 26, Firefox 19, Safari 6, dan pengguna melaporkan bahwa mereka dapat bekerja pada IE10)
10. Dukungan Browser Seluler (diuji pada iOS 6 iPad/iPhone dan Android 4.1.1 Chrome)
Catatan: Wysiwyg dan wysihtml5 adalah dua editor yang berbeda. WYSIWYG adalah versi yang disempurnakan dari WYSIHTML5, yang relatif sama. Jadi Anda dapat menggunakannya sesuai dengan kebutuhan Anda.
Situs web resmi WYSIWYG: http://mindmup.github.io/bootstrap-wysiwyg/
Situs Wysiwyg China: http://www.bootcss.com/p/bootstrap-wysiwyg//
WYSIHTML5 Situs web resmi: http://jhollingworth.github.io/bootstrap-wysihtml5/
Karena Wysiwyg adalah versi yang disempurnakan dari wysihtml5, izinkan saya berbicara tentang penggunaan wysiwyg, wysihtml5 serupa.
Langkah untuk digunakan
1. Perkenalkan file JS dan CSS berikut. Di sini saya ingin menyatakan bahwa situs web resmi hanyalah penggunaan umum, dan dokumen -dokumen berikut harus diperkenalkan sebelum dapat berlaku, sehingga situs web ini berfokus pada aplikasi yang sebenarnya, dan detail ini tidak dapat diabaikan.
<tautan href = "http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.no-icons.min.css" rel = "stylesheet"> <link href = "http://netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel = "stylesheet"> <skrip src = "http://ajax.googleapis.com/ajax/libs/jQuery/1.9.0/jquery.min.js"> </skrip> <script src = "https://mindmup.s3.amazonaws.com/lib/jQuery.hotkeys.hotkeys.s3.amazonaws.com src = "http://netdna.bootstrappcdn.com/twitter-bootstrap/2.3.1/js/boottrap.min.js"> </script> <script src = "http:/twitter.github.com/boottrap/assets/jsets/script href = "index.css" rel = "stylesheet"> <script src = "bootstrap-wysiwyg.js"> </script>
2. Tambahkan sepotong kode JS. Karena terlalu banyak kode, itu tidak akan terdaftar di sini. Situs web ini telah memilah kode sumber. Silakan merujuk ke kode sumber demo.html
.........
3. Tambahkan kode HTML format berikut ke tag tubuh. Perlu dicatat di sini bahwa editor tidak dienkapsulasi, tetapi secara langsung menulis kode ke halaman HTML. Seluruh editor dapat dibagi menjadi dua bagian, bilah alat atas dan kotak pengeditan teks.
1) Toolbar Top: adalah div.btn-toolbar yang berisi beberapa kelompok div.btn. Setiap tombol alat adalah kelompok div.btn. Di setiap kelompok div.btn, kita dapat mengonfigurasi teks cepat untuk menampilkan bahasa Mandarin.
<Div Data-Role = "Editor-ToolBar" Data-target = "#Editor"> <ver> </div> .......... <v div> </div> </div>
Ada juga alat input suara HTML5 di sini. Kodenya adalah sebagai berikut:
<input type = "text" data-edit = "insertText" id = "voiceBtn" x-webkit-speech = "">
2) Kotak Teks Konten: Div#Editor
<Div ID = "Editor"> Konten </Div>
Di atas adalah pengantar singkat untuk bootstrap-wysiwyg, mari kita lihat efeknya
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.
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
Faktanya, WYSIWG hanya perlu mendefinisikan beberapa div untuk membangun editor visual, sementara bagian pengeditan hanya membutuhkan DIV dengan editor ID untuk menyelesaikannya. Saya harap pengantar singkat ini untuk editor visual Bootstrap-Wysiwyg akan sangat membantu semua orang.