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 同时设置utf-8编码,确保中文不乱码. $.base64.utf8encode = true; ②、富文本表单提交 var editor = ""; 关键代码:将富文本对象的html值转换为base64,然后封装到表单form中。 详细见如下(一整个form提交的表单封装,参照与dwz框架): <div class="jb51code">
var $form = $(form),$iframe = $("#callbackframe"); // 富文本编辑器
var data = $form.data('bootstrapValidator'); if ($iframe.size() == 0) { _iframeResponse($iframe[0],callback || YUNM.ajaxDone); $document.trigger("ajaxStart"); $iframe.bind("load",function(event) { if (iframe.src == "javascript:'%3Chtml%3E%3C/html%3E';" || // For var doc = iframe.contentDocument || iframe.document; // fixing Opera 9.26,10.00 var response; if (doc.XMLDocument) { callback(response); ③、富文本数据展示 $('#editor').html($.base64.atob(description,true)); 通过base64对数据库中保存的html代码进行解码。 ④、wysiwyg组件 关于wysiwyg组件封装代码,我已上传到CSDN的代码库,可详细参照。 四、普通html转码做法<div class="jb51code"> function html_decode(str) { 一般情况下,使用上面两个方法对html数据进行编码和解码,但是对于图片的保存却无能为力。 如果大家还想深入学习,可以点击进行学习,再为大家附3个精彩的专题: 以上就是本文的全部内容,希望对大家了解富文本组件wysiwyg有所帮助。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |