contenteditable属性

contenteditable通俗来讲就是一个编辑器。

1.首先简单介绍一下contenteditable

contenteditable 属性是 HTML5 中的新属性。规定是否可编辑元素的内容。
属性值
true 规定可以编辑元素内容。
false 规定无法编辑元素内容。
例：

这里可编辑

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;
}

3.深入理解contenteditable

在设置了contenteditable属性的元素中插入图片，链接，商品等；

.editor{ border: 1px solid #eee;    padding: 0 10px;  line-height: 1.5em;   overflow-y: scroll; max-width:100%;height:500px;  }

 
输入你的内容（5字+）


             
   
             
  
             
 商品 
         
        最多允许上传9张
 

$scope.insertpro=function(){
                 //调用原生插件上传MP3      
          $('#editor').focus();      
          $scope.saveRange();
                 //将返回的结果放到append中插入到文本框
                $scope.insert(" 
 
统帅 空调KFR-35GW/17HAA统帅 空调KFR-35GW/17HAA21ATU1套机统帅 空调KFR-35GW/17HAA21ATU1套机统帅 空调KFR-35GW/17HAA21ATU1套机21ATU1套机
")               
                
             }
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兼容性

兼容性

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