關於kingedit使用過程中的問題

一,由於項目需要,所以使用此插件進行編輯文字,但是在使用過程中出現一些問題,現把這些問題集中起來,方便日後查看,也方便別人。

1,kingedit界面


二,問題描述

1,在上傳圖片過程中,顯示圖片的時候時相對路徑,如此圖,

我們可以修改參數,在kingedit.js中設置urltype:“domain”

2,關於使用ie瀏覽器上傳文件無法出現彈框,

解決辦法如下:

    IE瀏覽器升級到了IE11,在項目中發現,在IE11下使用kindeditor的文字顏色、文字背景、上傳圖片等只要是彈出框的按鈕都不能彈出框,如下圖:

仔細觀察發現其實是已經彈出框了,只是沒有在正確的位置現實罷了,仔細查看了kindeditor.js的代碼,發現了幾個問題:

js的開頭定義了幾個變量:

var _VERSION = '4.1.7(2013-04-21)',
        _ua =navigator.userAgent.toLowerCase(),
        _IE = _ua.indexOf('msie')>-1 && _ua.indexOf('opera') == -1,....

經過測試發現,在IE8下,navigator.userAgent的值是這樣的:

而在IE11下,navigator.userAgent的值是這樣的:

所以通過_ua.indexOf('msie')> -1 的方式在IE11下判斷是否爲IE瀏覽器就行不通了。

往下看代碼,發現_getScrollPos這個方法中的x y是通過判斷是否爲IE瀏覽器獲取位置

function _getScrollPos(doc) {
    doc = doc || document;
    var x, y;
    if (_IE || _OPERA) {
        
x = _docElement(doc).scrollLeft;
        y= _docElement(doc).scrollTop; 
    } else {
        x = _getWin(doc).scrollX;
        y = _getWin(doc).scrollY;
    }
    return {x : x, y : y};
}
在往下看

pos : function() {
    var self = this, node = self[0], x = 0, y = 0;
    if (node) {
        if (node.getBoundingClientRect){
            var box= node.getBoundingClientRect(),
            
pos = _getScrollPos(self.doc);
            x= box.left + pos.x;
            y= box.top + pos.y;
        } else {
            while(node) {
                x+= node.offsetLeft;
                y+= node.offsetTop;
                node= node.offsetParent;
            }
        }
    }
return {x : _round(x), y : _round(y)};
},

這裏的pos =_getScrollPos(self.doc);
            x =box.left + pos.x;
            y =box.top + pos.y;

三句確定了posx y

再來看一下createmenu方法:

createMenu :function(options) {
    var self = this,
    name = options.name,
    
knode =self.toolbar.get(name),
    pos = knode.pos();
    options.x = pos.x;
    options.y = pos.y +knode.height();
    options.z = self.options.zIndex;
    options.shadowMode = _undef(options.shadowMode,self.shadowMode);
    if (options.selectedColor !== undefined) {
        options.cls = 'ke-colorpicker-'+ self.themeType;
        options.noColor =self.lang('noColor');
        self.menu =_colorpicker(options);
    } else {
        options.cls = 'ke-menu-' +self.themeType;
        options.centerLineMode = false;
        self.menu = _menu(options);
    }
    return self.menu;
},

根據以上代碼,我得出一個判斷是否爲IE瀏覽器成爲解決本問題的根本解決方案。

但是如果改成這樣:

_IE =(_ua.indexOf('msie') > -1 || _ua.indexOf('trident') > -1) &&_ua.indexOf('opera') == -1,

又會出現不支持attachEvent方法,附上代碼:

if (_IE) {
    window.attachEvent('onunload', function() {
        _each(_eventData, function(key,events) {
            if(events.el) {
                _unbind(events.el);
            }
        });
    });
}

所以我這樣解決:

第一步:定義變量:_IE11 =_ua.indexOf('trident') > -1 代碼如下

var _VERSION = '4.1.7(2013-04-21)',
    _ua = navigator.userAgent.toLowerCase(),
    _IE = _ua.indexOf('msie') > -1 &&_ua.indexOf('opera') == -1,
    
_IE11 =_ua.indexOf('trident') > -1,.....

第二部:增加判斷

function _getScrollPos(doc){
    doc = doc || document;
    var x, y;
    if (
_IE|| _IE11 || _OPERA) {
        x =_docElement(doc).scrollLeft;
        y = _docElement(doc).scrollTop; 

    } else {
        x = _getWin(doc).scrollX;
        y = _getWin(doc).scrollY;
    }
    return {x : x, y : y};
}

這樣彈出框就可以正確彈出了,如下圖:




 


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章