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

开发者社区> 沉默王二> 正文

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

简介: Bootstrap wysiwyg,将富文本数据保存到mysql
+关注继续查看

Bootstrap提供了一个叫wysiwyg的富文本组件,用来显示和编辑富文本数据,但如何将编辑后的数据保存到mysql数据库,却不得而知。另外,如何将mysql数据库中的数据显示到wysiwyg也不得而知,对于这两个问题,让我来告诉你解决方案!


###一、效果展示

首先,我们先来看看效果如何:

https://img-blog.csdn.net/20151022114417974


富文本中有一张图片,还有一个数字列表

我们可以看到编辑后的数据保存成功,以及保存后对应的展示。

###二、富文本

度娘对于富文本的解释如下:


富文本格式(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 '项目详细描述',

1

字段类型为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));

1

通过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数据进行编码和解码,但是对于图片的保存却无能为力。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
保存数据返回后可以继续编辑
一般来说, 调用onPause()和onStop()方法后的activity实例仍然存在于内存中, activity的所有信息和状态数据不会消失, 当activity重新回到前台之后, 所有的改变都会得到保留.  但是当系统内存不足时, 调用onPause()和onStop()方法后的activity可能会被系统摧毁, 此时内存中就不会存有该activity的实例对象了. 如果之后这个a
1092 0
【黑马Android】(02)短信发送器/布局演示/android下单位/android下Junit/保存数据/android下权限/xml解析和序列化
<p></p> <p></p> <h2> <span style="font-family:黑体; font-size:16pt">短信发送器</span><span style="font-family:黑体; font-size:16pt"></span> </h2> <pre code_snippet_id="1605445" snippet_file_name="blog_2
1506 0
mysql 保存 blob 类型数据 乱码 解决
    本人问题:mysql 保存 blob 类型数据 乱码 解决 未解决,???   之前 private string  archiveValue;    导致 写入的进去之后的中文 都是乱码   改正后 ,即可 private byte[] archiveValue;  // blob    其他解决方法 http://knight-black-bob.
2105 0
Bootstrap wysiwyg,将富文本数据保存到mysql
版权声明:欢迎转载,请注明沉默王二原创。 https://blog.csdn.net/qing_gee/article/details/49331543 Bootstrap提供了一个叫wysiwyg的富文本组件,用来显示和编辑富文本数据,但如何将编辑后的数据保存到mysql数据库,却不得而知。
2196 0
《Android应用开发攻略》——2.4 在用户旋转设备时保存数据
本节书摘来自华章计算机《Android应用开发攻略》一书中的第2章,第2.4节,作者:(美)达尔文(Darwin, I. F.)著, 更多章节内容可以访问云栖社区“华章计算机”公众号查看。
921 0
+关注
沉默王二
微信搜索「沉默王二」,回复关键字「00」获取硬核计算机基础资料。
1084
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载