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

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