安卓下webview下contenteditable插入一个div子元素，这个子元素也变成了可编辑？

Question

一个混合开发项目，需要做一个简易的富文本编辑框，用的contenteditable来实现，当我在这个可编辑div内插入一个div子元素，那么这个子元素也变成可编辑的了，即使我在子元素上加上属性contenteditable="false"在安卓的web view下这个子元素仍是可编辑的。而在pc端的chrome浏览器下，这个子元素的确是不可编辑了，但连同父元素也变得不可编辑了。。。求解决方案。
代码如下：
可编辑div：

 <div id="editableDiv" tabindex="10" autofocus="true" class="editableDiv needsclick" contenteditable="true"></div>

---

插入不可编辑的子元素：

 document.execCommand('insertHTML',false,'<div class="chatRecord" 
 contenteditable="false" data-srcId="" data-type="3">'
       +'<div class="chatPosition">'
         +'<img src="./img/avtar.png"/>'
         +'<div class="chatPosition-right chatAudio">'
           +'<span >聊天记录</span>'
         +'</div>'
       +'</div>'
       +'</div>');

Answer 1

你把子元素放大外面去，样式能解决的都是小问题；你想想你放在可编辑框的里面，做删除操作岂不是把子元素删掉了。

Answer 2

我尝试使用css3的user-modify属性，把子元素限制为read-only,居然会影响父元素的user-modify也变得不可编辑了，即使我给父元素声明user-modify为read-write;也无效。

document.execCommand('insertHTML',false,'<div style="width:90%;height:4rem;background:pink;z-index:100;-webkit-user-modify:read-only;">测试啊啊啊啊啊</div>');

----------------------------------------分割线----------------------------------------
在安卓下，再给子元素设置display属性为inline-block就可以了。不过在IOS下还会存在问题，当我想在这个子元素外面再继续添加文字时，点击空白处，光标会聚焦到那个子元素的文字最后，虽然此时该子元素仍是不可编辑的，但我期望的是光标应该聚焦在这个子元素的后面。在安卓下是能正常的。