編輯器保存內容到數據庫

         最近因為項目要使用到編輯的功能，不得不去研究一下編輯器上面的一些東西。在開源社區上有挺多的編輯器，經過一翻的挑選選擇了TQEditor；這是一款相對來說體積比較小的編輯器，加上公司的網絡不好，體積小顯得比較有優勢也基本可以滿足項目的需求。

         首先引用編輯器的JS文件

<script type="text/javascript" src="./tqeditor/TQEditor.js"></script>

　　引用相應與項目顏色比較匹配的皮膚文件

<link href='./tqeditor/skin/silver/TQEditor.css' rel='stylesheet'>

　　在頁面調用編輯器，設置自定義按鈕，並設置工具欄，具體參考TQEditor官網的API。

           TQE.toolbarBottons.mybutton={ //添加自定義按鈕mybutton
                text:'上傳圖片',//鼠標經過提示
                css:'background-position:-469px -1px', //設置一個圖標
                click:function(){$('#upimagefile').click()} //點擊觸發函數
            }

            //修改默認的圖標組合,normal即為默認
            TQE.toolbarMode.normal.left.push('|','mybutton'); //添加分隔符與按鈕
            TQE.toolbarMode.full.left.push('|','mybutton'); //添加分隔符與按鈕
            window.TQ = new TQEditor('content', //初始化編輯器
            {
                width:'100%',
                resize:false,
                toolbar:['bold','italic','underline','removeformat','mybutton'] //設置編輯器工具欄
            });            

          獲取編輯器的內容

content = TQ.content();

          這里需要對內容里面的一些特殊符號進行轉碼，這里介紹兩個自定義的JS函數：

function html_decode(str) {
    var s = "";
    if (str.length == 0)
        return "";
    s = str.replace(/>|>/g, ">");
    s = s.replace(/&#60;|&lt;/g, "<");
    s = s.replace(/&#160;|&nbsp;/g, " ");
    s = s.replace(/&#39;/g, "'");
    s = s.replace(/&#34;/g, "\"");
    s = s.replace(/&#38;/g, "&");
    //s = s.replace(/<br\s*\/?>/g, "\n");
    return s;
}

function html_encode(str) {
    var s = "";
    if (str.length == 0)
        return "";
    s = str.replace(/&/g, "&#38;");
    s = s.replace(/</g, "&#60;");
    s = s.replace(/>/g, "&#62;");
    s = s.replace(/ /g, "&#160;");
    s = s.replace(/\'/g, "&#39;");
    s = s.replace(/\"/g, '&#34;');
    s = s.replace(/\n/g, "");
    //s = s.replace(/\n/g, "<br>");
    s = s.replace(/([\uE000-\uF8FF]|\uD83C[\uDF00-\uDFFF]|\uD83D[\uDC00-\uDDFF]|\ud83d[\ude00-\ude4f])/g, '');
    return s;
}

　　在將內容POST到后端的時候需要對前面獲取的內容進行一次編碼

data['content']=html_encode(content);

　      因為項目使用的是thinkphp 3.1框架，使用下面方法接收前端發送過來的數據：

$content=$this->_post('content',false);
$data['content']=htmlspecialchars_decode($content); //使用htmlspecialchars_decode處理

           最后保存到數據庫里。

　　 從數據庫讀取數據到頁面展示，由於保存數據之前使用 html_encode函數進行了編碼，讀取到頁面也需要使用html_decode進行相應的轉碼。