Bootstrap จัดเตรียมส่วนประกอบข้อความที่เรียกว่า WYSIWYG ซึ่งใช้ในการแสดงและแก้ไขข้อมูลข้อความที่สมบูรณ์ แต่ไม่ทราบวิธีบันทึกข้อมูลที่แก้ไขไปยังฐานข้อมูล MySQL นอกจากนี้ยังไม่ทราบวิธีแสดงข้อมูลในฐานข้อมูล MySQL ถึง WYSIWYG สำหรับปัญหาทั้งสองนี้ให้ฉันบอกวิธีแก้ปัญหา!
1. ผลการแสดงผล
ก่อนอื่นมาดูกันว่ามันทำงานอย่างไร:
มีรูปภาพในข้อความที่หลากหลายและรายการตัวเลข
เราจะเห็นได้ว่าข้อมูลที่แก้ไขจะถูกบันทึกเรียบร้อยแล้วและจอแสดงผลที่สอดคล้องกันหลังจากบันทึก
2. ข้อความที่อุดมไปด้วย
คำอธิบายของ Du Niang เกี่ยวกับข้อความที่หลากหลายมีดังนี้:
รูปแบบข้อความที่สมบูรณ์ (โดยทั่วไปเรียกว่า RTF) เป็นรูปแบบเอกสารข้ามแพลตฟอร์มที่พัฒนาโดย Microsoft ซอฟต์แวร์การประมวลผลคำส่วนใหญ่สามารถอ่านและบันทึกเอกสาร RTF ได้ RTF เป็นตัวย่อของรูปแบบ textFormat ที่สมบูรณ์ซึ่งหมายถึงรูปแบบหลายข้อความ นี่คือไฟล์ที่คล้ายกับรูปแบบ DOC (เอกสาร Word) ที่มีความเข้ากันได้ดี คุณสามารถเปิดและแก้ไขได้โดยใช้ "แผ่นคำ" ใน "อุปกรณ์เสริม" RTF เป็นโครงสร้างไฟล์ที่ได้รับความนิยมมากและตัวแก้ไขข้อความจำนวนมากรองรับ การตั้งค่ารูปแบบทั่วไปเช่นการตั้งค่าตัวอักษรและย่อหน้าการตั้งค่าหน้าเว็บ ฯลฯ สามารถมีอยู่ในรูปแบบ RTF ซึ่งสามารถตระหนักถึงการเข้าถึงร่วมกันระหว่างไฟล์ Word และ WPS ในระดับหนึ่ง
หากข้อความที่หลากหลายไม่มีรูปภาพเราสามารถใช้วิธีการแปลงรหัส HTML ธรรมดาดูชื่อ 4; หากข้อความที่หลากหลายมีรูปภาพการแปลงรหัส HTML สามัญไม่สามารถทำให้เราพึงพอใจได้อีกต่อไปดังนั้นเราจึงต้องใช้ jQuery.base64.js ดูชื่อ 3
จากนั้นในเวลาเดียวกันลองมาดูคำจำกัดความของฟิลด์ MySQL:
`คำอธิบาย 'longtex
ประเภทของฟิลด์คือ longtext (longtext มีความยาวสูงสุด 4294967295 อักขระ (2^32-1) แม้ว่าฉันจะไม่รู้ว่ามันใหญ่แค่ไหน)
3. jQuery.Base64
①. แนะนำ jQuery.base64.js
<script type = "text/javascript" src = "$ {ctx}/Components/jquery/jquery.base64.js"> </script>
ในเวลาเดียวกันตั้งค่าการเข้ารหัส UTF-8 เพื่อให้แน่ใจว่าจีนไม่ได้อ่านออกมา
$ .BASE64.UTF8ENCODE = TRUE;
②ส่งแบบฟอร์มข้อความที่หลากหลาย
var editor = "<อินพุต type = 'hidden' name = '" + $ this.attr ("ชื่อ") + "' value = '
+ $ .base64.btoa ($ this.html ()) + "' />";
รหัสคีย์: แปลงค่า HTML ของวัตถุข้อความ Rich เป็น base64 จากนั้นห่อหุ้มเป็นแบบฟอร์ม
ดูรายละเอียดต่อไปนี้ (แบบฟอร์มทั้งหมดส่งแบบฟอร์มการห่อหุ้มแบบฟอร์มอ้างถึงกรอบ DWZ):
/** * ฟอร์ม AJAX ที่อัปโหลดด้วยไฟล์ * * @param {Object} * Form * @param {Object} * การเรียกกลับ */ฟังก์ชั่น iframeCallback (แบบฟอร์มการโทรกลับ) {yunm.debug ("อัปโหลดการประมวลผลด้วยไฟล์"); var $ form = $ (แบบฟอร์ม), $ iframe = $ ("#callbackframe"); // Rich Text Editor $ ("div.editor", $ form) .each (ฟังก์ชั่น () {var $ this = $ (this); var editor = "<อินพุตประเภท = 'hidden' name = '" + $ this.attr ("name") + "' value = '" $ .base64.btoa var data = $ form.data ('bootstrapvalidator'); if (data) {ถ้า (! data.isvalid ()) {return false; }} if ($ iframe.size () == 0) {$ iframe = $ ("<iframe id = 'callbackframe' name = 'callbackframe' src = 'เกี่ยวกับ: blank' style = 'แสดง: ไม่มี'> </iframe>") } if (! form.ajax) {$ form.append ('<อินพุต type = "hidden" name = "ajax" value = "1" />'); } form.target = "callbackframe"; _iframeresponse ($ iframe [0], การโทรกลับ || yunm.ajaxdone);} ฟังก์ชั่น _iframeresponse (iframe, callback) {var $ iframe = $ (iframe), $ document = $ (เอกสาร); $ document.trigger ("ajaxstart"); $ iframe.bind ("โหลด" ฟังก์ชั่น (เหตุการณ์) {$ iframe.unbind ("โหลด"); $ document.trigger ("ajaxstop"); ถ้า (iframe.src == "javascript: '%3chtml%3e%3c/html%3e' "JavaScript: '<html> </html>';") {// สำหรับ ff, เช่นการส่งคืน; doc.body.innerhtml == "false") การตอบสนอง; // การตอบสนองคือเอกสาร HTML หรือการตอบสนองข้อความธรรมดา = doc.body.innerhtml;③แสดงข้อมูลข้อความที่สมบูรณ์
$ ('#editor'). html ($. base64.atob (คำอธิบาย, จริง));
ถอดรหัสรหัส HTML ที่บันทึกไว้ในฐานข้อมูลผ่าน BASE64
④, wysiwyg ส่วนประกอบ
เกี่ยวกับรหัสการห่อหุ้มส่วนประกอบ WYSIWYG ฉันได้อัปโหลดไปยังฐานรหัส CSDN ซึ่งสามารถอ้างอิงได้ในรายละเอียด
4. วิธีการแปลงรหัส HTML สามัญ
ฟังก์ชั่น 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;} ฟังก์ชั่น 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;}โดยทั่วไปแล้วสองวิธีข้างต้นใช้เพื่อเข้ารหัสและถอดรหัสข้อมูล HTML แต่ไม่มีอะไรจะทำเกี่ยวกับการบันทึกภาพ
หากคุณยังต้องการศึกษาในเชิงลึกคุณสามารถคลิกที่นี่เพื่อศึกษาและแนบ 3 หัวข้อที่น่าตื่นเต้นให้คุณ:
การสอนการเรียนรู้ bootstrap
การสอนการใช้งาน Bootstrap
การสอนการใช้งานปลั๊กอิน bootstrap
ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์สำหรับทุกคนที่จะเข้าใจองค์ประกอบข้อความที่หลากหลาย wysiwyg