Spring Boot使用Simditor富文本编辑器，并将图片上传到七牛云。

开始之前，需要强调的是Simditor富文本编辑器是基于Jquery的。所以必须引入Jquery。Simditor下载地址

下载解压后会发现是整个simditor项目，很多东西项目根本不需要，只需要将\site\assets下的images、scripts、styles文件夹拷贝，或者找到对应的几个重要的文件即可。

Html中引入以下文件。

<!--simditor--><link rel="stylesheet" type="text/css" href="/css/simditor.css"><script src="/js/jquery.min.js"></script><script src="/js/module.js"></script><script src="/js/hotkeys.js"></script><script src="/js/uploader.js"></script><script src="/js/simditor.js"></script>

在需要编辑器的地方添加一个textarea元素。

            <div class="row"><div class="form-group"><label for="editor">文本编辑器</label><textarea id="editor" placeholder="开始你的表演吧..."></textarea></div></div>

注意：textarea 的id值要与接下来的初始化simditor 的JS代码对应起来，toolbar后的tools是一个数组。

var editor = new Simditor({textarea: $('#editor'),toolbar:tools,toolbarFloat: true,toolbarFloatOffset: 0,toolbarHidden: false,upload:{url: '/admin/edit/uploadPhoto',params: null,fileKey: 'file',connectionCount: 1,leaveConfirm: '正在上传, 你确定要离开吗?'}

后端上传七牛云

1、添加Maven依赖

<dependency><groupId>com.qiniu</groupId><artifactId>qiniu-java-sdk</artifactId><version>[7.2.0, 7.2.99]</version>
</dependency>

2、编写QiniuUtil类

public class QiniuUtil {//设置需要操作的账号的AK和SKprivate static final String ACCESS_KEY = "****************************************";private static final String SECRET_KEY = "****************************************";//要上传的空间private static final String bucketname = "你想上传到的七牛空间名";//密钥private static final Auth auth = Auth.create(ACCESS_KEY, SECRET_KEY);//普通上传public String upload(byte[] bytes, String oldName) throws IOException {//构造一个带指定Zone对象的配置类Configuration cfg = new Configuration(Zone.zone0());UploadManager uploadManager = new UploadManager(cfg);String upToken = auth.uploadToken(bucketname);//        修改文件名称，以免重复//文件扩展名String fileExtName = oldName.substring(oldName.lastIndexOf(".") + 1);String fileName = "mrainBlog" + UUID.randomUUID() + "." + fileExtName;//创建上传对象//调用put方法上传  这里是使用的Byte类型上传的。还有其他方法Response res = uploadManager.put(bytes, fileName, upToken);//解析上传成功的结果DefaultPutRet putRet = new Gson().fromJson(res.bodyString(), DefaultPutRet.class);
//        获取返回的文件名String key = putRet.key;
//        获取图片路径String filePath = "你上传到七牛云空间的域名"+key;return filePath;}
}

3、编写Controller层

//    编辑器上传图片@RequestMapping("/uploadPhoto")@ResponseBodypublic JSONObject mainPage(MultipartFile file)  {QiniuUtil qiniuUtil = new QiniuUtil();JSONObject json = new JSONObject();
//        文件名String originalFilename = file.getOriginalFilename();byte[] bytes = new byte[0];String uploadName = null;try {
//          获取文件的bytes形式bytes = file.getBytes();
//           调用QiniuUtil中的方法uploadName = qiniuUtil.upload(bytes, originalFilename);json.put("success", true);json.put("file_path", uploadName);} catch (IOException e) {e.printStackTrace();json.put("success", false);}return json;}

最后需要注意的就是，返回给页面的数据必须是

//成功时
{"success":true,"file_path":"图片的路径地址"
}//失败时
{"success":false
}

Spring Boot使用Simditor富文本编辑器，并将图片上传到七牛云。相关推荐

Spring Boot集成Ueditor富文本编辑器，实现图片上传，视频上传，返回内容功能并且通过OSS转换为链接并且解决Spring Security静态资源访问以及跨域问题
学习自https://cloud.tencent.com/developer/article/1452451 现在是晚上22点,刚刚和我们的前端交流完了富文本编辑器的一些意见和看法还是老样子需求 ...
Simditor 富文本编辑器多选图片上传、视频连接插入
simditor 是一个基于浏览器的所见即所得的文本编辑器.Simditor 富文本编辑器, 支持多选图片上传, 视频连接插入, HTML代码编辑以及常用富文本按钮,支持的浏览器:IE10.Firef ...
如何部署JSP版本的百度富文本编辑器（带图片上传功能）
博主之前因为公司项目需要部署百度的富文本编辑器到项目中,由于之前一直是后端开发,所以部署上还是费了一番心思的,网上也有很多教程但是用起来总会有各种问题,今天在这里记录一下以备今后的不时之需,也希望帮助 ...
themyleaf 图片上传_springboot thymeleaf 整合百度富文本编辑器UEditor进行图片上传
项目中需要使用到富文本编辑器,找来找去发现百度UEditor富文本编辑器在国内最为常用因此就尝试引入.编辑器官网是:http://ueditor.baidu.com/website/index.htm ...
vue中使用wangeditor富文本编辑器（含图片上传和回显）
最近在写vue的项目中,遇到一个需求,点击编辑,显示弹框,在弹框中的富文本编辑器中编辑自定义文本样式,可以上传图片并回显.编辑完成确定后显示在页面上. 首先先写一个editor.vue的页面.(建议单 ...
富文本编辑器quill-editor自定义图片上传
目录 1.页面引入 2.自定义imge处理的图片上传组件 3.图片上传成功后回显嵌入 4.最终呈现效果 5.源码之前我整理过一篇文章,Quill编辑器实现图片上传功能(戳链接可查看) 但是想来那个是 ...
quill富文本编辑器quill粘贴图片上传服务器
强大的富文本编辑器:quill github:32k start++,:https://github.com/quilljs/quill quill粘贴图片上传服务器 <link href=&q ...
百度富文本编辑器，改变图片上传存储路径
我用的是最新版! 找到以下2个关键文件: YourPath.../Ueditor/php/config.json YourPath.../Ueditor/php/Uploader.class.php ...
summernote富文本编辑器的自定义附件上传：不限于图片类型
summernote富文本编辑器的自定义附件上传前言一.自定义上传附件按钮和弹窗二.结合PHP上传文件进行后端处理三.用jq模拟点击添加链接方式去处理上传附件前言 summernote的上传 ...

Spring Boot使用Simditor富文本编辑器，并将图片上传到七牛云。

Spring Boot使用Simditor富文本编辑器，并将图片上传到七牛云。相关推荐

最新文章

热门文章