kindeditor 上传视频mp4

在php文件夹下，有个upload_json.php文件，打开找到：

在   //定义允许上传的文件扩展名
'media' => array('swf', 'flv', 'mp3', 'mp4', 'wav', 'wma', 'wmv', 'mid', 'avi', 'mpg', 'asf', 'rm', 'rmvb'),
中加入'mp4'

//最大文件大小 
long maxSize = 1000000; //默认为1M, 这里可以修改大点, 比如8000000,或更大
在 
$save_path = realpath($save_path) . '/';
之前添加一个判断, 不然你如果没有创建 attached 文件夹,会报错误'上传目录没有写权限'
//如果保存目录路径不存在,则创建 
if (! is_dir($save_path)) { 
   mkdir($save_path, 0777); 
}

mp4视频格式上传：

找到 kindeditor-all.js

1. 在  htmlTags  配置中添加:

video : ['id', 'class', 'src', 'width', 'height', 'type', 'loop', 'autostart', 'quality', '.width',
   '.height', 'align', 'allowscriptaccess','controls'],

这是配置白名单, 为了防止kindeditor编辑器无法识别video标签.

 2. 修改 _mediaImg()方法

原代码

function _mediaImg(blankPath, attrs) {
   var width = attrs.width,
      height = attrs.height,
      type = attrs.type || _mediaType(attrs.src),
      srcTag = _mediaEmbed(attrs),
      style = '';
   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;
}
 

修改为，红色部分为修改的代码

function _mediaImg(blankPath, attrs) {
   var width = attrs.width,
      height = attrs.height,
      type = attrs.type || _mediaType(attrs.src),
      srcTag = _mediaEmbed(attrs),
      style = '';
   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;';
   }
    if (attrs.src.indexOf(".mp4")!=-1) {
        var html = '<video src="'+attrs.src+'" controls="controls" width="'+width+'" height="'+height+'" class="' +          _mediaClass(type) + '" type="video/mp4" ';

      html += '>您的浏览器太老了, 不支持视频播放。请下载最新浏览器!</video>'    

      return html;

    }else{
        var html = '<img class="' + _mediaClass(type) + '" src="' + blankPath + '" ';
        if (style !== '') {
            html += 'style="' + style + '" ';
        }
        html += 'data-ke-tag="' + escape(srcTag) + '" alt="" />';
    }
    return html;
}
attrs.src.indexOf(".mp4")!=-1 如果是mp4格式视频，就将<embed/>标签替换成<video></video>标签，这样才能播放

 

如果修改到这里的话, 会出现编辑器无法编辑, 上传后的视频无法删除.

这里拼接video视频地址的时候, 要加入编辑器识别标签<p>:

var html = '<p></p><p><video src="'+attrs.src+'" controls="controls" width="'+width+'" height="'+height+'" class="' + _mediaClass(type) + '" type="video/mp4" ';
html += '>您的浏览器太老了, 不支持视频播放。请下载最新浏览器!</video></p><p></p>'

这样上传了视频后也可以正常编辑了.