Summernote 是一个简单，灵活，所见即所得（WYSIWYG）的编辑器，但是编辑器中上传图片是base64的，base64是以文本的形式保存在数据库的，这要每次调用会对服务器造成一定的压力。而且base64增加了CSS文件的尺寸，base64编码图片本质上是将图片的二进制大小以一些字母的形式展示，例如一个1024字节的图片，base64编码后至少1024个字符，这个大小会被完全嵌入到文件中。所以，基于以上原因，我们最好将图片上传至七牛。
我的此次项目是基于angular的，所以此处还需要将angular，summernote以及七牛结合起来。angular和summernote的指令在github上可以轻松拿到，所以此处就不多说了，附上地址：https://github.com/summernote/angular-summernote
那么，接下来就是他们三者相结合，这块用到了summernote中的onImageUpload这个方法，废话不说，直接上代码：
HTML代码
js代码
在你的controller里，如下：
//获取七牛的uptoken
$http.get(你七牛的获取uptoken地址).success(function (data) {
$scope.uptoken = data.uptoken; //获取你的七牛uptoken
$scope.prefix = data.prefix; //获取你的七牛文件存储地址
});
$scope.imageUpload = function(files) {
var timestamp = new Date().getTime();
var data = new FormData();
data.append("file", files);
data.append("key", timestamp);
data.append("token", $scope.uptoken);
$.ajax({
data: data,
type: "POST",
url: "http://upload.qiniu.com",
cache: false,
contentType: false,
processData: false,
success: function (data) {
var editor = $.summernote.eventHandler.getModule();
editor.insertImage($scope.editable,$scope.prefix+"/"+data.key);
},
error: function () {
alert("上传失败")
}
});
};
此处几点需要注意的：
一、FormData()
XMLHttpRequest Level 2 添加了一个新的接口——FormData。利用 FormData 对象，我们可以通过 JavaScript 用一些键值对来模拟一系列表单控件，我们还可以使用 XMLHttpRequest 的 send() 方法来异步的提交表单。与普通的 Ajax 相比，使用 FormData 的最大优点就是我们可以异步上传二进制文件。
你可以先创建一个空的 FormData 对象,然后使用 append() 方法向该对象里添加字段，如下：
var oMyForm = new FormData();
oMyForm.append("username", "Groucho");
oMyForm.append("accountnum", 123456); // 数字123456被立即转换成字符串"123456"
// fileInputElement中已经包含了用户所选择的文件
oMyForm.append("userfile", fileInputElement.files[0]);
var oFileBody = "hey!"; // Blob对象包含的文件内容
var oBlob = new Blob([oFileBody], { type: "text/xml"});
oMyForm.append("webmasterfile", oBlob);
var oReq = new XMLHttpRequest();
oReq.open("POST", "http://foo.com/submitform.php");
oReq.send(oMyForm);
注：字段 “userfile” 和 “webmasterfile” 的值都包含了一个文件。通过 FormData.append() 方法赋给字段 “accountnum” 的数字被自动转换为字符（字段的值可以是一个 Blob 对象，File对象或者字符串，剩下其他类型的值都会被自动转换成字符串）。
在该例子中，我们创建了一个名为 oMyForm 的 FormData 对象，该对象中包含了名为”username”，”accountnum”，”userfile” 以及 “webmasterfile” 的字段名，然后使用XMLHttpRequest的 send() 方法把这些数据发送了出去。”webmasterfile” 字段的值不是一个字符串,还是一个 Blob 对象。
二、insertImage
我们将图片成功上传至七牛后，需要将图片添加至编辑器，此处就需要用到insertImage()方法，调用insertImage首先需要调用$.summernote.eventHandler.getModule()，在我做的时候，从网上找的资料比较坑，直接editor.insertImage，然后就报editor is not defined。再三查看API后发现需要var一个editor，然后调用$.summernote.eventHandler.getModule()，然后在editor.insertImage。所以，小伙伴们此处需要注意
angular summernote 七牛实现编辑器上传图片|angular+summernote+七牛实现编辑器上传图片到七牛例子
http://m.bbyears.com/wangyetexiao/96364.html
推荐访问: