使用div + 剪贴板事件 = 简易编辑器
2018-11-08 本文已影响0人
自律财富自由
说明：
支持在div内复制粘贴文字，支持像QQ截图，然后粘贴到div框内。
直接放代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>fabric</title>
<style>
#textBox {
width: 400px;
min-height: 20px;
/* max-height: 300px; */
_height: 120px;
margin-left: auto;
margin-right: auto;
padding: 3px;
outline: 0;
border: 1px solid #a0b3d6;
font-size: 12px;
line-height: 24px;
padding: 2px;
word-wrap: break-word;
overflow-x: hidden;
overflow-y: auto;
border-color: rgba(82, 168, 236, 0.8);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
}
</style>
</head>
<body>
<div id="textBox" contenteditable="true">
window.clipBoardContent
</div>
<script>
var textBox = document.getElementById('textBox')
var defaultText = '自定义文本内容';
document.addEventListener("paste", function (e) {
console.log('触发paste事件 e = ', e)
console.log('触发paste事件： = ', e.clipboardData.getData("text"));
var clipboardData = e.clipboardData;
if (!(clipboardData && clipboardData.items)) {//是否有粘贴内容
return;
}
for (var i = 0, len = clipboardData.items.length; i < len; i++) {
var item = clipboardData.items[i];
if (item.kind === "string" && item.type == "text/plain") {
item.getAsString(function (str) {
console.log('文本内容： = ', str)
// str 是获取到的字符串,创建文本框
//处理粘贴的文字内容
textBox.innerHTML += str
})
} else if (item.kind === "file") {//file 一般是各种截图base64数据
var pasteFile = item.getAsFile();
// pasteFile就是获取到的文件
var reader = new FileReader();
reader.onload = function (event) {
var base64Img = event.target.result;
// 将获取到的图片的base64码用来创建img元素，并插入到div内
var img = document.createElement('img')
img.src = base64Img
textBox.appendChild(img)
}; // data url
reader.readAsDataURL(pasteFile);
}
var copy_content = e.clipboardData.getData('text/plain');
}
});
//复制
document.onkeydown = function (e) {
if (e.ctrlKey && e.keyCode == 67) {//ctrl+C
console.log('ctrl c')
function handler(event) {
event.clipboardData.setData('text/plain', defaultText);
document.removeEventListener('copy', handler, true);
event.preventDefault();
}
document.addEventListener('copy', handler, true);
document.execCommand('copy');
}
}
//粘贴
document.onkeydown = function (e) {
if (e.ctrlKey && e.keyCode == 86) {//ctrl+V
console.log('ctrl v = ', e)
function handler(event) {
event.clipboardData.getData('text/plain'); // 获取剪贴板的内容
document.removeEventListener('paste', handler, true);
event.preventDefault();
}
document.addEventListener('paste', handler, true);
document.execCommand('paste');
}
}
</script>
</body>
</html>
