kindeditor老版本version 4.1.10 bug踩坑

问题目录

目录

• 上传图片或者视频的弹窗有时候不出现，只出现遮罩
• 视频上传无法播放的问题
  • 参考链接：

上传图片或者视频的弹窗有时候不出现，只出现遮罩

通过测试发现，出现这种情况不是弹出框没有出现，而是设置固定定位top值为空，元素出现在了屏幕之外（屏幕下边）；

查看Elements可以发现：



并没有top值，

正常显示的情况下是这样的：



为什么会出现这种情况呢？

查看源码，弹出框的定位由以下代码决定： 大约在3440行左右

pos : function(x, y, updateProp) {
        var self = this;
        updateProp = _undef(updateProp, true);
        if (x !== null) {
            x = x < 0 ? 0 : _addUnit(x);
            self.div.css('left', x);
            if (updateProp) {
                self.x = x;
            }
        }
        if (y !== null) {
            y = y < 0 ? 0 : _addUnit(y);
            self.div.css('top', y);
            if (updateProp) {
                self.y = y;
            }
        }
        //console.log(y)  在此处输出Y差看 正常情况和bug情况的区别
        return self;
    },
    autoPos : function(width, height) {
        var self = this,
            w = _removeUnit(width) || 0,
            h = _removeUnit(height) || 0,
            scrollPos = _getScrollPos();
        if (self._alignEl) {
            var knode = K(self._alignEl),
                pos = knode.pos(),
                diffX = _round(knode[0].clientWidth / 2 - w / 2),
                diffY = _round(knode[0].clientHeight / 2 - h / 2);
            x = diffX < 0 ? pos.x : pos.x + diffX;
            y = diffY < 0 ? pos.y : pos.y + diffY;
        } else {
            var docEl = _docElement(self.doc);
            x = _round(scrollPos.x + (docEl.clientWidth - w) / 2);
            y = _round(scrollPos.y + (docEl.clientHeight - h) / 2);
        }
        if (!(_IE && _V < 7 || _QUIRKS)) {
            x -= scrollPos.x;
            y -= scrollPos.y;
        }
        return self.pos(x, y);
    },

在pos函数中输出y发现：

• 正常情况下： 输出 '199px' 为字符串类型，带单位；
• bug情况下： 输出 152.32154654 数字没有单位；

这样就发现了问题所在，bug时 152.3333直接复制给元素的top值，为 top: 152.3333 没有单位px，浏览器不读取，导致top为空，元素掉到了屏幕外面。

产生这种情况的原因：

是由于上方代码第22行中的

_addUnit()这个函数：

function _addUnit(val, unit) {
    unit = unit || 'px';
    return val && /^\d+$/.test(val) ? val + unit : val;
}

问题就出在了/^\d+$/.test(val),如果val为小数的时候，返回了false，则直接return val，不带px单位了

解决办法：

不要直接修改_addUnit函数，这样影响太大，

我们只要保证传给_addUnit的val是一个整数就行，所以修改上面代码块中的第22行

y = y < 0 ? 0 : _addUnit(parseInt(y)); //添加parseInt方法，将y转换成整数

视频上传无法播放的问题

1. MP4视频文件不是支持格式
2. 原本的视频上传后，在前台页面生成后，会提示播放插件不支持的问题
3. 使用ckplayer视频播放插件

步骤一： 修改允许上传的视频格式

修改编辑器目录下的 kendeditor/php/upload_json.php,大概在20行左右,在media类型中添加MP4

$ext_arr = array(
    'image' => array('gif', 'jpg', 'jpeg', 'png', 'bmp'),
    'flash' => array('swf', 'flv'),
    '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 905行左右，加入需要支持的视频格式，MP4生成的embed的type为application/x-shockwave-flash;

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

步骤三：下载ckplayer，将插件保存到项目的kendeditor/plugins文件夹中，

步骤四：修改kineditor提交视频后生成的embed，按照ckplayer插件简单调用的格式。

1. ckplayer播放本地视频的原理是调用ckplayer.swf打开本地的视频，下面的修改kindeditor.js中920行左右embed标签相关的代码，加入ckplayer可以识别的参数flashvars：

function _mediaEmbed(attrs) {
    var html = '<embed ';  //最后有个空格
    //获取当前网址，如： http://localhost:8083/uimcardprj/share/meun.jsp
    var curWwwPath=window.document.location.href;
    //获取主机地址之后的目录，如： uimcardprj/share/meun.jsp
    var pathName=window.document.location.pathname;
    var pos=curWwwPath.indexOf(pathName);
    //获取主机地址，如： http://localhost:8083
    var localhostPath=curWwwPath.substring(0,pos);
    _each(attrs, function(key, val) {
        if(key == 'src') {
            html += key + '="' + K.options.pluginsPath
                    + 'ckplayer/ckplayer.swf" ' + 'flashvars="video='  //.swf后又个空格
                    + localhostPath + val + '" ';  //‘" ’这里最后有个空格
        } else {
            html += key + '="' + val + '" ';  //‘" ’这里最后有个空格
        }

    });
    html += '/></embed>';
    return html;
}

1. 添加kindeditor生成embed时，要遍历的属性数组，添加上 falshvars，不然我们上面的操作再生成后，就会被忽略；大约在kindeditor.js的298行中：

embed : ['id', 'class', 'src', 'width', 'height', 'type', 'loop', 'autostart', 'quality', '.width', '.height', 'align', 'allowscriptaccess', 'flashvars'],  //添加falshvars属性

注意：

• 上方html拼接字符串时，两个属性直接的空格不要漏了，不然在编辑器提交的时候，将img转换为embed的时候，会导致所有的属性都无法被获取！！！ 这个坑我也踩了好久
• 网上很多文章写的都是在embed上添加的是 'flashvars="f=', 但是新版的ckplayer则是 'flashvars="video='，用video代替f 不然前台会显示视频路径不存在；

步骤五：前台引入ckplayer,js

在需要播放视频的页面，引入ckplayer.js，生成该播放器;

ckplayer播放器的配置可直接才ckplayer.js中修改，具体文档请参照操作手册

参考链接：

have a talk