contenteditable属性

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兼容性

兼容性

后续会继续更新。
欢迎反馈，感谢阅读！