Bootstrap menyediakan komponen teks yang kaya yang disebut wysiwyg, yang digunakan untuk menampilkan dan mengedit data teks yang kaya, tetapi tidak diketahui cara menyimpan data yang diedit ke database MySQL. Selain itu, tidak diketahui cara menampilkan data dalam database MySQL ke wysiwyg. Untuk dua masalah ini, izinkan saya memberi tahu Anda solusinya!
1. Tampilan Efek
Pertama, mari kita lihat cara kerjanya:
Ada gambar dalam teks kaya dan daftar angka
Kita dapat melihat bahwa data yang diedit disimpan dengan sukses dan tampilan yang sesuai setelah disimpan.
2. Teks Kaya
Penjelasan Du Niang tentang Teks Kaya adalah sebagai berikut:
Format teks yang kaya (umumnya disebut sebagai RTF) adalah format dokumen lintas platform yang dikembangkan oleh Microsoft. Sebagian besar perangkat lunak pengolah kata dapat membaca dan menyimpan dokumen RTF. RTF adalah singkatan dari Rich TextFormat, yang berarti format multi-teks. Ini adalah file yang mirip dengan format DOC (dokumen Word) dengan kompatibilitas yang baik. Anda dapat membuka dan mengeditnya menggunakan "Word Pad" di Windows "Accessories". RTF adalah struktur file yang sangat populer, dan banyak editor teks mendukungnya. Pengaturan format umum, seperti pengaturan font dan paragraf, pengaturan halaman, dll., Semua dapat ada dalam format RTF, yang dapat mewujudkan akses timbal balik antara file Word dan WPS sampai batas tertentu.
Jika teks kaya tidak berisi gambar, kita dapat menggunakan metode transcoding HTML biasa, lihat judul 4; Jika teks yang kaya berisi gambar, transcoding HTML biasa tidak lagi dapat memuaskan kita, jadi kita perlu menggunakan jQuery.base64.js, lihat judul 3.
Kemudian pada saat yang sama, mari kita lihat definisi bidang MySQL:
`deskripsi` longtext not null comment 'Project Detail Deskripsi',
Jenis bidangnya adalah LongText (LongText memiliki panjang maksimum 4294967295 karakter (2^32-1), meskipun saya tidak tahu seberapa besar itu).
3. jQuery.base64
①. Memperkenalkan jQuery.base64.js
<type script = "text/javascript" src = "$ {ctx} /components/jquery/jquery.base64.js"> </script>
Pada saat yang sama, atur pengkodean UTF-8 untuk memastikan bahwa orang Cina tidak kacau.
$ .base64.utf8encode = true;
②, kirimkan formulir teks yang kaya
editor var = "<input type = 'hidden' name = '" + $ this.attr ("name") + "' value = '"
+ $ .base64.btoa ($ this.html ()) + "' />";
Kode Kunci: Konversi nilai HTML dari objek Teks Kaya ke Base64 dan kemudian merangkumnya ke dalam bentuk formulir.
Lihat yang berikut untuk detailnya (seluruh bentuk enkapsulasi formulir yang dikirimkan, lihat kerangka kerja DWZ):
/** * Formulir AJAX diunggah dengan file * * @param {objek} * form * @param {objek} * callback */function iframecallback (form, callback) {yunm.debug ("Upload pemrosesan dengan file"); var $ form = $ (form), $ iframe = $ ("#callbackframe"); // editor teks kaya $ ("div.editor", $ form) .each (function () {var $ this = $ (this); var editor = "<input type = 'hidden' name = '" + $ this.attr ("name") + "value ='" + $ .base64.btOa ($ this.html () (); var data = $ form.data ('bootstrapvalidator'); if (data) {if (! data.isValid ()) {return false; }} if ($ iframe.size () == 0) {$ iframe = $ ("<iframe id = 'callbackframe' name = 'callbackframe' src = 'tentang: blank' style = 'display: none'> </iframe>") .AppendTo ("body"); } if (! Form.AJAX) {$ form.append ('<input type = "hidden" name = "Ajax" value = "1" />'); } form.target = "callbackframe"; _iframeresponse ($ iframe [0], callback || yunm.ajaxdone);} fungsi _iframeresponse (iframe, callback) {var $ iframe = $ (iframe), $ document = $ (document); $ document.trigger ("AjaxStart"); $ iframe.bind ("Load", function (event) {$ iframe.unbind ("muat"); $ document.trigger ("ajaxstop"); if (iframe.src == "javascript: '%3chtml%3e%3c/html%3e';" || " doc.body.innerhtml == "false") VAR Response; // Respons adalah HTML Document atau Plain Text Response = doc.body.innerHTML;③, tampilan data teks yang kaya
$ ('#editor'). html ($. base64.atob (deskripsi, true));
Dekode kode HTML yang disimpan dalam database melalui base64.
④, komponen wysiwyg
Mengenai kode enkapsulasi komponen WYSIWYG, saya telah mengunggahnya ke basis kode CSDN, yang dapat direferensikan secara rinci.
4. Metode transkode HTML biasa
fungsi html_encode (str) {var s = ""; if (str.length == 0) return ""; s = str.replace (/&/g, ">"); s = s.replace (/</g, "<"); s = s.replace (// g, ">"); s = s.replace (// g, ""); s = s.replace (// n/g, "<br>"); return s;} fungsi html_decode (str) {var s = ""; if (str.length == 0) return ""; s = str.replace (// g, "&"); s = s.replace (/</g, "<"); s = s.replace (// g, ">"); s = s.replace (// g, ""); s = s.replace (/'/g, "/'"); s = s.replace (// g, "/" "); s = s.replace (/<br>/g,"/n "); return s;}Secara umum, dua metode di atas digunakan untuk mengkode dan memecahkan kode data HTML, tetapi tidak ada yang bisa dilakukan tentang penghematan gambar.
Jika Anda masih ingin belajar secara mendalam, Anda dapat mengklik di sini untuk mempelajari dan melampirkan 3 topik menarik kepada Anda:
Tutorial Pembelajaran Bootstrap
Tutorial Praktis Bootstrap
Tutorial Penggunaan Plug-In Bootstrap
Di atas adalah semua tentang artikel ini. Saya harap akan sangat membantu bagi semua orang untuk memahami komponen teks yang kaya wysiwyg.