关于 div 的 contenteditable 使用，placeholder 和 复制图片显示并上传

Posted muamaker

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了关于 div 的 contenteditable 使用，placeholder 和 复制图片显示并上传相关的知识，希望对你有一定的参考价值。

当使用文本编辑的时候，首先会使用 textarea ,但是，这个里面不能加入其它标签，也就是不能富文本化。 于是可以使用 contenteditable 

就是给 div 加上该属性。就变得丰富起来。使用的时候，发现有两个问题。

1、placeholder 无法正常使用，解决办法，是加上一段css：

.con:empty:before{
		    content: attr(placeholder);
		    color:#bbb;
		}
		.con:focus:before{
		    content:none;
		}

 

2、复制，或者用 qq 微信 截图只会，在编辑器内，按 ctr+v 不能将图片复制到编辑器内，解决办法是 监听 事件  paste， 这个事件，目前来说兼容不是很好，但是 谷歌 火狐 等都能正常使用

 下面给出完整代码：

<!DOCTYPE html>
<html lang="zh">
<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>Document</title>
	
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
		div{
			width: 800px;
			height: 600px;
			border: 1px solid #ccc;
			margin:  20px auto;
		}
		div img{
			max-width: 80%;
		}
		.con:empty:before{
		    content: attr(placeholder);
		    color:#bbb;
		}
		.con:focus:before{
		    content:none;
		}
	</style>
</head>
<body>
	<div class="con" contenteditable="true" placeholder="请输入描述内容..."  id="edit"></div>
</body>

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
 
//document.execCommand(‘InsertImage‘, false, filePath);

$("#edit").on("paste",function(e){
	var  d = e.originalEvent;
	if(d&&d.clipboardData) {
		var clipboardData = d.clipboardData;
		//兼容写法，优先取 files
		if(clipboardData.files && clipboardData.files.length > 0){
			console.log("-------files----");
			mapFile(clipboardData.files);
			return ;
		}	
		if (clipboardData.items && clipboardData.items.length > 0) {
			console.log("------items-----------")
			mapFile(clipboardData.items);
            return ;
        }

		
	}
});

function mapFile(files){
	for(var i = 0; i < files.length; i++){
		var c = files[i];
		if(c.type && c.type.split("/")[0] == "image"){
			getBase64(files[i]).then(function(ret){
				document.execCommand("insertImage",false,ret);
			}).catch(function(ret){});
		}
	}
}

function getBase64(img) {
	return new Promise(function(resolve,reject){
		  const reader = new FileReader();
		  reader.addEventListener(‘load‘, () =>{resolve(reader.result)});
		  reader.readAsDataURL(img);
	})

}

	

</script>
</html>

　　

　效果图

技术分享图片

 

　

以上是关于关于 div 的 contenteditable 使用，placeholder 和 复制图片显示并上传的主要内容，如果未能解决你的问题，请参考以下文章

如何在contenteditable div中删除非contenteditable div

为 contenteditable div 中的 div 启用调整大小

双击内部带有 contenteditable 的 div 并且 iframe 禁用 div

div的contenteditable和placeholder蹦出的火花

Contenteditable div在离子iOS应用中不可编辑

禁用 UIWebView 中 contenteditable div 的自动大写