安卓下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

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