Bootstrap富文本组件wysiwyg数据保存到mysql的方法
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, ">");
s = s.replace(/</g, "<");
s = s.replace(/>/g, ">");
s = s.replace(/ /g, " ");
s = s.replace(/\'/g, "'");
s = s.replace(/\"/g, """);
s = s.replace(/\n/g, "<br>");
return s;
}
function html_decode(str) {
var s = "";
if (str.length == 0)
return "";
s = str.replace(/>/g, "&");
s = s.replace(/</g, "<");
s = s.replace(/>/g, ">");
s = s.replace(/ /g, " ");
s = s.replace(/'/g, "\'");
s = s.replace(/"/g, "\"");
s = s.replace(/<br>/g, "\n");
return s;
}
一般情况下，使用上面两个方法对html数据进行编码和解码，但是对于图片的保存却无能为力。
如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：
以上就是本文的全部内容，希望对大家了解富文本组件wysiwyg有所帮助。
相关文章
Cookie就是这样的一种机制。它可以弥补HTTP协议无状态的不足。在Session出现之前，基本上所有的网站都采用Cookie来跟踪会话。下面通过本文给大家介绍JS中cookie的使用及缺点，需要的朋友参考下吧2017-05-05
JavaScript本地数据存储sessionStorage与localStorage使用详解
这篇文章主要介绍了JavaScript本地数据存储sessionStorage与localStorage使用，localStorage：永久存储在本地，适合保存在本地的数据。sessionStorage：会话级的存储，敏感帐号一次登陆2022-10-10
这篇文章主要介绍了JS实现线性表的链式表示方法,简单讲解了线性表链式表示的原理并结合实例形式分析了js针对线性表链式表示的创建、插入、删除等节点操作技巧,需要的朋友可以参考下2017-04-04
这几天不是很忙，就找了些拖动布局方面的资料看看，也学着写了个拖动布局的效果，没想到花了好多时间，七拼八凑，总算是把这个效果写出来了。2010-10-10
这篇文章主要介绍了微信小程序后端开发流程的详细步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
这篇文章主要介绍了Bootstrap -- 按钮样式与使用，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2018-12-12
这篇文章主要为大家详细介绍了微信小程序实现下拉刷新和轮播图效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
这篇文章主要为大家介绍了如何利用JavaScript实现四个常用的排序：插入排序、交换排序、选择排序和归并排序，文中利用动图详细介绍了实现过程，需要的可以参考一下2022-02-02
JavaScript中一些浮点数相加减会计算错误，本文将为大家具体介绍一下JavaScript中解决任意两数加减会出现错误的方案，需要的可以参考一下2022-02-02
浏览地图时，使用鼠标滚轮来放大和缩小。即用到了滚轮事件。2009-04-04
最新评论