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富文本编辑器，并将图片上传到七牛云。的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。