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