editormd支持上传视频

editormd是一款非常不错的Markdown在线编辑器。

最近需要把该编辑器集成到项目中，需要上传图片和视频，editormd自带的image-dialog插件是已经支持上传图片了，但是从官网上没找到视频上传的插件。于是想对image-dialog插件二次开发，让该插件同时支持上传图片和视频。

当然可以从网上找下其他人有没有做过类似的插件，不过没有这样做，因为自己做一个也不难。也可以新作一个专门用于视频上传的插件，需要在工具栏上新增图标，考虑到工具栏上已经很多图标了，还是合并在一起，更简洁。

下面是记录的让editormd支持上传视频的步骤，主要修改的文件是plugins/image-dialog目录的image-dialog.js。由于本人不是专业的前端，如果不当之处，还请多多指正！

1. 支持”.mp4”文件

image-dialog插件会对文件的后缀名进行判断，如果不符合要求就不会处理。

为了让其上传”.mp4”格式的文件，需要在editormd初始化的配置对象中，把imageFormats字段的值加上 “mp4”，添加后如下：

imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp", "mp4"],

2.修改上传对话框上的文字

image-dialog.js中，与上传对话框上说明文字相关的变量为 imageLang。

打开image-dialog.js，在var dialogContent = ( (settings.imageUpload) ....这段代码前面加上：

imageLang.title = "添加图片/视频";
imageLang.url = "图片/视频地址";
imageLang.alt = "图片/视频描述";
imageLang.link = "图片/视频链接";

3. 让文件选择对话框支持显示视频文件

默认情况下，image-dialog 打开的文件选择对话框打开时，默认筛选出的是图片文件，既然我们需要上传视频，就要让它把视频文件也筛选出来。如下：
打开image-dialog.js，还是找到var dialogContent = ( (settings.imageUpload) ....这部分代码，找到accept=\"image/*\"这部分，改为accept=\"image/*,video/*\"。

4.调整上传对话框样式

由于上传对话框上的文字字数增加了，对话框的样式有些不好看，需要的话可以用jQuery动态调整下。

打开image-dialog.js，找到这行代码var fileInput = dialog.find("[name=\"" + classPrefix + "image-file\"]");，在其前面插上如下代码：

$(".editormd-image-dialog").css({'width': '500px'});
$(".editormd-dialog-container").css({'top': '-18px'});
$(".editormd-form label").css({'width': '105px'});

5.生成视频的HTML代码

视频上传成功后，点击”确定“按钮，需要生成视频的HTML代码片段。

打开image-dialog.js，找到这一部分代码：

dialog = this.createDialog({
  title      : imageLang.title,
  width      : (settings.imageUpload) ? 465 : 380,
  height     : 254,
  name       : dialogName,
  content    : dialogContent,
  mask       : settings.dialogShowMask,
  drag       : settings.dialogDraggable,
  lockScreen : settings.dialogLockScreen,
  maskStyle  : {
    opacity         : settings.dialogMaskOpacity,
    backgroundColor : settings.dialogMaskBgColor
  },
  buttons : {
    enter : [lang.buttons.enter, function() {
      var url  = this.find("[data-url]").val();
      var alt  = this.find("[data-alt]").val();
      var link = this.find("[data-link]").val();
      if (url === "")
      {
        alert(imageLang.imageURLEmpty);
        return false;
      }
      ...
    }
  }
}

在上面代码的省略号处，插入如下代码：

if (url.endsWith(".mp4")) {
  var videoHtml = '<video class="video-js" controls preload="auto" width="100%" poster="" data-setup=\'{"aspectRatio":"16:9"}\'>\
<source src="' + url + '" type=\'video/mp4\' >\
 <p class="vjs-no-js">\
To view this video please enable JavaScript\
</p>\
</video>';
  videoHtml = "\n" + videoHtml + "\n";
  cm.replaceSelection(videoHtml);
  cm.setCursor(cursor.line, cursor.ch + 2);
  this.hide().lockScreen(false).hideMask();
  return false;
}

其中，最后3行代码与处理图片上传结果的代码是一样的，因为代码行数不多，也不想改动后面的代码，所以就多写了几行。否则，需要把处理图片上传结果的代码放在该if语句的else部分。

6.后端支持视频文件上传

这个就不用多讲了，自己发挥。