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 相关文章推荐
extjs grid设置某列背景颜色和字体颜色的方法
Sep 03 Javascript
javascript中字符串的定义示例代码
Dec 19 Javascript
浅谈JQ中mouseover和mouseenter的区别
Sep 13 Javascript
bootstrap中使用google prettify让代码高亮的方法
Oct 21 Javascript
js addDqmForPP给标签内属性值加上双引号的函数
Dec 24 Javascript
Jquery实现跨域异步上传文件总结
Feb 03 Javascript
JS实现多级菜单中当前菜单不随页面跳转样式而发生变化
May 30 Javascript
微信小程序 配置顶部导航条标题颜色的实现方法
Sep 20 Javascript
详解Vue CLI3 多页应用实践和源码设计
Aug 30 Javascript
如何优雅地在vue中添加权限控制示例详解
Mar 07 Javascript
解决Vue @submit 提交后不刷新页面问题
Jul 18 Javascript
js实现炫酷光感效果
Sep 05 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语法(2)
2006/10/09 PHP
PHP 可阅读随机字符串代码
2010/05/26 PHP
ThinkPHP3.0略缩图不能保存到子目录的解决方法
2012/09/30 PHP
php实现登录tplink WR882N获取IP和重启的方法
2016/07/20 PHP
javascript+css 网页每次加载不同样式的实现方法
2009/12/27 Javascript
JS隐藏参数post传值实例
2013/04/18 Javascript
Jquery getJSON方法详细分析
2013/12/26 Javascript
Jquery 实现grid绑定模板
2015/01/28 Javascript
JavaScript实现添加及删除事件的方法小结
2015/08/04 Javascript
jQuery时间插件jquery.clock.js用法实例(5个示例)
2016/01/14 Javascript
基于Jquery插件实现跨域异步上传文件功能
2016/04/26 Javascript
Javascript使用function创建类的两种方法(推荐)
2016/11/19 Javascript
使用DeviceOne实现微信小程序功能
2016/12/29 Javascript
form表单序列化详解(推荐)
2017/08/15 Javascript
node 使用 async 控制并发的方法
2018/05/07 Javascript
JS面向对象的程序设计相关知识小结
2018/05/26 Javascript
vue-列表下详情的展开与折叠案例
2020/07/28 Javascript
[01:46]2018完美盛典章节片——坚守
2018/12/17 DOTA
[57:31]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第一场 2月1日
2021/03/11 DOTA
Python判断列表是否已排序的各种方法及其性能分析
2016/06/20 Python
python 创建弹出式菜单的实现代码
2017/07/11 Python
深入浅析Python中的yield关键字
2018/01/24 Python
Python使用sort和class实现的多级排序功能示例
2018/08/15 Python
python将音频进行变速的操作方法
2020/04/08 Python
python多进程下的生产者和消费者模型
2020/05/07 Python
python实现图片,视频人脸识别(dlib版)
2020/11/18 Python
HTML5 Canvas 起步(1) - 基本概念
2009/05/12 HTML / CSS
浅谈Html5多线程开发之WebWorkers
2018/05/02 HTML / CSS
美国皮靴公司自1863年:The Frye Company
2016/11/30 全球购物
路易威登和香奈儿手袋:LuxeDH
2017/01/12 全球购物
大学毕业感言100字
2014/02/03 职场文书
小学感恩教育活动总结
2014/07/07 职场文书
创先争优演讲稿
2014/09/15 职场文书
教师求职自荐信范文
2015/03/04 职场文书
工作会议通知
2015/04/15 职场文书
python数据分析之单因素分析线性拟合及地理编码
2022/06/25 Python