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和SK
    private 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")
    @ResponseBody
    public 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
}