视频元素在富文本编辑器中的光标问题

视频元素在富文本编辑器中的光标问题

视频元素插入到富文本编辑器后，光标出现在下方，按退格键会删除视频。原因是视频元素启用了交互控件（controls），被视为可聚焦的块级元素，而图片元素被当作原子内联内容（类似一个字符），浏览器对其有特殊的光标处理规则。

解决方案

方法一：禁用视频的可编辑性并添加零宽空格
为视频元素添加contenteditable="false"属性，并在其后插入零宽空格占位符。

<video controls contenteditable="false"></video><span>&#8203;</span>

方法二：使用figure包裹视频并添加空段落
将视频包裹在figure标签中，并在其后紧跟一个空段落。

<figure>
  <video controls></video>
</figure>
<p><br></p>

方法三：内联显示视频并添加零宽空格
将视频设置为内联块级元素，并在其后添加零宽空格。

<video controls style="display:inline-block;"></video><span>&#8203;</span>

实现细节

• 零宽空格（​）是一个不可见的占位符，用于确保光标可以停留在视频右侧。
• **contenteditable="false"**禁止视频元素被直接编辑，避免退格键误删。
• figure标签语义化包裹视频，适合复杂内容场景。
• 内联块级显示将视频模拟为类似图片的行为，但需注意控件交互可能受限。

推荐方案

对于需要保留视频交互性的场景，推荐方法二（figure+空段落），既保持语义清晰，又能避免光标问题。若需简化实现，方法一或方法三亦可快速解决问题。