最近项目经常遇到定制化开发上传视频的需求,现在一些通用的视频基本不满足需求。
这篇文字记录一下遇到的问题和学到的知识。
前端常见的编辑器一般都不支持上传视频
ueditor除外,但现在还没看到ueEditor在React项目中使用。
插入视频解决方案
在编辑器值中插入html的video标签 poster用于设置视频封面
<video src="" poster=""></video>
插入自定义内容
比如插入一段HTML
原理,先拼装好html,调用编辑器API将HTML插入。
本质是执行了document.execCommand(MDN链接)
其中的参数可以设置包括加粗(bold), 插入图片(insertImage)
自定义内容的话,insertHTML可以插入HTML。
之前还考虑过将一段html复制到剪切板,通过paste命令将自定义的一段HTML拷贝到编辑器中。
关键问题,插入后,怎么作为整体处理,删除一起删除,按回车会(或不会)生成同一个相同的块.
考虑将插入的一段HTML最外层设置成contentEditable=false,可以使整段插入的HTML不能编辑。 但在回车或删除时,会遇到无法删除等问题。
现在的编辑器机制都是通过修改div的contentEditable=true来实现插入HTML。
编辑器防止xss代码攻击,使用sanitize-html解决