開始之前，需要強調的是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富文本编辑器，并将图片上传到七牛云。的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。