编辑器掉坑记

147 阅读1分钟

最近项目经常遇到定制化开发上传视频的需求,现在一些通用的视频基本不满足需求。

这篇文字记录一下遇到的问题和学到的知识。

前端常见的编辑器一般都不支持上传视频

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