快捷導(dǎo)航

Bootstrap富文本組件wysiwyg數(shù)據(jù)保存到mysql的方法

更新時(shí)間：2016年05月09日 17:06:47 作者：沉默王二

這篇文章主要為大家詳細(xì)介紹了Bootstrap富文本組件wysiwyg數(shù)據(jù)保存到mysql的方法，感興趣的小伙伴們可以參考一下

Bootstrap提供了一個(gè)叫wysiwyg的富文本組件，用來(lái)顯示和編輯富文本數(shù)據(jù)，但如何將編輯后的數(shù)據(jù)保存到MySQL數(shù)據(jù)庫(kù)，卻不得而知。另外，如何將mysql數(shù)據(jù)庫(kù)中的數(shù)據(jù)顯示到wysiwyg也不得而知，對(duì)于這兩個(gè)問(wèn)題，讓我來(lái)告訴你解決方案！

一、效果展示

首先，我們先來(lái)看看效果如何：

富文本中有一張圖片，還有一個(gè)數(shù)字列表
我們可以看到編輯后的數(shù)據(jù)保存成功，以及保存后對(duì)應(yīng)的展示。

二、富文本

度娘對(duì)于富文本的解釋如下：

富文本格式（Rich Text Format, 一般簡(jiǎn)稱(chēng)為RTF）是由微軟公司開(kāi)發(fā)的跨平臺(tái)文檔格式。大多數(shù)的文字處理軟件都能讀取和保存RTF文檔。RTF是Rich TextFormat的縮寫(xiě)，意即多文本格式。這是一種類(lèi)似DOC格式（Word文檔）的文件，有很好的兼容性，使用Windows“附件”中的“寫(xiě)字板”就能打開(kāi)并進(jìn)行編輯。RTF是一種非常流行的文件結(jié)構(gòu)，很多文字編輯器都支持它。一般的格式設(shè)置，比如字體和段落設(shè)置，頁(yè)面設(shè)置等等信息都可以存在RTF格式中，它能在一定程度上實(shí)現(xiàn)word與wps文件之間的互訪(fǎng)。
如果說(shuō)富文本不包含圖片，我們可以使用普通的html轉(zhuǎn)碼方法，見(jiàn)標(biāo)題四；如果富文本包含圖片，普通的html轉(zhuǎn)碼已經(jīng)滿(mǎn)足不了我們了，就需要用到j(luò)query.base64.js，見(jiàn)標(biāo)題三。

那么同時(shí)，我們看一看mysql字段的定義：

`description` longtext NOT NULL COMMENT '項(xiàng)目詳細(xì)描述',

字段類(lèi)型為longtext（LongText 最大長(zhǎng)度4294967295個(gè)字元 (2^32-1)，雖然我也不知道到底有多大）。

三、jquery.base64

①、引入jquery.base64.js

同時(shí)設(shè)置utf-8編碼，確保中文不亂碼.

$.base64.utf8encode = true;

②、富文本表單提交

var editor = "<input type='hidden' name='" + $this.attr("name") + "' value='"
+ $.base64.btoa($this.html()) + "' />";

關(guān)鍵代碼：將富文本對(duì)象的html值轉(zhuǎn)換為base64，然后封裝到表單form中。
詳細(xì)見(jiàn)如下（一整個(gè)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);
 });
}

③、富文本數(shù)據(jù)展示

$('#editor').html($.base64.atob(description, true));

通過(guò)base64對(duì)數(shù)據(jù)庫(kù)中保存的html代碼進(jìn)行解碼。

④、wysiwyg組件

關(guān)于wysiwyg組件封裝代碼，我已上傳到CSDN的代碼庫(kù)，可詳細(xì)參照。

四、普通html轉(zhuǎn)碼做法

function html_encode(str) {
 var s = "";
 if (str.length == 0)
  return "";
 s = str.replace(/&/g, "&gt;");
 s = s.replace(/</g, "&lt;");
 s = s.replace(/>/g, "&gt;");
 s = s.replace(/ /g, "&nbsp;");
 s = s.replace(/\'/g, "&#39;");
 s = s.replace(/\"/g, "&quot;");
 s = s.replace(/\n/g, "<br>");
 return s;
}

function html_decode(str) {
 var s = "";
 if (str.length == 0)
  return "";
 s = str.replace(/&gt;/g, "&");
 s = s.replace(/&lt;/g, "<");
 s = s.replace(/&gt;/g, ">");
 s = s.replace(/&nbsp;/g, " ");
 s = s.replace(/&#39;/g, "\'");
 s = s.replace(/&quot;/g, "\"");
 s = s.replace(/<br>/g, "\n");
 return s;
}

一般情況下，使用上面兩個(gè)方法對(duì)html數(shù)據(jù)進(jìn)行編碼和解碼，但是對(duì)于圖片的保存卻無(wú)能為力。

如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊這里進(jìn)行學(xué)習(xí)，再為大家附3個(gè)精彩的專(zhuān)題：

Bootstrap學(xué)習(xí)教程

Bootstrap實(shí)戰(zhàn)教程

Bootstrap插件使用教程

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家了解富文本組件wysiwyg有所幫助。

您可能感興趣的文章: