当使用文本编辑的时候，首先会使用 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;//兼容写法，优先取 filesif(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 和 复制图片显示并上传
原文地址：https://www.cnblogs.com/muamaker/p/10270824.html