首頁 > web前端 > js教程 > Bootstrap富文本元件wysiwyg資料保存到mysql的方法_javascript技巧

Bootstrap富文本元件wysiwyg資料保存到mysql的方法_javascript技巧

WBOY
發布: 2016-05-16 09:00:18
原創
3281 人瀏覽過

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 = "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 = "<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有幫助。

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板