Как сделать съемный аудиоэлемент в contenteditable div?

Question

У меня есть div с contenteditable. Я могу вставить любой текст или изображение, а затем удалить его или перемещаться по нему. Как я могу получить абзац с элементом audio, который будет работать так же?

<div contenteditable="true"> 
 
    <p> 
 
    Hello 
 
    </p> 
 
    <p> 
 
    <img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437"/> 
 
    </p> 
 
    <p> 
 
    <audio controls> 
 
     <source src="http://freewavesamples.com/files/Yamaha-TG100-Whistle-C5.wav"/> 
 
    </audio> 
 
    </p> 
 
</div>

В примере, вы не можете переместить курсор за последним p элемента, вы не можете удалить его с любым ключом.

Answer 1

я нашел решение. Это похоже на ответ Маркоса Переса Гуда, но пространство должно быть в пределах p элемента, и должен быть один на передней панели, если элемент audio является первым в div.

<div contenteditable="true"> 
 
    <p> 
 
    Hello 
 
    </p> 
 
    <p> 
 
    <img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437"/> 
 
    </p> 
 
    <p> 
 
    &nbsp; 
 
    <audio controls> 
 
     <source src="http://freewavesamples.com/files/Yamaha-TG100-Whistle-C5.wav"/> 
 
    </audio> 
 
    &nbsp; 
 
    </p> 
 
    
 
</div>

Единственное ограничение в том, что он будет тормозить, если вы удалите пространство во время редактирования.

Answer 2

Если поставить пробел после </p> пользователь может поместить каретку после звукового элемента

<div contenteditable="true"> 
 
    <p> 
 
    Hello 
 
    </p> 
 
    <p> 
 
    <img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437"/> 
 
    </p> 
 
    <p> 
 
    <audio controls> 
 
     <source src="http://freewavesamples.com/files/Yamaha-TG100-Whistle-C5.wav"/> 
 
    </audio> 
 
    </p> 
 
    &nbsp; 
 
</div>