Bootstrap wysiwyg富文本數(shù)據(jù)如何保存到mysql

WindySky 2016-05-17

展開全文

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

一、效果展示

首先，我們先來看看效果如何：
這里寫圖片描述

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

二、富文本

度娘對于富文本的解釋如下：

富文本格式（Rich Text Format, 一般簡稱為RTF）是由微軟公司開發(fā)的跨平臺文檔格式。大多數(shù)的文字處理軟件都能讀取和保存RTF文檔。RTF是Rich TextFormat的縮寫，意即多文本格式。這是一種類似DOC格式（Word文檔）的文件，有很好的兼容性，使用Windows“附件”中的“寫字板”就能打開并進行編輯。RTF是一種非常流行的文件結(jié)構(gòu)，很多文字編輯器都支持它。一般的格式設(shè)置，比如字體和段落設(shè)置，頁面設(shè)置等等信息都可以存在RTF格式中，它能在一定程度上實現(xiàn)word與wps文件之間的互訪。

如果說富文本不包含圖片，我們可以使用普通的html轉(zhuǎn)碼方法，見標題四；如果富文本包含圖片，普通的html轉(zhuǎn)碼已經(jīng)滿足不了我們了，就需要用到jquery.base64.js，見標題三。

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

`description` longtext NOT NULL COMMENT '項目詳細描述',1
1

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

三、jquery.base64

①、引入jquery.base64.js

<script type="text/javascript" src="${ctx}/components/jquery/jquery.base64.js"></script>1
1

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

$.base64.utf8encode = true;1
1

②、富文本表單提交

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

關(guān)鍵代碼：將富文本對象的html值轉(zhuǎn)換為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);
    });
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84

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

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

通過base64對數(shù)據(jù)庫中保存的html代碼進行解碼。

④、wysiwyg組件

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

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

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;
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27