html - 使用 Ctrl-A(全选)删除所有子元素来编辑 contenteditable 文本

Question

在 contenteditable="true"的 div 中，如果我使用 Ctrl-A 选择所有文本，然后键入一些内容，它将删除 div 中的所有子元素，而不仅仅是文本。

例如:

<div id="texteditor" contenteditable="true">
   CTRL-A and Edit Me.

   <div id="topleft-ornament" class="ornament"></div>
   <div id="topright-ornament" class="ornament"></div>
   <div id="bottomleft-ornament" class="ornament"></div>
   <div id="bottomright-ornament" class="ornament"></div>
</div>

fiddle :
http://jsfiddle.net/7jV4f/1/

如果使用 Ctrl-A 编辑文本，则上面示例中的红色圆圈(contenteditable div 的子元素)将被删除。

知道如何预防吗？

谢谢:D

Answer 1

因此，将文本包裹在 div 中并分配 contenteditable归因于该特定元素

<div contenteditable="true">CTRL-A and Edit Me.</div>
<!-- Wrap the text, don't use contenteditable for the parent element -->