富文本域数据保存到数据库

前言：《富文本域数据保存到数据库》，这个标题感觉还不够清晰明了。只好再赘述一遍了，前端使用了bootstrap的wysiwyg富文本组件，然后就是不知道怎么保存图片，图片数据提交到数据库后，在前端无法显示。

今天看到jquery.base64.js，隐隐约约知道了解决方案。

经常不经意间就发现文章被扣到各式各样的网站上面，甚是可恶！
那么人生何处不爬虫，爬虫请标http://blog.csdn.net/qing_gee
见贤思齐焉，见不贤而内自省也！

普通做法

function html_encode(str) {
    var s = "";
    if (str.length == 0)
        return "";
    s = str.replace(/&/g, ">");
    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;
}

一般情况下，使用上面两个方法对html数据进行编码和解码，但是对于图片的保存却无能为力。

jquery.base64

这个插件非常好用，并且其提供了index.html例子，经过试验用起来是完全解决了图片数据保存和中文的问题。

第一步，引入jquery.base64.js。

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

第二步，编码数据提交表单

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

第三步，解码数据显示

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

1. 数据库字段为description longtext NOT NULL COMMENT ‘项目详细描述’,
2. $.base64.utf8encode = true;设置utf编码，确保中文不乱码。

展示

结语：如果你还需要更多的代码示例，请参照如何封装form表单中富文本编辑器bootstrap wysiwyg到jfinal传递参数