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兼容性
兼容性
后續會繼續更新。
歡迎反饋，感謝閱讀！
