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 相关文章推荐
设置iframe的document.designMode后仅Firefox中其body.innerHTML为br
Feb 27 Javascript
JS模板实现方法
Apr 03 Javascript
随窗体滑动的小插件sticky源码
Jun 21 Javascript
JS动态添加与删除select中的Option对象(示例代码)
Dec 20 Javascript
javascript校验价格合法性实例(必须输入2位小数)
May 05 Javascript
基于Bootstrap使用jQuery实现简单可编辑表格
May 04 Javascript
Bootstrap CSS布局之表单
Dec 17 Javascript
jQuery实现联动下拉列表查询框
Jan 04 Javascript
AngularJS获取json数据的方法详解
May 27 Javascript
Angular使用 ng-img-max 调整浏览器中的图片的示例代码
Aug 17 Javascript
layer弹出子iframe层父子页面传值的实现方法
Nov 22 Javascript
vue-cli中安装方法(图文详细步骤)
Dec 12 Javascript
如何让一个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
《Pokemon Sword·Shield》系列WEB动画《薄明之翼》第2话声优阵容公开!
2020/03/06 日漫
用PHP实现多级树型菜单
2006/10/09 PHP
FCKeditor的安装(PHP)
2007/01/13 PHP
在PHP中设置、使用、删除Cookie的解决方法
2013/05/06 PHP
关于更改Zend Studio/Eclipse代码风格主题的介绍
2013/06/23 PHP
PHP执行Curl时报错提示CURL ERROR: Recv failure: Connection reset by peer的解决方法
2014/06/26 PHP
PHP中mysql_field_type()函数用法
2014/11/24 PHP
php基于Redis消息队列实现的消息推送的方法
2018/11/28 PHP
Javascript的IE和Firefox兼容性汇编(zz)
2007/02/02 Javascript
Javascript学习笔记6 prototype的提出
2010/01/11 Javascript
js 控制页面跳转的5种方法
2013/09/09 Javascript
JavaScript File API实现文件上传预览
2016/02/02 Javascript
seajs学习之模块的依赖加载及模块API的导出
2016/10/20 Javascript
浅谈angular2路由预加载策略
2017/10/04 Javascript
electron 如何将任意资源打包的方法步骤
2020/04/16 Javascript
AJAX XMLHttpRequest对象创建使用详解
2020/08/20 Javascript
Node.js fs模块原理及常见用途
2020/10/22 Javascript
[01:16:12]完美世界DOTA2联赛PWL S2 FTD vs Inki 第一场 11.21
2020/11/23 DOTA
跟老齐学Python之不要红头文件(1)
2014/09/28 Python
Python+django实现文件上传
2016/01/17 Python
详解Python计算机视觉 图像扭曲(仿射扭曲)
2019/03/27 Python
Python检测数据类型的方法总结
2019/05/20 Python
python选取特定列 pandas iloc,loc,icol的使用详解(列切片及行切片)
2019/08/06 Python
Django在admin后台集成TinyMCE富文本编辑器的例子
2019/08/09 Python
Pytorch反向求导更新网络参数的方法
2019/08/17 Python
使用python将excel数据导入数据库过程详解
2019/08/27 Python
Python爬取破解无线网络wifi密码过程解析
2019/09/17 Python
在python中做正态性检验示例
2019/12/09 Python
Win10环境中如何实现python2和python3并存
2020/07/20 Python
从零实现一个自定义html5播放器的示例代码
2017/08/01 HTML / CSS
opencv实现图像平移效果
2021/03/24 Python
品质管理部岗位职责范文
2014/03/01 职场文书
纪念九一八事变演讲稿:牢记九一八,屈辱怎能忘
2014/09/14 职场文书
公司回复函格式
2015/07/14 职场文书
vue实现简单数据双向绑定
2021/04/28 Vue.js
Spring Data JPA使用JPQL与原生SQL进行查询的操作
2021/06/15 Java/Android