Bootstrap 可视化HTML编辑器,summernote(4)

简介: Bootstrap 可视化HTML编辑器,summernote

辛苦的介绍完前两节后,我们来一个动态图看一下效果吧!

image.png


###③. summernote所在form表单的数据提交

这里,我们再回顾一下summernote所在的form表单,其中还包含了一个普通file的input标签,也就是说,该form还需要上传一张项目封面。


<form class="form-horizontal required-validate" action="#" enctype="multipart/form-data" method="post" οnsubmit="return iframeCallback(this, pageAjaxDone)">


先看一下form的属性:


enctype:“multipart/form-data”,表明为文件类型的form保存

iframeCallback方法,稍候详细介绍,主要是对有文件上传的form表单进行封装。

####1、iframeCallback

function iframeCallback(form, callback) {
  YUNM.debug("带文件上传处理");
  var $form = $(form), $iframe = $("#callbackframe");
  var data = $form.data('bootstrapValidator');
  if (data) {
    if (!data.isValid()) {
      return false;
    }
  }
  // 富文本编辑器
  $("div.summernote", $form).each(function() {
    var $this = $(this);
    if (!$this.summernote('isEmpty')) {
      var editor = "<input type='hidden' name='" + $this.attr("name") + "' value='" + $this.summernote('code') + "' />";
      $form.append(editor);
    } else {
      $.showErr("请填写项目详情");
      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);
  });
}

贴上全部代码以供参考,但是这里我们只讲以下部分:


// 富文本编辑器
  $("div.summernote", $form).each(function() {
  var $this = $(this);
  if (!$this.summernote('isEmpty')) {
    var editor = "<input type='hidden' name='" + $this.attr("name") + "' value='" + $this.summernote('code') + "' />";
    $form.append(editor);
  } else {
    $.showErr("请填写项目详情");
    return false;
  }
  });


通过form获取到summernote对象 t h i s 后 , 通 过 ‘ ‘ ‘ ! this 后,通过```! this后,通过‘‘‘!this.summernote(‘isEmpty’)```来判断用户是否对富文本编辑器有内容上的填写,保证不为空,为空时,就弹出提示信息。

$this.summernote('code')可获得summernote编辑器的html内容,将其封装到input对象中,name为前文中div提供的name,供后端使用。

这里其他地方就不做多解释了,详细可参照Bootstrap wysiwyg富文本数据如何保存到mysql。


保存到数据库中是什么样子呢?


<p><img src="http://localhost:8080/ymeng/upload/2016033117093076.jpeg" style=



####2、新版iframeCallback方法

var $form = $(form), $iframe = $("#callbackframe");
YUNM.debug("验证其他简单组件");
var data = $form.data('bootstrapValidator');
if (data) {
  if (!data.isValid()) {
    return false;
  }
}
// 富文本编辑器
$("div.summernote", $form).each(function() {
  var $this = $(this);
  if ($this.summernote('isEmpty')) {
  } else {
    YUNM.debug($this.summernote('code'));
    // 使用base64对内容进行编码
    // 1.解决复制不闭合的html文档,保存后显示错乱的bug
    // 2.解决文本中特殊字符导致的bug
    var editor = "<input type='hidden' name='" + $this.attr("name") + "' value='" + $.base64.btoa($this.summernote('code')) + "' />";
    $form.append(editor);
  }
});
YUNM.debug("验证通过");


比对之前的代码,可以发现代码有两处发生了变化:


当summernote为空时,之前没有做在bootstrap的validator中,是因为还没有搞清楚summernote这种非input标签在validator中的使用,下面会做详细说明。

对summernote的内容加上了base64编码处理,这会有很多好处,稍候介绍。

3、base64的使用方法


js端我在Bootstrap wysiwyg富文本数据如何保存到mysql这篇文章中做了说明,此处不再说明。


可能会有同学需要javascript端的base64编码,而需要在springMVC后端使用base64的解码,那么此处介绍一个jar包(Java Base64.jar),使用方法很简单,下载好jar包后,就可以使用如下方法解码:


import it.sauronsoftware.base64.Base64;


deal.setDescription(StringEscapeUtils.escapeHtml(Base64.decode(description, "utf-8")));

1

2

3

首先,base64的import如上,来自于javabase64.jar包。

decode的编码前端js使用的utf-8,此处自然也用utf-8。

至于StringEscapeUtils类,也是一个非常实用的工具类,有兴趣的可详细关注一下(主要可以对html等等特殊标签进行转义)。

####4、summernote加入到bootstrap validator中


<div class="form-group">
  <label for="" class="col-md-1 control-label">项目详情</label>
  <div class="col-md-10">
  <div class="summernote" name="description" data-bv-excluded="false" data-bv-notempty placeholder="请对项目进行详细的描述,使更多的人了解你的云梦"
    action="${ctx}/file">${deal.description}</div>
  </div>
</div>


注意data-bv-excluded=“false”(由于summernote使用了div作为form表单的呈现形式,非一般的input标签,所以此处要将该name="description"的field标识为非excluded,默认的validator是不对“[’:disabled’, ‘:hidden’, ‘:not(:visible)’]”三种标签做处理的,而summernote会默认作为disabled的一种,那么设置上data-bv-excluded=“false” 后,validator将会对summernote做非空的判断)、data-bv-notempty属性。

当然有了上述两个属性后,并不能保证validator的有效性,那么接下来,请继续看。

onChange : function(contents, $editable) {
  if ($this.parents().length > 0) {
  var $form = $this.parents().find("form.required-validate", $p);
  if ($form.length > 0) {
    var data = $form.data('bootstrapValidator');
    YUNM.debug($this.summernote('isEmpty'));
    if ($this.summernote('isEmpty')) {
    data.updateStatus($this.attr("name"), 'INVALID');
    } else {
    data.updateStatus($this.attr("name"), 'VALID');
    }
  }
  }
},
onInit : function() {
  if ($this.parents().length > 0) {
  var $form = $this.parents().find("form.required-validate", $p);
  if ($form.length > 0) {
    var data = $form.data('bootstrapValidator');
    if (!$this.summernote('isEmpty')) {
    data.updateStatus($this.attr("name"), 'VALID');
    }
  }
  }
},


在summernote的callbacks中加入onChange 、onInit,当文本域发生变化、初始化时,对summernote在form中的验证字段进行状态的更新,validator中使用updateStatus方法。


/**
   * Update all validating results of field
   *
   * @param {String|jQuery} field The field name or field element
   * @param {String} status The status. Can be 'NOT_VALIDATED', 'VALIDATING', 'INVALID' or 'VALID'
   * @param {String} [validatorName] The validator name. If null, the method updates validity result for all validators
   * @returns {BootstrapValidator}
   */
  updateStatus: function(field, status, validatorName) {
相关文章
|
1月前
|
存储 移动开发 编解码
基于HTML5开发的Markdown在线编辑器
Markdown是一种轻量级标记语言,以其简洁易读的格式而备受程序员和作者们的青睐。随着互联网的发展,越来越多的在线Markdown编辑器应运而生,为用户提供了更加便捷、高效的写作和编辑环境。本文将探讨基于HTML5开发的Markdown在线编辑器的设计原理、功能特点以及技术优势。
74 4
|
2月前
|
数据可视化 前端开发 数据挖掘
R语言对综合社会调查GSS数据进行自举法bootstrap统计推断、假设检验、探索性数据分析可视化|数据分享(上)
R语言对综合社会调查GSS数据进行自举法bootstrap统计推断、假设检验、探索性数据分析可视化|数据分享
|
23小时前
|
移动开发 前端开发 JavaScript
基于 HTML5 和 Canvas 开发的在线图片编辑器
基于 HTML5 和 Canvas 开发的在线图片编辑器
7 0
|
2月前
|
存储 移动开发 编解码
基于HTML5开发的Markdown在线编辑器
Markdown是一种轻量级标记语言,以其简洁易读的格式而备受程序员和作者们的青睐。随着互联网的发展,越来越多的在线Markdown编辑器应运而生,为用户提供了更加便捷、高效的写作和编辑环境。本文将探讨基于HTML5开发的Markdown在线编辑器的设计原理、功能特点以及技术优势。
44 1
基于HTML5开发的Markdown在线编辑器
|
1月前
|
移动开发 监控 前端开发
基于 HTML5 WebGL 和 VR 技术的 3D 机房数据中心可视化
基于 HTML5 WebGL 和 VR 技术的 3D 机房数据中心可视化
|
2月前
|
存储 JavaScript 前端开发
笔.COOL,一个功能完备、使用便捷的在线HTML/CSS/JS以及Vue编辑器和作品分享平台
笔.COOL是一个新兴的在线 HTML/CSS/JS 及 Vue 编辑器,提供实时预览和云端存储功能。用户可以随时随地编写和保存代码,同时分享作品给他人预览和学习。它也是一个实用的 BUG 复现工具,支持嵌入编辑器到博客,促进代码交流。社区活跃,适合开发者展示作品、获取灵感和学习。
|
2月前
|
Linux C++ iOS开发
HTML 编辑器
HTML 编辑器。
24 2
|
2月前
|
前端开发 数据可视化
R语言广义线性混合模型(GLMM)bootstrap预测置信区间可视化
R语言广义线性混合模型(GLMM)bootstrap预测置信区间可视化
|
2月前
|
IDE 数据可视化 开发工具
HTML 编辑器
HTML 编辑器
|
2月前
|
前端开发 JavaScript 开发者
【专栏:HTML与CSS实践篇】CSS框架(Bootstrap/Foundation)快速上手
【4月更文挑战第30天】Bootstrap和Foundation是两种流行的CSS框架,用于构建响应式网页。它们包含预定义的样式、栅格系统和组件,加速开发流程。Bootstrap以其12列栅格系统闻名,而Foundation提供更定制化和模块化选项。了解并熟练运用这些框架的基本概念和组件,结合最佳实践和性能优化,能帮助开发者高效创建符合现代设计趋势的网页项目。