自定义插入视频

编辑器默认情况下用 <video> 插入视频,如下图。

自定义插入视频 - 图1

<video> 不一定能满足所有人的需求,此时你可以通过 editor.config.customInsertVideo 自定义插入视频的形式。

例如,你需要使用西瓜视频插件,来插入视频,代码如下:

  1. // 现在在 html 引入 <script src="//cdn.jsdelivr.net/npm/xgplayer@2.9.6/browser/index.js" type="text/javascript"></script> 具体引入方式参考插件官方文档
  2. editor.config.customInsertVideo = function (videoUrl) {
  3. // videoUrl 是返回的视频地址
  4. // 往编辑器插入 html 内容
  5. editor.cmd.do(
  6. 'insertHTML',
  7. `<p>
  8. <p contenteditable=false id="mse" style="max-width:100%"></p>
  9. </p>`
  10. )
  11. // 初始化视频
  12. new Player({
  13. id: 'mse',
  14. url: videoUrl
  15. });
  16. }

editor.cmd.do 可参考 常见 API