<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
body,html{
text-align: center;
}
#editDiv{
width:1000px;
display: inline-block;
height: 800px;
background:#fff;
border-radius:10px;
line-height: 20px;
padding:10px;
font-size: 14px;
color:#666;
resize: none;
outline: none;
overflow-y: scroll;
}
#editDiv{
border:1px solid #333;
border-color:rgba(169,169,169,1);
text-align: left;
}
</style>
</head>
<body>
<div id="editDiv" contenteditable="true" autofocus="autofocus">
</div>
</body>
<script>
document.querySelector('#editDiv').addEventListener('paste',function(e){
var cbd = e.clipboardData;
var ua = window.navigator.userAgent;
// 如果是 Safari 直接 return
if ( !(e.clipboardData && e.clipboardData.items) ) {
return ;
}
// Mac平台下Chrome49版本以下 复制Finder中的文件的Bug Hack掉
if(cbd.items && cbd.items.length === 2 && cbd.items[0].kind === "string" && cbd.items[1].kind === "file" &&
cbd.types && cbd.types.length === 2 && cbd.types[0] === "text/plain" && cbd.types[1] === "Files" &&
ua.match(/Macintosh/i) && Number(ua.match(/Chrome\/(\d{2})/i)[1]) < 49){
return;
}
for(var i = 0; i < cbd.items.length; i++) {
var item = cbd.items[i];
if(item.kind == "file"){
var blob = item.getAsFile();
if (blob.size === 0) {
return;
}
// blob 就是从剪切板获得的文件 可以进行上传或其他操作
/*-----------------------与后台进行交互 start-----------------------*/
/*var data = new FormData();
data.append('discoverPics', blob);
$.ajax({
url: '/discover/addDiscoverPicjson.htm',
type: 'POST',
cache: false,
data: data,
processData: false,
contentType: false,
success:function(res){
var obj = JSON.parse(res);
var wrap = $('#editDiv');
var file = obj.data.toString();
var img = document.createElement("img");
img.src = file;
wrap.appendChild(img);
},error:function(){
}
})*/
/*-----------------------与后台进行交互 end-----------------------*/
/*-----------------------不与后台进行交互 直接预览start-----------------------*/
var reader = new FileReader();
var imgs = new Image();
imgs.file = blob;
reader.onload = (function(aImg) {
return function(e) {
aImg.src = e.target.result;
};
})(imgs);
reader.readAsDataURL(blob);
document.querySelector('#editDiv').appendChild(imgs);
/*-----------------------不与后台进行交互 直接预览end-----------------------*/
}
}
}, false);
</script>
</html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
body,html{
text-align: center;
}
#editDiv{
width:1000px;
display: inline-block;
height: 800px;
background:#fff;
border-radius:10px;
line-height: 20px;
padding:10px;
font-size: 14px;
color:#666;
resize: none;
outline: none;
overflow-y: scroll;
}
#editDiv{
border:1px solid #333;
border-color:rgba(169,169,169,1);
text-align: left;
}
</style>
</head>
<body>
<div id="editDiv" contenteditable="true" autofocus="autofocus">
</div>
</body>
<script>
document.querySelector('#editDiv').addEventListener('paste',function(e){
var cbd = e.clipboardData;
var ua = window.navigator.userAgent;
// 如果是 Safari 直接 return
if ( !(e.clipboardData && e.clipboardData.items) ) {
return ;
}
// Mac平台下Chrome49版本以下 复制Finder中的文件的Bug Hack掉
if(cbd.items && cbd.items.length === 2 && cbd.items[0].kind === "string" && cbd.items[1].kind === "file" &&
cbd.types && cbd.types.length === 2 && cbd.types[0] === "text/plain" && cbd.types[1] === "Files" &&
ua.match(/Macintosh/i) && Number(ua.match(/Chrome\/(\d{2})/i)[1]) < 49){
return;
}
for(var i = 0; i < cbd.items.length; i++) {
var item = cbd.items[i];
if(item.kind == "file"){
var blob = item.getAsFile();
if (blob.size === 0) {
return;
}
// blob 就是从剪切板获得的文件 可以进行上传或其他操作
/*-----------------------与后台进行交互 start-----------------------*/
/*var data = new FormData();
data.append('discoverPics', blob);
$.ajax({
url: '/discover/addDiscoverPicjson.htm',
type: 'POST',
cache: false,
data: data,
processData: false,
contentType: false,
success:function(res){
var obj = JSON.parse(res);
var wrap = $('#editDiv');
var file = obj.data.toString();
var img = document.createElement("img");
img.src = file;
wrap.appendChild(img);
},error:function(){
}
})*/
/*-----------------------与后台进行交互 end-----------------------*/
/*-----------------------不与后台进行交互 直接预览start-----------------------*/
var reader = new FileReader();
var imgs = new Image();
imgs.file = blob;
reader.onload = (function(aImg) {
return function(e) {
aImg.src = e.target.result;
};
})(imgs);
reader.readAsDataURL(blob);
document.querySelector('#editDiv').appendChild(imgs);
/*-----------------------不与后台进行交互 直接预览end-----------------------*/
}
}
}, false);
</script>
</html>