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

程序员文章站 2022-04-28 23:26:07

summernote是一个基于jquery的bootstrap超级简单wysiwyg在线编辑器。summernote非常的轻量级，大小只有30kb，支持safari,chr...

summernote是一个基于jquery的bootstrap超级简单wysiwyg在线编辑器。summernote非常的轻量级，大小只有30kb，支持safari,chrome,firefox、opera、internet explorer 9 +(ie8支持即将到来)。

特点：

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

极易安装

开源

自定义初化选项

支持快捷键

适用于各种后端程序言语

summernote官网地址：

这是官网的一个例子：

<!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，希望对大家有所帮助

上一篇：微信小程序-getUserInfo回调的实例详解

下一篇： Vue.js划分组件的方法

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