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 相关文章推荐
jQuery图片预加载 等比缩放实现代码
Oct 04 Javascript
javascript修改IMG标签的src问题
Mar 28 Javascript
jQuery+AJAX实现遮罩层登录验证界面(附源码)
Sep 13 Javascript
实例详解JSON数据格式及json格式数据域字符串相互转换
Jan 07 Javascript
浅析javascript异步执行函数导致的变量变化问题解决思路
May 13 Javascript
详解jQuery的Cookie插件
Nov 23 Javascript
ES2015 Symbol 一种绝不重复的值
Dec 25 Javascript
vue-quill-editor实现图片上传功能
Aug 08 Javascript
微信小程序中换行空格(多个空格)写法详解
Jul 10 Javascript
JavaScript判断浏览器版本的方法
Nov 03 Javascript
js实现日历
Nov 07 Javascript
Angular CLI发布路径的配置项浅析
Mar 29 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
使用PHP获取汉字的拼音(全部与首字母)
2013/06/27 PHP
php中final关键字用法分析
2016/12/07 PHP
Laravel5.4框架使用socialite实现github登录的方法
2019/03/20 PHP
jquery中子元素和后代元素的区别示例介绍
2014/04/02 Javascript
javascript 自定义回调函数示例代码
2014/09/26 Javascript
jQuery中clearQueue()方法用法实例
2014/12/29 Javascript
Angular用来控制元素的展示与否的原生指令介绍
2015/01/07 Javascript
js简单实现标签云效果实例
2015/08/06 Javascript
JS函数定义方式的区别介绍
2016/03/22 Javascript
第二篇Bootstrap起步
2016/06/21 Javascript
原生JS实现首页进度加载动画
2016/09/14 Javascript
微信小程序 基础组件与导航组件详细介绍
2017/02/21 Javascript
Vue2.0 实现移动端图片上传功能
2018/05/30 Javascript
原生JS实现DOM加载完成马上执行JS代码的方法
2018/09/07 Javascript
使用webpack将ES6转化ES5的实现方法
2019/10/13 Javascript
[01:19:23]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第二场
2018/04/06 DOTA
python中常用检测字符串相关函数汇总
2015/04/15 Python
python使用PyCharm进行远程开发和调试
2017/11/02 Python
python中使用正则表达式的后向搜索肯定模式(推荐)
2017/11/11 Python
Python cookbook(字符串与文本)在字符串的开头或结尾处进行文本匹配操作
2018/04/20 Python
python使用tornado实现登录和登出
2018/07/28 Python
Python中xml和json格式相互转换操作示例
2018/12/05 Python
详解Django项目中模板标签及模板的继承与引用(网站中快速布置广告)
2019/03/27 Python
Python + OpenCV 实现LBP特征提取的示例代码
2019/07/11 Python
Django框架组成结构、基本概念与文件功能分析
2019/07/30 Python
浅谈pandas.cut与pandas.qcut的使用方法及区别
2020/03/03 Python
如何使用scrapy中的ItemLoader提取数据
2020/09/30 Python
Python中用xlwt制作表格实例讲解
2020/11/05 Python
J2SDK1.5与J2SDK5.0有什么区别
2012/09/19 面试题
2014年大学生党课心得体会范文
2014/03/29 职场文书
市场营销工作计划书
2014/09/15 职场文书
2015社区六五普法工作总结
2015/04/21 职场文书
2016大学先进团支部事迹材料
2016/03/01 职场文书
2016年社区综治宣传月活动总结
2016/03/16 职场文书
golang switch语句的灵活写法介绍
2021/05/06 Golang
Java并发编程之详解CyclicBarrier线程同步
2021/06/23 Java/Android