Bootstrap富文本组件wysiwyg数据保存到mysql的方法


Posted in Javascript onMay 09, 2016

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

一、效果展示

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

Bootstrap富文本组件wysiwyg数据保存到mysql的方法

富文本中有一张图片,还有一个数字列表
我们可以看到编辑后的数据保存成功,以及保存后对应的展示。

二、富文本

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

富文本格式(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有所帮助。

Javascript 相关文章推荐
js onkeypress与onkeydown 事件区别详细说明
Dec 13 Javascript
JS 实现点击a标签的时候让其背景更换
Oct 15 Javascript
js获得当前时区夏令时发生和终止的时间代码
Feb 23 Javascript
JS中类或对象的定义说明
Mar 10 Javascript
jQuery简单实现仿京东商城的左侧菜单效果代码
Sep 09 Javascript
jQuery插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
Mar 23 jQuery
jQuery实现checkbox即点即改批量删除及中间遇到的坑
Nov 11 jQuery
JS 实现缓存算法的示例(FIFO/LRU)
Mar 20 Javascript
vuejs 切换导航条高亮(路由菜单高亮)的方法示例
May 29 Javascript
小程序组件之仿微信通讯录的实现代码
Sep 12 Javascript
JavaScript字符和ASCII实现互相转换
Jun 03 Javascript
Vue的生命周期一起来看看
Feb 24 Vue.js
如何让一个json文件显示在表格里【实现代码】
May 09 #Javascript
JavaScript 函数的执行过程
May 09 #Javascript
jQuery绑定事件-多种实现方式总结
May 09 #Javascript
js原型链与继承解析(初体验)
May 09 #Javascript
jQuery轻松实现表格的隔行变色和点击行变色的实例代码
May 09 #Javascript
jquery实现表格中点击相应行变色功能效果【实例代码】
May 09 #Javascript
JavaScript中的prototype原型学习指南
May 09 #Javascript
You might like
PHP 5.0对象模型深度探索之属性和方法
2008/03/27 PHP
thinkphp中html:list标签传递多个参数实例
2014/10/30 PHP
PHP读取CURL模拟登录时生成Cookie文件的方法
2014/11/04 PHP
PHP Hash算法:Times33算法代码实例
2015/05/13 PHP
php实现的读取CSV文件函数示例
2017/02/07 PHP
javascript 一些用法小结
2009/09/11 Javascript
js 效率组装字符串 StringBuffer
2009/12/23 Javascript
JQuery 选择器、过滤器介绍
2011/02/14 Javascript
ff chrome和ie下全局动态定位的异同及全局高度的取法
2014/06/30 Javascript
jQuery实用函数用法总结
2014/08/29 Javascript
简单谈谈javascript中this的隐式绑定
2016/02/22 Javascript
简单掌握JavaScript中const声明常量与变量的用法
2016/05/21 Javascript
值得学习的bootstrap fileinput文件上传工具
2016/11/08 Javascript
微信小程序 toast 详解及实例代码
2016/11/09 Javascript
JavaScript交换两个变量值的七种解决方案
2016/12/01 Javascript
Easyui笔记2:实现datagrid多行删除的示例代码
2017/01/14 Javascript
静态页面实现 include 引入公用代码的示例
2017/09/25 Javascript
vue+element-ui+ajax实现一个表格的实例
2018/03/09 Javascript
学习JS中的DOM节点以及操作
2018/04/30 Javascript
微信小程序scroll-view仿拼多多横向滑动滚动条
2020/04/21 Javascript
vue获取时间戳转换为日期格式代码实例
2019/04/17 Javascript
基于Node的Axure文件在线预览的实现代码
2019/08/28 Javascript
微信小程序实现页面浮动导航
2020/01/08 Javascript
详解vue中v-bind:style效果的自定义指令
2020/01/21 Javascript
vue和H5 draggable实现拖拽并替换效果
2020/07/29 Javascript
vue-simple-uploader上传成功之后的response获取代码
2020/09/07 Javascript
python实现Flappy Bird源码
2018/12/24 Python
django 中QuerySet特性功能详解
2019/07/25 Python
python实现输入三角形边长自动作图求面积案例
2020/04/12 Python
工会换届选举方案
2014/05/21 职场文书
应届生求职自荐信
2014/07/04 职场文书
对外汉语教师推荐信
2015/03/27 职场文书
食堂管理制度范本
2015/08/04 职场文书
七年级之开学家长寄语35句
2019/09/05 职场文书
十大冰系宝可梦排名,颜值最高的阿罗拉九尾,第三使用率第一
2022/03/18 日漫
3050和2060哪个好 性能差多少 差距有多大 谁更有性价比
2022/06/17 数码科技