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>用户之后放置空格可以将插入符号放在音频元素之后

＆＃13;

<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>

＆＃13;

Answer 2

我找到了解决方案。它类似于MarcosPérezGude的答案，但空格应该在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>

唯一需要注意的是，如果您在编辑时删除空格，它将会生效。

如何在contenteditable div中制作可移动音频元素？

2 个答案: