kindeditor编辑器添加H5video标签

最近有需求，要添加上传h5视频功能，因为chrome和移动端不支持播放flash视频

在网上找了相关信息，许多都是乱码的。所以我整理了，重新再发一份相关的吧。

开始

在 kindeditor\plugins 目录下新建目录 htmlfvideo ,新建 htmlfvideo.js

** htmlfvideo.js **

  KindEditor.plugin('htmlfvideo', function (K) {
  var self = this,
    name = 'htmlfvideo',
    lang = self.lang(name + '.'),
    allowHtml5VideoUpload = K.undef(self.allowHtml5VideoUpload, true),
    allowFileManager = K.undef(self.allowFileManager, false),
    formatUploadUrl = K.undef(self.formatUploadUrl, true),
    extraParams = K.undef(self.extraFileUploadParams, {}),
    filePostName = K.undef(self.filePostName, 'imgFile'),
    uploadJson = K.undef(self.uploadJson, self.basePath + 'php/upload_json.php ');
  self.plugin.htmlfvideo = {
    edit: function () {
      var html = [
        '<div style="padding:20px;">',
        //url 
        '<div class="ke-dialog-row">',
        '<label for="keUrl" style="width:60px;">' + lang.url + '</label>',
        '<input class="ke-input-text" type="text" id="keUrl" name="url" va lue="" style="width:160px;" /> &nbsp;',
        '<input type="button" class="ke-upload-button" value="' + lang.upload + '" /> &nbsp;',
        '<span class="ke-button-common ke-button-outer">',
        '<input type="button" class="ke-button-common ke-button" name="vie wServer" value="' + lang.viewServer + '" />',
        '</span>',
        '</div>',
        //width 
        '<div class="ke-dialog-row">', '<label for="keWidth" style="width:60px;">' + lang.width + '</labe l>',
        '<input type="text" id="keWidth" class="ke-input-text ke-input-num ber" name="width" value="550" maxlength="4" />', '</div>',
        //height 
        '<div class="ke-dialog-row">', '<label for="keHeight" style="width:60px;">' + lang.height + '</la bel>',
        '<input type="text" id="keHeight" class="ke-input-text ke-input-nu mber" name="height" value="400" maxlength="4" />', '</div>',
        //autostart 
        '<div class="ke-dialog-row">', '<label for="keAutostart">' + lang.autostart + '</label>', '<input type="checkbox" id="keAutostart" name="autoplay" value="" /> ', '</div>', '<div class="ke-dialog-row">',

        '<label for="atention">注意：</label>',
        '只支持mp4格式视频,转码工具<a href="http://www.pcfreetime.com/CN/dow nload.html">下载</a>,查看<a href="/lib/document/videoAttention.docx">操作说明</a>', '</div>', '</div>'
      ].join('');
      var dialog = self.createDialog({
          name: name,
          width: 450,
          height: 230,
          title: self.lang(name),
          body: html,
          yesBtn: {
            name: self.lang('yes'),
            click: function (e) {
              var url = K.trim(urlBox.val()),
                width = widthBox.val(),
                height = heightBox.val();
              if (url == 'http://' || K.invalidUrl(url)) {
                alert(self.lang('invalidUrl'));
                urlBox[0].focus();
                return;
              }
              if (!/^\d*$/.test(width)) {
                alert(self.lang('invalidWidth'));
                widthBox[0].focus();
                return;
              }
              if (!/^\d*$/.test(height)) {
                alert(self.lang('invalidHeight'));
                heightBox[0].focus();
                return;
              }
              var html = K.mediaImg(self.themesPath + 'common/blank.gif', {
                src: url,
                controls: 'controls', //type : K.mediaType(url), 
                width: width,
                height: height,
                autoplay: autostartBox[0].checked ? 'true' : 'false',
                loop: 'true'
              });
              self.insertHtml(html).hideDialog().focus();
            }
          }
        }),

        div = dialog.div,
        urlBox = K('[name="url"]', div),
        
viewServerBtn = K('[name="viewServer"]', div),
        widthBox = K('[name="width"]', div),
        heightBox = K('[name="height"]', div),
        autostartBox = K('[name="autoplay"]', div);
      urlBox.val('http://');

      if (allowHtml5VideoUpload) {
        var uploadbutton = K.uploadbutton({
          button: K('.ke-upload-button', div)[0],
          fieldName: filePostName,
          extraParams: extraParams,
          url: K.addParam(uploadJson, 'dir=htmlfvideo'), //上传路径
          afterUpload: function (data) {
            dialog.hideLoading();
            if (data.error === 0) {
              var url = data.url;
              if (formatUploadUrl) {
                url = K.formatUrl(url, 'absolute');
              }
              urlBox.val(url);
              if (self.afterUpload) {
                self.afterUpload.call(self, url, data, name);
              }
              alert(self.lang('uploadSuccess'));
            } else {
              alert(data.message);
            }
          },
          afterError: function (html) {
            dialog.hideLoading();
            self.errorDialog(html);
          }
        });
        uploadbutton.fileBox.change(function (e) {
          dialog.showLoading(self.lang('uploadLoading'));
          uploadbutton.submit();
        });
      } else {
        K('.ke-upload-button', div).hide();
      }

      if (allowFileManager) {
        viewServerBtn.click(function (e) {
          self.loadPlugin('filemanager', function () {
            self.plugin.filemanagerDialog({
              viewType: 'LIST',
              dirName: 'htmlfvideo',
              clickFn: function (url, title) {
                if (self.dialogs.length > 1) {
                  K('[name="url"]', div).val(url);
                  if (self.afterSelectFile) {
                    self.afterSelectFile.call(self, url);
                  }
                  self.hideDialog();
                }
              }
            });
          });
        });
      } else {
        viewServerBtn.hide();
      }

      var img = self.plugin.getSelectedhtmlfvideo();
      if (img) {
        var attrs = K.mediaAttrs(img.attr('data-ke-tag'));
        urlBox.val(attrs.src);
        widthBox.val(K.removeUnit(img.css('width')) || attrs.width || 0);
        heightBox.val(K.removeUnit(img.css('height')) || attrs.height || 0);
        autostartBox[0].checked = (attrs.autoplay === 'true');
      }
      urlBox[0].focus();
      urlBox[0].select();
    },
    'delete': function () {
      self.plugin.getSelectedhtmlfvideo().remove(); // [IE] 删除图片后立即点击图片按钮出错 
      self.addBookmark();
    }
  };
  self.clickToolbar(name, self.plugin.htmlfvideo.edit);
});

---

kindeditor\themes\default 目录下修改 default.css ，目的是显示播放器的图标，图片在 default.png 里面，有需要可以新增

在 .ke-icon-media 下添加样式

.ke-icon-htmlfvideo{ 
    background-position:0px -528px; 
    width:16px; 
    height:16px; 
}

---

kindeditor\lang\zh_CN.js, 加上相关弹窗信息。

htmlfvideo : 'html5视频', 
'htmlfvideo.url' : 'URL', 
'htmlfvideo.width' : '宽度', 
'htmlfvideo.height' : '高度', 
'htmlfvideo.upload' : '上传', 
'htmlfvideo.viewServer' : '文件空间', 
'htmlfvideo.autostart' : '自动播放',

---

kindeditor\php\upload_json.php $ext_arr 变量修改

$ext_arr = array(
    'image' => array('gif', 'jpg', 'jpeg', 'png', 'bmp'),
    'flash' => array('swf', 'flv'),
    'htmlfvideo' => array('mp4','mpg4','ogg', 'WebM'),
    'media' => array('swf', 'flv', 'mp3', 'mp4', 'wav', 'wma', 'wmv', 'mid', 'avi', 'mpg', 'asf', 'rm', 'rmvb'),
    'file' => array('doc', 'docx', 'xls', 'xlsx', 'ppt', 'htm', 'html', 'txt', 'zip', 'rar', 'gz', 'bz2'),
);

kindeditor.js修改

找到 var _INLINE_TAG_MAP = _toMap('a 开头的，修改为

var _INLINE_TAG_MAP = _toMap('a,abbr,acronym,b,basefont,bdo,big,br,button,cite,code,del,dfn,em,font,i,img,input,ins,kbd,label,map,q,s,samp,select,small,span,strike,strong,sub,sup,textarea,tt,u,var,video'),
    _BLOCK_TAG_MAP = _toMap('address,applet,blockquote,body,center,dd,dir,div,dl,dt,fieldset,form,frameset,h1,h2,h3,h4,h5,h6,head,hr,html,iframe,ins,isindex,li,map,menu,meta,noframes,noscript,object,ol,p,pre,script,style,table,tbody,td,tfoot,th,thead,title,tr,ul,video'),
    _SINGLE_TAG_MAP = _toMap('area,base,basefont,br,col,frame,hr,img,input,isindex,link,meta,param,embed'),
    _STYLE_TAG_MAP = _toMap('b,basefont,big,del,em,font,i,s,small,span,strike,strong,sub,sup,u'),
    _CONTROL_TAG_MAP = _toMap('img,table,input,textarea,button,video'),
    _PRE_TAG_MAP = _toMap('pre,style,script'),
    _NOSPLIT_TAG_MAP = _toMap('html,head,body,td,tr,table,ol,ul,li'),
    _AUTOCLOSE_TAG_MAP = _toMap('colgroup,dd,dt,li,options,p,td,tfoot,th,thead,tr'),
    _FILL_ATTR_MAP = _toMap('checked,compact,declare,defer,disabled,ismap,multiple,nohref,noresize,noshade,nowrap,readonly,selected'),
    _VALUE_TAG_MAP = _toMap('input,button,textarea,select');

根据教程主要还是在 _INLINE_TAG_MAP , _BLOCK_TAG_MAP, _CONTROL_TAG_MAP里面添加video即可

---

找到 items : 数组，添加 video

items : [
        'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste',
        'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
        'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
        'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
        'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
        'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|','image', 'multiimage',
        'flash', 'media', 'htmlfvideo', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',
        'anchor', 'link', 'unlink', '|', 'about'
    ],

---

在 items 下方找到 htmlTags : 数组， 同样添加

video: ['src', 'width', 'height', 'loop', 'autoplay', 'controls'],

---

找到 _mediaType 函数， 添加条件，

function _mediaType(src) {
    if (/\.(rm|rmvb)(\?|$)/i.test(src)) {
        return 'audio/x-pn-realaudio-plugin';
    }
    if (/\.(swf|flv)(\?|$)/i.test(src)) {
        return 'application/x-shockwave-flash';
    }
    if(/\.(mp4|ogg|mpg4)(\?|$)/i.test(src)){ 
    return "htmlfvideo"; 
  } 
    return 'video/x-ms-asf-plugin';
}

在下方新增函数 _htmlfvideo

function _htmlfvideo(attrs){ 
  var html = '<video ';
   _each(attrs, function(key, val) { 
     html += key + '="' + val + '" '; 
    }); 
    html += '></video>'; 
  return html; 
}

同样 _mediaImg 函数同样新增判断条件

function _mediaImg(blankPath, attrs) {
    var width = attrs.width,
        height = attrs.height,
        type = attrs.type || _mediaType(attrs.src),
        srcTag = _mediaEmbed(attrs),
        style = '';
    if(type == "htmlfvideo"){ 
    srcTag = _htmlfvideo(attrs); 
  }
    if (/\D/.test(width)) {
        style += 'width:' + width + ';';
    } else if (width > 0) {
        style += 'width:' + width + 'px;';
    }
    if (/\D/.test(height)) {
        style += 'height:' + height + ';';
    } else if (height > 0) {
        style += 'height:' + height + 'px;';
    }
    var html = '<img class="' + _mediaClass(type) + '" src="' + blankPath + '" ';
    if (style !== '') {
        html += 'style="' + style + '" ';
    }
    html += 'data-ke-tag="' + escape(srcTag) + '" alt="" />';
    return html;
}

---

找到 K.mediaEmbed = _mediaEmbed;, 添加K.htmlfvideo = _htmlfvideo;方法。

---

找到 img.ke-flash , 下方新增

'img.ke-htmlfvideo {',
  ' border:1px solid #AAA;',
  ' background-image:url(' + themesPath + 'common/media.gif);',
  ' background-position:center center;',
  ' background-repeat:no-repeat;',
  ' width:100px;',
  ' height:100px;',
  '}',

---

找到 self.plugin.getSelectedLink , 下方新增

self.plugin.getSelectedhtmlfvideo = function() { 
  return _getImageFromRange(self.edit.cmd.range, function(img) { 
    return img[0].className == 'ke-htmlfvideo'|| img[0].className == 'ke-rm'; }); 
};

下方 _each('link,image,flash,media,anchor')' 方法添加 htmlfvideo,即
_each('link,image,flash,media,anchor,htmlfvideo')

---

找到 .replace(/<img[^>]*class="?ke-(flash|rm|media)"?[^>]*,
新增修改为

.replace(/<img[^>]*class="?ke-(flash|htmlfvideo|rm|media)"?[^>]*>/ig,  function(full) {
  var imgAttrs = _getAttrList(full);
  var styles = _getCssList(imgAttrs.style || '');
  var attrs = _mediaAttrs(imgAttrs['data-ke-tag']);
  var width = _undef(styles.width, '');
  var height = _undef(styles.height, '');
  if (/px/i.test(width)) {
    width = _removeUnit(width);
  }
  if (/px/i.test(height)) {
    height = _removeUnit(height);
  }
  attrs.width = _undef(imgAttrs.width, width);
  attrs.height = _undef(imgAttrs.height, height);
  if (imgAttrs.class == "ke-htmlfvideo") {
    return _htmlfvideo(attrs);
  } else {
    return _mediaEmbed(attrs);
  }
})
.replace(/<video[^>]*src="([^"]+)"[^>]*>(?:<\/video>)?/ig, function(full) {
  var attrs = _getAttrList(full);
  attrs.src = _undef(attrs.src, '');
  attrs.width = _undef(attrs.width, 0);
  attrs.height = _undef(attrs.height, 0);
  return _mediaImg(self.themesPath + 'common/blank.gif', attrs);
})

demo链接

github链接