contenteditable通俗来讲就是一个编辑器。
1.首先简单介绍一下contenteditable
contenteditable 属性是 HTML5 中的新属性。规定是否可编辑元素的内容。
属性值
true 规定可以编辑元素内容。
false 规定无法编辑元素内容。
例：
<p contenteditable="true">这里可编辑</p>
2.进一步理解contenteditable
很多人刚开始接触contenteditable这个属性时都会想到textarea。
textarea支持多行文本输入，满足了我们编辑的很大需求。然而，textarea不能像div一样高度自适应，高度保持不变，内容大于高度时就会出现滚动条。而且textarea只支持文本输入，随着现在越来越关注用户体验，需求也越来越多，很多时候我们需要在编辑区域插入图片，链接，视频。
现在我们有一个很简单的实现办法，就是让一个div标签（高度自适应block元素）模拟编辑器。即在div里加入contenteditable="true"属性；
例：
.contain{
width:400px;
min-height:200px;
max-height:500px;
padding:3px;
border:1px solid #a0b3d6;
font-size:12px;
overflow-x:hidden;
overflow-y:auto;
}
<div class="contain" contenteditable="true"></div>
3.深入理解contenteditable
在设置了contenteditable属性的元素中插入图片，链接，商品等；
.editor{ border: 1px solid #eee; padding: 0 10px; line-height: 1.5em; overflow-y: scroll; max-width:100%;height:500px; }
<ion-content scroll="true" class="padding-10" ng-style="contentMarginBottom" style="z-index: -2;bottom:42px;margin-top:50px;" contenteditable="true" id="editor" class="editor scroll padding-top-bottom-5" class="w-e-text">
<p contenteditable="true">输入你的内容（5字+）</p>
</ion-content>
<div style="background: #f2f2f2;color: #999999;border: 1px solid #cccccc;font-size: 13px;position: fixed;bottom: 0" class="text-align-r width-100"
ng-style="keyboardHeight">
<p id="in_pic" ng-click="imgPush($index)" style="float:left; margin:10px;"> <i class = "icon ion-image" style="font-size:20px; display:block;"></i> </p>
<p id="in_mp3" ng-click="insertLink()" style="float:left;margin:10px;"> <i class = "icon ion-link" style="font-size:20px; display:block;transform:rotate(120deg);"></i> </p>
<p id="in_goods" ng-click="insertpro()" style="float:left;margin:10px;"> 商品 </p>
<span>最多允许上传9张</span>
</div>
$scope.insertpro=function(){
//调用原生插件上传MP3
$('#editor').focus();
$scope.saveRange();
//将返回的结果放到append中插入到文本框
$scope.insert(" <div contenteditable=\"false\" style=\"background:#f2f2f2;padding:10px;height:60px;margin:5px 0;\"><img src=\"http://cdn21.ehaier.com/file/5865ed26b702b753a6942244.png\" style=\"height:40px;max-width:20%;margin-right:10%;float:left;\"/> <p style=\"width:70%;height:40px;overflow:hidden;float:left;\">统帅 空调KFR-35GW/17HAA统帅 空调KFR-35GW/17HAA21ATU1套机统帅 空调KFR-35GW/17HAA21ATU1套机统帅 空调KFR-35GW/17HAA21ATU1套机21ATU1套机</p></div></br>")
}
var _range;
$scope.saveRange=function(){
var selection= window.getSelection ? window.getSelection() : document.selection;
var range= selection.createRange ? selection.createRange() : selection.getRangeAt(0);
_range = range;
}
$('#editor').focus();
$scope.saveRange()
$scope.insert=function(str){
if (!window.getSelection){
$('#editor').focus();
var selection= window.getSelection ? window.getSelection() : document.selection;
var range= selection.createRange ? selection.createRange() : selection.getRangeAt(0);
range.pasteHTML(str);
range.collapse(false);
range.select();
}else{
$('#editor').focus();
var selection= window.getSelection ? window.getSelection() : document.selection;
selection.addRange(_range);
range = _range;
range.collapse(false);
var hasR = range.createContextualFragment(str);
var hasR_lastChild = hasR.lastChild;
while (hasR_lastChild && hasR_lastChild.nodeName.toLowerCase() == "br" && hasR_lastChild.previousSibling && hasR_lastChild.previousSibling.nodeName.toLowerCase() == "br") {
var e = hasR_lastChild;
hasR_lastChild = hasR_lastChild.previousSibling;
hasR.removeChild(e)
}
range.insertNode(hasR);
if (hasR_lastChild) {
range.setEndAfter(hasR_lastChild);
range.setStartAfter(hasR_lastChild)
}
selection.removeAllRanges();
selection.addRange(range)
}
}
此处还涉及到一个window.getSelection知识点，在接下来的文章会详细介绍。
4.contenteditable其他知识点
让contenteditable元素只能输入纯文本
（1）css控制法
一个div元素，要让其可编辑，contenteditable属性是最常用方法，CSS中也有属性可以让普通元素可读写。
user-modify.
支持属性值如下：
user-modify: read-only;
user-modify: read-write;
user-modify: write-only;//可以输入富文本
user-modify: read-write-plaintext-only;//只能输入纯文本
read-write和read-write-plaintext-only会让元素表现得像个文本域一样，可以focus以及输入内容
（2）contenteditable控制法
contenteditable="plaintext-only"
"plaintext-only"可以让编辑区域只能键入纯文本
*注意：目前仅仅是Chrome浏览器支持比较好的
5.contenteditable兼容性
兼容性
后续会继续更新。
欢迎反馈，感谢阅读！
