视频元素在富文本编辑器中的光标问题
视频元素插入到富文本编辑器后，光标出现在下方，按退格键会删除视频。原因是视频元素启用了交互控件（controls），被视为可聚焦的块级元素，而图片元素被当作原子内联内容（类似一个字符），浏览器对其有特殊的光标处理规则。
解决方案
方法一：禁用视频的可编辑性并添加零宽空格
为视频元素添加contenteditable="false"属性，并在其后插入零宽空格占位符。
html
<video controls contenteditable="false"></video><span>​</span>方法二：使用figure包裹视频并添加空段落
将视频包裹在figure标签中，并在其后紧跟一个空段落。
html
<figure>
<video controls></video>
</figure>
<p><br></p>方法三：内联显示视频并添加零宽空格
将视频设置为内联块级元素，并在其后添加零宽空格。
html
<video controls style="display:inline-block;"></video><span>​</span>实现细节
- 零宽空格 （
​）是一个不可见的占位符，用于确保光标可以停留在视频右侧。 - **
contenteditable="false"**禁止视频元素被直接编辑，避免退格键误删。 figure标签语义化包裹视频，适合复杂内容场景。- 内联块级显示将视频模拟为类似图片的行为，但需注意控件交互可能受限。
推荐方案
对于需要保留视频交互性的场景，推荐方法二 （figure+空段落），既保持语义清晰，又能避免光标问题。若需简化实现，方法一 或方法三亦可快速解决问题。