標籤：
bootstrap提供了一個叫wysiwyg的富文本組件，用來顯示和編輯富文本資料，但如何將編輯後的資料儲存到mysql資料庫，卻不得而知。另外，如何將mysql資料庫中的資料顯示到wysiwyg也不得而知，對於這兩個問題，讓我來告訴你解決方案！
一、效果展示首先，我們先來看看效果如何：
度娘對於富文本的解釋如下：
富文字格式設定（Rich Text Format, 一般簡稱為RTF）是由微軟公司開發的跨平台文檔格式。大多數的文文書處理軟體都能讀取和儲存RTF文檔。RTF是Rich TextFormat的縮寫，意即多文字格式設定。這是一種類似DOC格式（Word文檔）的檔案，有很好的相容性，使用Windows“附件”中的“寫字板”就能開啟並進行編輯。RTF是一種非常流行的檔案結構，很多文字編輯器都支援它。一般的格式設定，比如字型和段落設定，版面設定等等資訊都可以存在RTF格式中，它能在一定程度上實現word與wps檔案之間的互訪。
如果說富文本不包含圖片，我們可以使用普通的html轉碼方法，見標題四；如果富文本包含圖片，普通的html轉碼已經滿足不了我們了，就需要用到jquery.base64.js，見標題三。
那麼同時，我們看一看mysql欄位的定義：
`description` longtext NOT NULL COMMENT ‘項目詳細描述‘,欄位類型為longtext（LongText 最大長度4294967295個字元 (2^32-1)，雖然我也不知道到底有多大）。
三、jquery.base64①、引入jquery.base64.js<script type="text/javascript" src="${ctx}/components/jquery/jquery.base64.js"></script>同時設定utf-8編碼，確保中文不亂碼.
$.base64.utf8encode = true;var editor = "<input type=‘hidden‘ name=‘" + $this.attr("name") + "‘ value=‘" + $.base64.btoa($this.html()) + "‘ />";關鍵代碼：將富文字物件的html值轉換為base64，然後封裝到表單form中。
詳細見如下（一整個form提交的表單封裝，參照與dwz架構）：
/** * 帶檔案上傳的ajax表單提交 * * @param {Object} * form * @param {Object} * callback */function iframeCallback(form, callback) { YUNM.debug("帶檔案上傳處理"); var $form = $(form), $iframe = $("#callbackframe"); // 富文字編輯器 $("div.editor", $form).each( function() { var $this = $(this); var editor = "<input type=‘hidden‘ name=‘" + $this.attr("name") + "‘ value=‘" + $.base64.btoa($this.html()) + "‘ />"; $form.append(editor); }); var data = $form.data(‘bootstrapValidator‘); if (data) { if (!data.isValid()) { return false; } } if ($iframe.size() == 0) { $iframe = $("<iframe id=‘callbackframe‘ name=‘callbackframe‘ src=‘about: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);}function _iframeResponse(iframe, callback) { var $iframe = $(iframe), $document = $(document); $document.trigger("ajaxStart"); $iframe.bind("load", function(event) { $iframe.unbind("load"); $document.trigger("ajaxStop"); if (iframe.src == "javascript:‘%3Chtml%3E%3C/html%3E‘;" || // For // Safari iframe.src == "javascript:‘<html></html>‘;") { // For FF, IE return; } var doc = iframe.contentDocument || iframe.document; // fixing Opera 9.26,10.00 if (doc.readyState && doc.readyState != ‘complete‘) return; // fixing Opera 9.64 if (doc.body && doc.body.innerHTML == "false") return; var response; if (doc.XMLDocument) { // response is a xml document Internet Explorer property response = doc.XMLDocument; } else if (doc.body) { try { response = $iframe.contents().find("body").text(); response = jQuery.parseJSON(response); } catch (e) { // response is html document or plain text response = doc.body.innerHTML; } } else { // response is a xml document response = doc; } callback(response); });}$(‘#editor‘).html($.base64.atob(description, true));通過base64對資料庫中儲存的html代碼進行解碼。
④、wysiwyg組件關於wysiwyg組件封裝代碼，我已上傳到CSDN的程式碼程式庫，可詳細參照。
四、普通html轉碼做法function 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(/\‘/g, "'"); s = s.replace(/\"/g, """); s = s.replace(/\n/g, "<br>"); return s;}function 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資料進行編碼和解碼，但是對於圖片的儲存卻無能為力。
笑對現實的無奈，不能後退的時候，不再傍徨的時候，永遠向前 路一直都在──陳奕迅《路一直都在》
本文出自:【沉默王二的部落格】
wysiwyg富文本資料如何儲存到mysql
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
