修改Summernote文本编辑器上传图片到七牛云图床

Summernote是一款简洁大方的富文本编辑器，基于Bootstrap 框架，实用性很高，但是默认上传图片是保存二进制图片数据，这样会造成数据库庞大，本文介绍如何将图片上传改为保存到图床，数据库直接保存路径地址。详见博客：http://www.dustyblog.cn/138.html

富文本演示；该插件已上传至GitHub，前往下载

如果你还没有自己的图床，建议可以去七牛云注册一个，使用介绍之前有介绍过：创建自己的图床

一、初始化富文本编辑器

 

1. $(function() {
2.         $('.summernote').summernote({
3.             height: 300,
4.             tabsize: 2,
5.             lang: 'zh-CN',
6.             callbacks: {
7.             // 重写图片上传；
8.               onImageUpload: function (files) { //the onImageUpload API
9.                 img = sendFile(file);
10.               }
11.              }
12.         });
13.     })

 二、在初始化方法中，利用了 callbacks 重写了图片上传方法sendFile()：

 

1. function sendFile(file) {
2.         data = new FormData();
3.         data.append("file", file);
4.         console.log(data);
5.         $.ajax({
6.             data: data,
7.             type: "POST",
8.             url: "/uploadQiuNiu",
9.             cache: false,
10.             contentType: false,
11.             processData: false,
12.             success: function(url) {
13.                 $('#articleContent').summernote('insertImage', url);
14.             }
15.         });
16.     }

这里，将图片上传到control层，然后再上传到七牛云图床上，具体的实现方法，参照之前的文章Spring MVC 上传图片至七牛云图床

三、附上 Summernote 常用方法

 

1. //    获取编辑器内的HTML内容
2.         var str = $('#summernote').summernote('code');
3. //    如果初始化了多个编辑器，可以通过eq()方法获取某个编辑器的HTML内容。Eg:获取第二个编辑器内容
4.         var markupStr = $('.summernote').eq(1).summernote('code');
5. //    给指定的编辑器设置HTML内容
6.         var str = 'Hello World';
7.         $('#summernote').summernote('code', str);
8. //    返回编辑器中内容是否为空
9.         if ($('#summernote').summernote('isEmpty')) {
10.             alert('contents is empty');
11.         }
12. //    清除内容和存储记录
13.         $('#summernote').summernote('reset');

富文本演示；该插件已上传至GitHub，前往下载