当使用文本编辑的时候,首先会使用 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{ 800px; height: 600px; border: 1px solid #ccc; margin: 20px auto; } div img{ max- 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>
效果图
3、当 contenteditable 作为聊天输入框的时候,就需要按住 enter + ctrl 换行, 按 enter 发送消息
$("#textarea").keydown(function($event){ var keycode = window.event ? $event.keyCode : $event.which; var evt = $event || window.event; if (keycode == 13 && !(evt.ctrlKey)) { $event.preventDefault(); return false; } // ctrl+回车-->换行 if (evt.ctrlKey && evt.keyCode == 13) { if (window.getSelection) { var selection = window.getSelection(), range = selection.getRangeAt(0), br = document.createElement("br"), textNode = document.createTextNode("u00a0"); //Passing " " directly will not end up being shown correctly range.deleteContents();//required or not? range.insertNode(br); range.collapse(false); range.insertNode(textNode); range.selectNodeContents(textNode); selection.removeAllRanges(); selection.addRange(range); document.execCommand("delete"); return false; } return false; } });