一、下载源码（从官网下）

导入项目，在页面引用这几项，直接复制即可，也可引用本地库

<!-- include libraries(jQuery, bootstrap) -->
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" 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> <!-- include summernote css/js -->
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote.js"></script>

二、初始化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="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.11/summernote.css" rel="stylesheet"><script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote.js"></script>
</head>
<body><div id="summernote"><p>Hello Summernote</p></div><script>$(document).ready(function() {$('#summernote').summernote();});</script>
</body>
</html>

当然我们在这里可以初始化一些summernote的参数，比如

 $('#summernote').summernote({placeholder: '我是千古',tabsize: 2,height: 400,  //高度，根据需要去设lang: 'zh-CN',  //zh-CN为中文文件，如果需要转换语言，注意在下载的lang文件夹中取出并加载focus: true});

到这里页面就会显示

三、上传图片至服务器

我这里还是将图片上传至本地虚拟路径，在summernote的官网我们可以看到覆盖图片上传的方法

这里我们使用第一种，前端js代码，初始化文本，并且回调覆盖上传方法

<script>$('#summernote').summernote({placeholder: '千古',height: 400,lang: 'zh-CN',focus: true,callbacks:{  //回调函数，覆盖上传方法onImageUploadonImageUpload: function(files) {sendFile(files[0]);}}});function sendFile(files) {data = new FormData();data.append("files", files);$.ajax({data: data,dataType: 'json',type: "POST",url: "/img",  //上传路径cache: false,contentType: false,processData: false,success: function(data) {console.log(data);$('#summernote').summernote('insertImage', data.filename);},error: function(XMLHttpRequest, textStatus, errorThrown) {alert(XMLHttpRequest.status);alert(XMLHttpRequest.readyState);alert(textStatus);}});}</script>

后台方法

    @ResponseBody@RequestMapping("/img")public Map<String,Object> uploadImgQiniu(@RequestParam("files") MultipartFile     file) throws IOException {Map<String,Object> map = new HashMap<String,Object>();if(!file.isEmpty()) {System.out.println(file.getOriginalFilename());String fileName = file.getOriginalFilename();// 获取后缀//String suffixName = fileName.substring(fileName.lastIndexOf("."));// 文件上传的路径String filePath = "C:/Users/ASUS/Desktop/file/";// fileName处理fileName = filePath+fileName;// 文件对象File dest = new File(fileName);// 创建路径if(!dest.getParentFile().exists()){dest.getParentFile().mkdir();}try {//保存文件file.transferTo(dest);} catch (IOException e) {e.printStackTrace();}}map.put("filename", "/images/"+file.getOriginalFilename());return map;}

以下就是最终效果

额，大概就结束了,

如有侵权，请联系我删除

千古 QQ:1466877104

spring boot2.0整合富文本编辑器summernote相关推荐

BootStrap富文本编辑器Summernote
BootStrap富文本编辑器Summernote https://blog.csdn.net/qq_40205116/article/details/94287053
基于jQuery的富文本编辑器summernote插件的使用教程
基于jQuery的富文本编辑器summernote插件的使用教程基于jQuery的富文本编辑器summernote插件的使用教程一:最近项目中遇到使用富文本编辑器的功能, JQuery的富文本编辑 ...
解决spring 类型项目 ueditor富文本编辑器上传图片等文件失败问题
工作中需要用到UEditor编辑文本,在与springMVC进行整合时,出现了一些问题,结果导致,在进行图片上传时出现如下提示: 上网查询了很多相关资料,此处简要记录下,防止以后遇到类似问题. 一种方 ...
easyUI整合富文本编辑器KindEditor详细教程
原因在今年4月份的时候写过一篇关于easyui整合UEditor的文章Spring+SpringMVC+MyBatis+easyUI整合优化篇(六)easyUI与富文本编辑器UEditor整合,从那 ...
kindeditor java ssm_easyUI整合富文本编辑器KindEditor详细教程(附源码)
原因在今年4月份的时候写过一篇关于easyui整合UEditor的文章Spring+SpringMVC+MyBatis+easyUI整合优化篇(六)easyUI与富文本编辑器UEditor整合,从那 ...
Spring Boot集成Ueditor富文本编辑器，实现图片上传，视频上传，返回内容功能并且通过OSS转换为链接并且解决Spring Security静态资源访问以及跨域问题
学习自https://cloud.tencent.com/developer/article/1452451 现在是晚上22点,刚刚和我们的前端交流完了富文本编辑器的一些意见和看法还是老样子需求 ...
ODOO10 富文本编辑器SummerNote输入联想短句，输入快捷短语
odoo10富文本编辑器是在web_editor模块中,使用的第三方编辑器summernote,其版本较老,应该是0.6版本的. 老版本summernote需要加载扩展js才有[输入联想]的功能,新版 ...
SpringBoot2整合富文本编辑器wangEditor(含文件上传)攻略
背景最近要用到一个富文本编辑器,记得遥远的年代,调过Kingeditor.Ueditor...但是那些都很重,,,于是最近经常再留意这件事,直到最近看到一个wangEditor,体验了一下,又轻又好 ...
富文本编辑器summernote
版权声明本文原创作者:谷哥的小弟作者博客地址:http://blog.csdn.net/lfdfhl summernote概述 summernote是一款轻巧.友好.易于集成.使用方便的富文本编辑 ...

spring boot2.0整合富文本编辑器summernote

一、下载源码（从官网下）

二、初始化summernote

三、上传图片至服务器

spring boot2.0整合富文本编辑器summernote相关推荐

最新文章

热门文章