Bootstrap wysiwyg，将富文本数据保存到mysql-阿里云开发者社区

Bootstrap wysiwyg，将富文本数据保存到mysql

2015-12-24 2206

+关注继续查看

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

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

同时设置utf-8编码，确保中文不乱码.

$.base64.utf8encode = true;

②、富文本表单提交

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

关键代码：将富文本对象的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, "&gt;");
    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数据进行编码和解码，但是对于图片的保存却无能为力。

笑对现实的无奈，不能后退的时候，不再傍徨的时候，永远向前　路一直都在──陈奕迅《路一直都在》
本文出自:【沉默王二的博客】

Web App开发 JavaScript 前端开发关系型数据库数据库 MySQL 编解码数据格式 XML iOS开发

bootstrap模态框滚动条 bootstrap模态框modal mysql oracle函数 mysql查看函数 javascript前端开发css

开发者社区 > 开发与运维 > 文章

作者高分内容

“备孕期”的Java程序员一定要学会抽象 1112 程序不过是几行代码的集合 986 DataTables能实现移动端的下拉加载吗？可以，需要借助一下Scroller插件 1569 Ajax传递复杂参数到服务器端的方法 865 DataTables的服务器端（SpringMVC）分页模式 1471

华章计算机

《深入理解Hadoop（原书第2版）》——1.5我们能处理多大的数据量

1283 0

codyl

ITOO---MVC3.0动态添加表格的行数并Controller中获取添加数据

2795 0

优惠码优惠

【Spring Boot】使用JDBC 获取相关的数据

【Spring Boot】使用JDBC 获取相关的数据使用JDBC 获取相关的数据什么是JDBC Java Database Connectivity 是一种用于执行SQL语句的Java API，与数据库建立连接、发送操作数据库的语句并处理结果。

4755 0

一个处女座的程序猿

ML之FE：基于load_mock_customer数据集(模拟客户,单个DataFrame)利用featuretools工具实现自动特征生成/特征衍生

20 0

zting科技

水晶报表填充.Net Objects数据源

938 0

冷冷zz

谈谈Spring Boot 数据源加载及其多数据源简单实现

业务需求提供所有微服务数据源的图形化维护功能代码生成可以根据选择的数据源加载表等源信息数据源管理要支持动态配置，实时生效附录效果图实现思路本文提供方法仅供类似简单业务场景，在生产环境和复杂的业务场景请使用分库分表的中间件（例如mycat）或者框架 sharding-sphere （一直在用）等先来看Spring 默认的数据源注入策略，如下代码默认的事务管理器在初始化时回去加载数据源实现。

1096 0

anank

【曹操】 angular js双向绑定数据通过bootstrap请求获取不到表单数据

在做项目的时候，在VidyoCallFlowEntry页面中，通过name字段双击跳转弹出VidyoCallFlow页面，同时传入name的值作为参数进行查询，并展示查询结果。但在路由中获取到name的值，通过angular js双向绑定的方式赋值给VidyoCallFlow页面的vidyoname的值，发现并没有查询到结果，但是根据该name的值在数据库中查询，是有结果的。

1258 0