基于BootStrap的文本编辑器组件Summernote


Posted in Javascript onOctober 27, 2017

Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器。Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox、Opera、Internet Explorer 9 +(IE8支持即将到来)。

特点:

世界上最好的WYSIWYG在线编辑器

极易安装

开源

自定义初化选项

支持快捷键

适用于各种后端程序言语

Summernote官网地址 :https://summernote.org/

这是官网的一个例子:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Summernote</title>
 <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="external nofollow" rel="stylesheet">
 <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script> 
 <script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script> 
 <link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.8/summernote.css" rel="external nofollow" rel="stylesheet">
 <script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.8/summernote.js"></script>
</head>
<body>
 <div id="summernote"><p>Hello Summernote</p></div>
 <script>
 $(document).ready(function() {
 $('#summernote').summernote();
 });
 </script>
</body>
</html>

效果图:

基于BootStrap的文本编辑器组件Summernote

最简单的默认初始化组件的方式:

在<body>添加一个容器<div>:

<div id="summernote">Hello Summernote</div>

再用Jquery初始化该组件:

$(document).ready(function() {
 $('#summernote').summernote();
});

我们也可以自定义组件,如自定义编辑框的高度:

$('#summernote').summernote({
 height: 300,   // 定义编辑框高度
 minHeight: null,  // 定义编辑框最低的高度
 maxHeight: null,  // 定义编辑框最高德高度
 });

我们还可以自定义工具栏:

<!--工具栏-->
  toolbar: [
  <!--字体工具-->
  ['fontname', ['fontname']], //字体系列     
  ['style', ['bold', 'italic', 'underline', 'clear']], // 字体粗体、字体斜体、字体下划线、字体格式清除 
  ['font', ['strikethrough', 'superscript', 'subscript']], //字体划线、字体上标、字体下标 
  ['fontsize', ['fontsize']], //字体大小    
  ['color', ['color']], //字体颜色
  <!--段落工具-->  
  ['style', ['style']],//样式
  ['para', ['ul', 'ol', 'paragraph']], //无序列表、有序列表、段落对齐方式
  ['height', ['height']], //行高
  <!--插入工具--> 
  ['table',['table']], //插入表格 
  ['hr',['hr']],//插入水平线  
  ['link',['link']], //插入链接  
  ['picture',['picture']], //插入图片  
  ['video',['video']], //插入视频
  <!--其它-->
  ['fullscreen',['fullscreen']], //全屏
  ['codeview',['codeview']], //查看html代码
  ['undo',['undo']], //撤销
  ['redo',['redo']], //取消撤销
  ['help',['help']], //帮助
  ],

其它的一些初始化设置:

              lang:'zh-CN',  //设置中文,需引入中文插件summernote-zh-CN.js
              placeholder: 'write here...', //占位符
              dialogsInBody: true,  //对话框放在编辑框还是Body
              dialogsFade: true ,//对话框显示效果
              disableDragAndDrop: true ,//禁用拖放功能
              shortcuts: false ,//禁用快捷键

还有回调函数:

callbacks: {
 
 }

回调函数里面的事件有 oninit,onenter,onfocus,onblur,onkeyup,onkeydown,onpaste,onImageUpload 等等,

这里主要介绍上传图片触发的事件 onImageUpload :

插入图片的时候,Summernote组件默认是将图片以二进制形式展示的,如果以此方式将文本框的内容存储到数据库时,会导致数据库数据量很大

这是summernote默认方式插入图片时存储到数据库的字段:

基于BootStrap的文本编辑器组件Summernote

所以这里采用另一个方法,就是将图片上传到服务器,上传成功后回传图片的访问地址到插入的图片位置,展示图片;

具体实现如下:                                

callbacks: { 
     onImageUpload: function(file) { //图片默认以二进制的形式存储到数据库,调用此方法将请求后台将图片存储到服务器,返回图片请求地址到前端
      //将图片放入Formdate对象中      
      var formData = new FormData(); 
      //‘picture'为后台获取的文件名,file[0]是要上传的文件
      formData.append("picture", file[0]); 
      $.ajax({    
       type:'post', 
       url:'请求后台地址',   
       cache: false,
       data:formData, 
       processData: false,
       contentType: false,
       dataType:'text', //请求成功后,后台返回图片访问地址字符串,故此以text格式获取,而不是json格式
       success: function(picture) {      
       $('#summernote').summernote('insertImage',picture); 
       }, 
       error:function(){       
       alert("上传失败");       
       } 
      });
     } 
     }

后台处理请求存储图片到服务器,成功则返回图片访问地址:

 注意:我这里是将图片上传的真实地址和虚拟的图片访问地址在tomcat的server.xml中配置了映射关系,所以上传成功后返回给前端的是虚拟的访问地址;

@RequestMapping(value="contentFileUpload",method=RequestMethod.POST)
 @ResponseBody
 public String contentFileUpload(MultipartFile picture) {
 if (picture!=null && picture.getOriginalFilename()!=null && picture.getOriginalFilename().trim().length()>0) { 
  /**
  * picture上传路径(+时间文件夹)
  */
  //真实的上传根路径
  String realUploadPath = 'D:/Program Files (x86)/apache-tomcat-8.5.16/webapps/file';
  //虚拟的文件访问根路径
  String fictitiousRoot = '/file'
  //建立以时间命名的文件夹
  SimpleDateFormat sdf=new SimpleDateFormat("/yyyy/MM/dd/"); 
  String datePath = sdf.format(new Date());
  //最终真实路径
  String realuUploadBrandPath = realUploadPath+"/content"+datePath;
  //最终虚拟访问路径
  String fictitiousUploadBrandPath =fictitiousRoot +"/content"+datePath;
  // 上传文件原始名称 
  String originFileName = picture.getOriginalFilename(); 
  // 新的文件名称 
  String newFileName = UUID.randomUUID()+originFileName.substring(originFileName.lastIndexOf(".")); 
  //如果路径文件夹不存在就创建 
  File dir=new File(realuUploadBrandPath); 
  if(!dir.exists()){ 
  dir.mkdirs(); 
  } 
  // 新文件 
  File newFile = new File(realuUploadBrandPath+File.separator+newFileName); 
  // 将内存中的文件写入磁盘 
  try {
  picture.transferTo(newFile);
  } catch (IllegalStateException | IOException e) {
  // TODO Auto-generated catch block
  e.printStackTrace();
  } 
  // 文件虚拟地址 
  String fictitiousFilePath = fictitiousUploadBrandPath+newFileName; 
  return fictitiousFilePath;   
 }
 return "false"; 
 }

建议:真实的上传根路径应写在properties配置文件中,方便日后地址的修改,同时虚拟的访问根路径也不应存储到数据库当中,只需存储相对位置就可以,将虚拟的访问根路径也写在properties文件当中。

 通过上面的方法处理后,存储到数据库的字段:

基于BootStrap的文本编辑器组件Summernote

 获取编辑框内容的方法:

var markupStr = $('#summernote').summernote('code');

总结

以上所述是小编给大家介绍的基于BootStrap的文本编辑器组件Summernote,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
使用apply方法实现javascript中的对象继承
Dec 16 Javascript
javascript常用的设计模式
Feb 09 Javascript
jquery实现提示语淡入效果
May 05 jQuery
详解vue 配合vue-resource调用接口获取数据
Jun 22 Javascript
JavaScript中立即执行函数实例详解
Nov 04 Javascript
用 Vue.js 递归组件实现可折叠的树形菜单(demo)
Dec 25 Javascript
bootstrap中日历范围选择插件daterangepicker的使用详解
Apr 17 Javascript
如何从零开始利用js手写一个Promise库详解
Apr 19 Javascript
Element UI 自定义正则表达式验证方法
Sep 04 Javascript
一文读懂ES7中的javascript修饰器
May 06 Javascript
微信小程序在线客服自动回复功能(基于node)
Jul 03 Javascript
JS中多层次排序算法的实现代码
Jan 06 Javascript
微信小程序template模板实例详解
Oct 27 #Javascript
微信小程序 上传头像的实例详解
Oct 27 #Javascript
探讨Vue.js的组件和模板
Oct 27 #Javascript
360提示[高危]使用存在漏洞的JQuery版本的解决方法
Oct 27 #jQuery
关于jQuery里prev()的简单操作代码
Oct 27 #jQuery
JS获取数组中出现次数最多及第二多元素的方法
Oct 27 #Javascript
JavaScript数据结构之优先队列与循环队列实例详解
Oct 27 #Javascript
You might like
dedecms系统常用术语汇总
2007/04/03 PHP
php求今天、昨天、明天时间戳的简单实现方法
2016/07/28 PHP
PHP中单例模式的使用场景与使用方法讲解
2019/03/18 PHP
Javascript 阻止javascript事件冒泡,获取控件ID值
2009/06/27 Javascript
ExtJs 表单提交登陆实现代码
2010/08/19 Javascript
如何用ajax来创建一个XMLHttpRequest对象
2012/12/10 Javascript
探讨JavaScript中声明全局变量三种方式的异同
2013/12/03 Javascript
jQuery实现动画效果circle实例
2015/08/06 Javascript
nodejs 中模拟实现 emmiter 自定义事件
2016/02/22 NodeJs
Javascript日期格式化format函数的使用方法
2016/08/30 Javascript
js 模仿锚点定位的实现方法
2016/11/19 Javascript
Web开发中客户端的跳转与服务器端的跳转的区别
2017/03/05 Javascript
JS实现图片预加载之无序预加载功能代码
2017/05/12 Javascript
Angular.js组件之input mask对input输入进行格式化详解
2017/07/10 Javascript
js实现日期显示的一些操作(实例讲解)
2017/07/27 Javascript
js构造函数创建对象是否加new问题
2018/01/22 Javascript
ES6使用export和import实现模块化的方法
2018/09/10 Javascript
vue中的过滤器实例代码详解
2019/06/06 Javascript
Python中MySQL数据迁移到MongoDB脚本的方法
2016/04/28 Python
python实现人人自动回复、抢沙发功能
2018/06/08 Python
python实现彩票系统
2020/06/28 Python
pandas求两个表格不相交的集合方法
2018/12/08 Python
Python坐标线性插值应用实现
2019/11/13 Python
Pytorch的mean和std调查实例
2020/01/02 Python
你应该知道的Python3.6、3.7、3.8新特性小结
2020/05/12 Python
Node.js 和 Python之间该选择哪个?
2020/08/05 Python
澳大利亚办公室装修:JasonL Office Furniture
2019/06/25 全球购物
孝老爱亲模范事迹
2014/01/24 职场文书
公司应聘自荐书
2014/06/14 职场文书
幼师中班个人总结
2015/02/12 职场文书
2015企业年终工作总结范文
2015/05/27 职场文书
运动会开幕式致辞
2015/07/29 职场文书
Python获取百度热搜的完整代码
2021/04/07 Python
MySQL 数据 data 基本操作
2022/05/04 MySQL
css3 选择器
2022/05/11 HTML / CSS
macos系统如何实现微信双开? mac登录两个微信以上微信的技巧
2022/07/23 数码科技