利用base64编码,直接将图片写到帖子里,没有引入jq等三方库,不怕冲突,测试谷歌91、火狐78、Safari15可用,至于用base64的原因主要是因为懒得去看上传的api。。
鉴于网友都说过暴力,提供上传七牛版
阿里懒人版(复制一下两个js到插件中心)感谢
@读书顶个鸟用 提供的上传实例代码
导入网页插件:未命名(当前用户:0,总安装次数:0)
<script src="https://hu60.org/toastui-editor/spark-md5.min.js"></script>
<script src="http://file.hu60.cn/file/hash/js/983c474dc7ba81318d0e030cfda482456052.js?attname=file-hash-js-983c474dc7ba81318d0e030cfda482456052.js"></script>
=======以下是原始 base64版本 ====
懒人版,直接引入js
导入网页插件:未命名(当前用户:0,总安装次数:0)
<script src="http://file.hu60.cn/file/hash/js/130b1799c0b90d26bf160db9db2be9b63520.js?attname=base64.js"></script>
或者复制代码
导入网页插件:未命名(当前用户:0,总安装次数:0)
<script>
document.addEventListener('paste', function (event) {
console.log(event)
var isChrome = false;
if ( event.clipboardData || event.originalEvent ) {
//not for ie11 某些chrome版本使用的是event.originalEvent
var clipboardData = (event.clipboardData || event.originalEvent.clipboardData);
if ( clipboardData.items ) {
// for chrome
var items = clipboardData.items,
len = items.length,
blob = null;
isChrome = true;
//items.length比较有意思,初步判断是根据mime类型来的,即有几种mime类型,长度就是几(待验证)
//如果粘贴纯文本,那么len=1,如果粘贴网页图片,len=2, items[0].type = 'text/plain', items[1].type = 'image/*'
//如果使用截图工具粘贴图片,len=1, items[0].type = 'image/png'
//如果粘贴纯文本+HTML,len=2, items[0].type = 'text/plain', items[1].type = 'text/html'
// console.log('len:' + len);
// console.log(items[0]);
// console.log(items[1]);
// console.log( 'items[0] kind:', items[0].kind );
// console.log( 'items[0] MIME type:', items[0].type );
// console.log( 'items[1] kind:', items[1].kind );
// console.log( 'items[1] MIME type:', items[1].type );
//阻止默认行为即不让剪贴板内容在div中显示出来
//event.preventDefault();
//在items里找粘贴的image,据上面分析,需要循环
for (var i = 0; i < len; i++) {
if (items[i].type.indexOf("image") !== -1) {
// console.log(items[i]);
// console.log( typeof (items[i]));
//getAsFile() 此方法只是living standard firefox ie11 并不支持
blob = items[i].getAsFile();
}
}
if ( blob !== null ) {
var reader = new FileReader();
reader.onload = function (event) {
// event.target.result 即为图片的Base64编码字符串
var base64_str = event.target.result
//可以在这里写上传逻辑 直接将base64编码的字符串上传(可以尝试传入blob对象,看看后台程序能否解析)
uploadImgFromPaste(base64_str, 'paste', isChrome);
}
reader.readAsDataURL(blob);
}
} else {
//for firefox
setTimeout(function () {
//设置setTimeout的原因是为了保证图片先插入到div里,然后去获取值
var imgList = document.querySelectorAll('#tar_box img'),
len = imgList.length,
src_str = '',
i;
for ( i = 0; i < len; i ++ ) {
if ( imgList[i].className !== 'my_img' ) {
//如果是截图那么src_str就是base64 如果是复制的其他网页图片那么src_str就是此图片在别人服务器的地址
src_str = imgList[i].src;
}
}
uploadImgFromPaste(src_str, 'paste', isChrome);
}, 1);
}
} else {
//for ie11
setTimeout(function () {
var imgList = document.querySelectorAll('#tar_box img'),
len = imgList.length,
src_str = '',
i;
for ( i = 0; i < len; i ++ ) {
if ( imgList[i].className !== 'my_img' ) {
src_str = imgList[i].src;
}
}
uploadImgFromPaste(src_str, 'paste', isChrome);
}, 1);
}
})
function uploadImgFromPaste (file, type, isChrome) {
var formData = new FormData();
var ele = document.getElementById("content");
ele.value = ele.value + "《图片:"+ file +",图片》";
}
</script>
视频链接
还是上传到七牛云比较好,不然编辑帖子时不方便
@残缘 远古浏览器就不考虑兼容性问题了