一、简介

Summernote 是一个简单灵活的所见即所得的 HTML 在线编辑器,基于 jQuery 和 Bootstrap 构建,支持快捷键操作,提供大量可定制的选项。

二、下载：

官网下载地址：https://github.com/summernote/summernote
英文API:https://summernote.org/
中文API:https://www.summernote.cn/

这个中文API没有英文的全，最好还是去看英文的

如果嫌github下载太慢的话，本地下载地址：https://download.csdn.net/download/qq_43753724/16535846?spm=1001.2014.3001.5501

三、基本使用：

1、引入js/css

 <link href="../../commons/jslib/hplus/css/bootstrap.min.css"rel="stylesheet"><!--引入富文本插件css--><link href="../../commons/jslib/hplus/css/plugins/summernote/summernote.css" rel="stylesheet"><link href="../../commons/jslib/hplus/css/plugins/summernote/summernote-bs3.css" rel="stylesheet"><script src="../../commons/jslib/hplus/js/jquery.min.js?v=2.1.4"></script><script src="../../commons/jslib/hplus/js/bootstrap.min.js?v=3.3.5"></script><!--引入富文本插件js--><script src="../../commons/jslib/hplus/js/plugins/summernote/summernote.min.js"></script><script src="../../commons/jslib/hplus/js/plugins/summernote/summernote-zh-CN.js"></script>

当然，每个人的路径可能有点区别，你改成你的路径就行

2、建立一个div

<div class="summernote" id="summernote">
</div>

3、用 js初始化操作

$(function(){//summernote初始化$('#summernote').summernote({lang:'zh-CN',focus:true,tabsize:2,//回调函数，重写onImageUpload方法//注意下这里，如果你引入的是summernote.js的话这里得放在callbacks里面onImageUpload:function (files,editor,$editable){sendFile(files,editor,$editable);}});
});//上传图片function sendFile(files,editor,$editable) {var formData=new FormData();formData.append('files',files[0]);$.ajax({url:'/opms/noticeInfo/uploadImage',type:'post',data:formData,cache:false,contentType: false,//不重写表单头部信息processData:false,//不序列化data,直接提交datadataType: 'json',//以json形式接收返回值success:function (data) {if (data.success==true){//data是返回的hash,key之类的值，key是定义的文件名editor.insertImage($editable,data.img);}else{swal('系统提示','图片上传失败','warning');}},error:function () {swal('系统提示','图片上传失败','error');}});}

4、上传图片的Controller

如果图片上传成功，这里返回图片在服务器上面的访问路径

//后台上传图片@RequestMapping("/uploadImage")@ResponseBodypublic String uploadImage(@RequestParam(value ="files",required = false)MultipartFile file,HttpServletRequest request){//设一个List专门存上传图片的名字(方便取消发布公告之后的删除)List<String> imageList=new ArrayList<>();JSONObject json=new JSONObject();//服务器端文件夹物理路径String path=request.getSession().getServletContext().getRealPath("noticeImage");//获取文件名String fileName=file.getOriginalFilename();//截取文件名的后缀String suffix=fileName.substring(fileName.lastIndexOf(".")+1);//生成UUIDString UUID= UUIDGenerator.getUUID();//修改之后的文件名String newFileName=UUID+"."+suffix;//将文件名存入imageListimageList.add(newFileName);//将imageList存入sessionrequest.getSession().setAttribute("imageList",imageList);//实例化一个文件对象，表示目标文件(含物理路径)File targetFile=new File(path,newFileName);if(!targetFile.exists()){//测试此抽象路径名表示的文件或目录是否存在//若不存在，创建由此抽象路径名命名的目录，包括任何必需但不存在的父目录。targetFile.mkdirs();}try{//将文件上传到服务器上的指定位置file.transferTo(targetFile);//返回保存的url，根据url可以进行文件查看或者下载String url=request.getScheme() + "://" + request.getServerName() + ":" +request.getServerPort() + "/opms/noticeImage/" + newFileName;json.put("success",true);json.put("img",url);return json.toString();}catch (Exception e){e.printStackTrace();return "{\"success\":\"false\",\"img\":\"error\"}";}}

5、过去编辑器内容的代码:

 //获取编辑器的代码var content=$('#summernote').code();

6、为编辑器赋值的方法：

$('#summernote').code('这里插入内容');

7、效果展示：

选择一张图片：

图片选择之后就已经上传到服务器了，我们可以去查看：

查看富文本编辑器的内容转代码：

数据库里面存的就是上面的代码(一定不要存二进制数据)

四、总结

1、我们在文本编辑器选择照片之后图片就已经传到服务器上面了，所以若点击了取消按钮或者关闭文本编辑器的时候就得删除刚刚上传的图片，这个必须处理，要不服务器传的图片一直无法删除。
2、注意自己插件的版本问题，这插件民间的解决方案太多，并且版本几乎都不一致，可以去官网https://summernote.org/查看最新的API
3、为了减轻数据库的负担，最好还是将图片存到服务器，数据库只存一个<img src='这里是你服务器中图片的访问路径'>，要不数据库存二进制数据的话太影响性能了。

summernote富文本编辑器基本使用相关推荐

vue+summernote富文本编辑器
vue+summernote富文本编辑器最近项目中有新增编辑报告的需求需使用富文本编辑器,在网上找了几篇相关博客,于是选择了summernote ,summernote是一款轻量级的富文本编辑器,比 ...
bootstrap summernote富文本编辑器图片上传干货分享
个人技术网站欢迎关注今天做后台的时候需要一个富文本编辑器组件,由于项目使用的是bootstrap,所以毫不犹豫的用上了summernote富文本编辑器.文档各大大牛已经整理出来了但是图片上传到 ...
Django使用summernote富文本编辑器，完整前后端
今天项目中要使用summernote富文本编辑器,由于网上的基本都是在说用这个编辑器上传图片的,所以我就整理了一下上传图片和文本的代码,完整前后端. 这里我准备了一个demo,需要的可以直接复制 &l ...
Django中summernote富文本编辑器完整前后端
summernote富文本编辑器,由于网上的基本都是在说用这个编辑器上传图片的,所以我就整理了一下上传图片和文本的代码,完整前后端. 这里我准备了一个demo,需要的可以直接复制 Summernote ...
summernote富文本编辑器的基本使用
summernote富文本编辑器的基本使用(一) 本文主要是跟官网的一些翻译,也锻炼下英语水平.原英文网址http://summernote.org/getting-started/ 基础API 初始 ...
summernote富文本编辑器
一.文档二.使用四.他山之石一.文档官网地址 https://summernote.org/ github https://github.com/summernote/summernote 选 ...
前端 summernote富文本编辑器点击文章预览的功能实现
一般如果要在网页项目中使用文章编辑器的话,都会考虑summernote富文本编辑器,毕竟使用简便,而且是开源的,一般的用法就是: <div class="form-group" ...
summernote富文本编辑器的自定义附件上传：不限于图片类型
summernote富文本编辑器的自定义附件上传前言一.自定义上传附件按钮和弹窗二.结合PHP上传文件进行后端处理三.用jq模拟点击添加链接方式去处理上传附件前言 summernote的上传 ...
【实践】简洁大方的summernote 富文本编辑器插件的用发——导入篇
首先在这里吐槽一下,网上不少教程实在太坑人,错误的代码也敢发上来真的是误人子弟,这篇文章是我踩了无数个坑写上来的,可能也会有不足之处所以自己以后可能也会进行更正. 好吧,先说说最近的情况,忙着学校的期 ...

summernote富文本编辑器基本使用

summernote富文本编辑器的基本使用