当前位置：首页 > 资讯 > 技术文档

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

时间：2021-08-08 12:00 编辑：来源：阅读：
扫一扫，手机访问

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

Bootstrap提供了一个叫wysiwyg的富文本组件，用来显示和编辑富文本数据，但如何将编辑后的数据保存到MySQL数据库，却不得而知。另外，如何将mysql数据库中的数据显示到wysiwyg也不得而知，对于这两个问题，让我来告诉你解决方案！ [b]一、效果展示[/b] 首先，我们先来看看效果如何： [img]http://files.jb51.net/file_images/article/201605/201659170210593.gif?20164917218[/img] 富文本中有一张图片，还有一个数字列表我们可以看到编辑后的数据保存成功，以及保存后对应的展示。 [b]二、富文本[/b] 度娘对于富文本的解释如下：富文本格式（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)，虽然我也不知道到底有多大）。 [b]三、jquery.base64[/b] [b]①、引入jquery.base64.js[/b] <script type="text/javascript" src="${ctx}/components/jquery/jquery.base64.js"></script> 同时设置utf-8编码，确保中文不乱码. $.base64.utf8encode = true; [b]②、富文本表单提交[/b] 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);
 });
}

[b]③、富文本数据展示[/b] $('#editor').html($.base64.atob(description, true)); 通过base64对数据库中保存的html代码进行解码。 [b]④、wysiwyg组件[/b] 关于wysiwyg组件封装代码，我已上传到CSDN的代码库，可详细参照。 [b]四、普通html转码做法[/b]

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数据进行编码和解码，但是对于图片的保存却无能为力。如果大家还想深入学习，可以点击[url=http://www.1sucai.cn/article/84087.htm]这里[/url]进行学习，再为大家附3个精彩的专题： [url=http://www.1sucai.cn/Special/334.htm]Bootstrap学习教程[/url] [url=http://www.1sucai.cn/Special/769.htm]Bootstrap实战教程[/url] [url=http://www.1sucai.cn/Special/854.htm]Bootstrap插件使用教程[/url] 以上就是本文的全部内容，希望对大家了解富文本组件wysiwyg有所帮助。

全部评论(0)

上一篇：JQuery实现简单验证码提示解决方案
下一篇：JS简单实现点击跳转登陆邮箱功能的方法

资讯排行榜
更多>>