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转换成整数
视频上传无法播放的问题
- MP4视频文件不是支持格式
- 原本的视频上传后，在前台页面生成后，会提示播放插件不支持的问题
- 使用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插件简单调用的格式。
- 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;
}
- 添加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中修改，具体文档请参照操作手册
