当使用文本编辑的时候，首先会使用 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;
}
});