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
同時設定utf-8編碼，確保中文不亂碼.
$.base64.utf8encode = true;
②、富文本表單投稿
var editor = " $.base64.btoa($this.html()) "">cn";
關鍵程式碼：將富文本物件的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 = ""; $form.append(editor); }); var data = $form.data('bootstrapvalidator'); if (data) { if (!data.isvalid()) { return false; } } if ($iframe.size() == 0) { $iframe = $("") .appendto("body"); } if (!form.ajax) { $form.append(''); } 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:'';") { // 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(/\n/g, "
"); 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, "\n"); return s; }
一般情況下，使用上面兩個方法對html資料進行編碼和解碼，但是對於圖片的保存卻無能為力。
以上就是本文的全部內容，希望對大家了解富文本元件wysiwyg有幫助。
