簡書的web編輯器讓人感覺最驚艷的功能之一就是可以直接復制圖片粘貼到瀏覽器里面
其實原理比較簡單尘执，就是復制了圖片的base64信息放到img標簽中
傳統(tǒng)的web編輯器表悬，如ckeditor都是圍繞<textarea>做文章蟆沫，最近發(fā)現(xiàn)一款編輯器summernote，聽名字是不是就很小清新
其實他能做的事情還有很多.......
這里只演示了使用onImageUpload方法將圖片上傳到七牛云服務器
仔細看了他官網后簡直像是發(fā)現(xiàn)了一個新世界.......
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 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 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"/> 發(fā)表',
tooltip: 'shareArticle',
click: function () {
alert('發(fā)表文章');
}
});
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主巍，無意中發(fā)現(xiàn)簡書編輯器的一個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>
