Отредактируйте текст с помощью Ctrl-A (Выбрать все), удалив все дочерние элементы

Question

В div с contenteditable="true", если я выделю весь текст с помощью 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>

скрипка: http://jsfiddle.net/7jV4f/1/

красные кружки (дочерние элементы contenteditable div) в приведенном выше примере будут удалены, если текст редактируется с помощью Ctrl-A.

есть идеи как это предотвратить?

спасибо: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 -->

Answer 2

Для тега кода вы можете установить стиль "display: block":

<pre style="display: block"></pre>