2010-08-26 91 views
1

我正在製作一個contentEditable jQuery插件。我創建了一個'工具'欄來對文本執行操作,例如使用execCommand將文本變爲粗體,斜體等。問題在於,當您選擇文本並單擊其中一個按鈕(包含onclick事件的div)時,它會取消選擇您選擇的文本(所有瀏覽器)。爲了解決這個問題,我使用了:Webkit,IE取消選擇文本

toolBar.onmousedown=function(){return false}; 

它在Firefox和Opera中運行良好。我試圖使用

toolBar.onselectstart = function(){return false}; 

它可以防止IE中的文本選擇。但是,webkit或IE都不起作用。我之前看到過使用輸入按鈕完成此操作,但我寧願使用div。有任何想法嗎?

回答

0

我通過重新選擇文本解決了這個問題。

在鼠標鬆開我捕捉選擇信息:

$.getSelection = function() { 
    // ie has its own way of doing things from here on. 
    if($.browser.msie) return document.selection.createRange(); 

    if (window.getSelection) { 
     var selection = window.getSelection(); 
    } 
    else if (document.selection) { // should come last; Opera! 
     var selection = document.selection.createRange(); 
    } 

    if (selection.getRangeAt) 
     var range = selection.getRangeAt(0); 
    else { // Safari! 
     var range = document.createRange(); 
     range.setStart(selection.anchorNode, selection.anchorOffset); 
     range.setEnd(selection.focusNode, selection.focusOffset); 
    } 
    if (!range.toString().match(/[^\t\r\n ]/)) return false; 

    var ret = {}; 

    // start end length text 

    ret.startContainer = range.startContainer; 
    ret.start = range.startOffset; 
    ret.endContainer = range.endContainer; 
    ret.end  = range.endOffset; 
    ret.length = ret.end - ret.start; 
    ret.collapsed = range.collapsed; 

    return ret; 
}; 

這是什麼地方您選擇的存儲。

我然後要麼重新選擇文本,如果瀏覽器是DOM範圍W3C標準(即所有,但IE)和執行的execCommand:

function handleReselection() { 
    if($.browser.msie) { 
     return this.selection; 
    } 
    else { 
     setSelection(this.selection); 
     return document 
    } 
} 

function setSelection(selection) { 
    var sel = window.getSelection(); 
    sel.removeAllRanges(); 
    var range = document.createRange(); 
    range.setStart(selection.startContainer, selection.start); 
    range.setEnd(selection.endContainer, selection.end); 
    sel.addRange(range); 
} 

handleReselection().execCommand('bold', false, null); 
4

一個簡單的選擇是使用<按鈕>標籤工具欄。這樣它不會丟失文本選擇。