简书的web编辑器让人感觉最惊艳的功能之一就是可以直接复制图片粘贴到浏览器里面
其实原理比较简单，就是复制了图片的base64信息放到img标签中
传统的web编辑器，如ckeditor都是围绕<textarea>做文章，最近发现一款编辑器summernote，听名字是不是就很小清新
其实他能做的事情还有很多.......
这里只演示了使用onImageUpload方法将图片上传到七牛云服务器
仔细看了他官网后简直像是发现了一个新世界.......
show
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<!-- include libraries(jQuery, bootstrap) -->
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
<!-- include summernote css/js-->
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.js"></script>
</head>
<script type="text/javascript">
$.ajax({
url: 'https://api.github.com/emojis',
async: false
}).then(function(data) {
window.emojis = Object.keys(data);
window.emojiUrls = data;
});;
var ShareButton = function (context) {
var ui = $.summernote.ui;
// create button
var button = ui.button({
contents: '<i class="fa fa-share"/> 发表',
tooltip: 'shareArticle',
click: function () {
alert('发表文章');
}
});
return button.render(); // return button as jquery object
}
$(function(){
$('#summernote').summernote({
height: null, // set editor height
minHeight: 300, // set minimum height of editor
maxHeight: null, // set maximum height of editor
focus: true, // set focus to editable area after initializing summernote
codemirror: { // codemirror options
theme: 'monokai'
},
toolbar: [
// [groupName, [list of button]]
['style', ['style', 'normal', 'blockquote', 'pre', 'h1', 'h3', 'h4', 'h5', 'h6']],
['style', ['bold', 'italic', 'underline', 'clear']],
['font', ['strikethrough', 'superscript', 'subscript']],
['fontsize', ['fontsize']],
['color', ['color']],
['para', ['ul', 'ol', 'paragraph']],
['height', ['height']],
['insert', ['picture','table','hr']],
['mybutton', ['shareArticle']]
],
buttons: {
shareArticle: ShareButton
},
hint: {
match: /:([\-+\w]+)$/,
search: function (keyword, callback) {
callback($.grep(emojis, function (item) {
return item.indexOf(keyword) === 0;
}));
},
template: function (item) {
var content = emojiUrls[item];
return '[站外图片上传中……(2)] :' + item + ':';
},
content: function (item) {
var url = emojiUrls[item];
if (url) {
return $('<img />').attr('src', url).css('width', 20)[0];
}
return '';
}
},
callbacks: {
onImageUpload: function(files) {//上传图片到服务器
var node=document.createElement("p");
var imgKey = uploadImage(files);
node.id=imgKey;
node.innerHTML = "[uploading image "+imgKey+"]";
$('#summernote').summernote('insertNode', node);
}
}
});
})
function uploadImage(files){
var date = new Date();
var timestamp = date.getTime();
var key = timestamp;
var imgURL = uploadToQiniu(files,key);
return key
}
</script>
<body>
<div>
<div id="summernote">Hello Summernote</div>
</div>
</body>
<script type="text/javascript">
//获取七牛的uptoken
function uploadToQiniu(files,key){
$.ajax({
type: "get",
url: "你获取token和prefix的地址",
cache: false,
contentType: false,
processData: false,
dataType : "json",
success: function (data) {
var uptoken = data.uptoken; //获取你的七牛uptoken
var prefix = data.prefix; //获取你的七牛文件存储地址
console.log("uptoken:"+uptoken+" prefix:"+prefix);
var form = new FormData();
form.append("file", files[0]);
form.append("key", "image/article/"+key);
form.append("token", uptoken);
$.ajax({
data: form,
type: "POST",
url: "http://up-z1.qiniu.com",
cache: false,
contentType: false,
processData: false,
dataType : "json",
success: function (data) {
var iUrl = prefix+data.key;
$("#"+key).replaceWith("[站外图片上传中……(2)]"); //这里的“replaceWith”里面写一个img标签src为iUrl，无意中发现简书编辑器的一个bug
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert('上传失败')
alert("status"+XMLHttpRequest.status);
alert("readyState"+XMLHttpRequest.readyState);
alert("textStatus"+textStatus);
}
});
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert('上传失败')
alert("status"+XMLHttpRequest.status);
alert("readyState"+XMLHttpRequest.readyState);
alert("textStatus"+textStatus);
}
});
}
</script>
</html>
