这周工作中,遇到了一个文章编辑的功能需求,需要支持图片黏贴上传并预览,但是使用我们公司自己封装的富文本编辑器,发现居然没有黏贴上传图片的功能,额。。。心想,公司真是该有的功能没有,不该有的功能一大堆。。。没办法,只能百度自己实现如何实现黏贴上传图片功能。
(1)html页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片黏贴上传</title>
<style>
#content {
margin:0 auto;
width:600px;
height:600px;
border:1px solid black;
}
</style>
</head>
<body>
<!-- 内容区域 -->
<div id="content" contenteditable="true">
</div>
</body>
</html>
(2)添加监听事件
监听黏贴操作,即:ctrl+v的动作,js里面是paste事件。
<script>
var content = document.getElemmentById("content")
// 添加监听事件paste
content.addEventListener('paste', function (e){
// 具体操作
});