编辑器保存内容到数据库

         最近因为项目要使用到编辑的功能，不得不去研究一下编辑器上面的一些东西。在开源社区上有挺多的编辑器，经过一翻的挑选选择了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进行相应的转码。

转载于:https://www.cnblogs.com/zsdblog/p/6370483.html