execCommand沒有選擇？ （設置字體，大小等）

Question

我可以讓我的自定義所見即所得的編輯器來將樣式應用到選定的文本沒有問題：

pnlDocumentEditor_IFrame.document.execCommand(cmd, ui, opt) 

..但我需要能夠做的是讓用戶設置字體或字體大小，或粗體等，以便在發出該命令後鍵入的文本將應用該樣式。

這可能嗎？我試過的所有execCommands似乎只適用於選定的文本。

Answer 1

底肥的execCommand某些元件上，而沒有與鼠標選擇它，可以用這個函數來完成：

jsFiddle example

function execCommandOnElement(el, commandName, value) { 
    if (typeof value == "undefined") { 
     value = null; 
    } 

    if (typeof window.getSelection != "undefined") { 
     // Non-IE case 
     var sel = window.getSelection(); 

     // Save the current selection 
     var savedRanges = []; 
     for (var i = 0, len = sel.rangeCount; i < len; ++i) { 
      savedRanges[i] = sel.getRangeAt(i).cloneRange(); 
     } 

     // Temporarily enable designMode so that 
     // document.execCommand() will work 
     document.designMode = "on"; 

     // Select the element's content 
     sel = window.getSelection(); 
     var range = document.createRange(); 
     range.selectNodeContents(el); 
     sel.removeAllRanges(); 
     sel.addRange(range); 

     // Execute the command 
     document.execCommand(commandName, false, value); 

     // Disable designMode 
     document.designMode = "off"; 

     // Restore the previous selection 
     sel = window.getSelection(); 
     sel.removeAllRanges(); 
     for (var i = 0, len = savedRanges.length; i < len; ++i) { 
      sel.addRange(savedRanges[i]); 
     } 
    } else if (typeof document.body.createTextRange != "undefined") { 
     // IE case 
     var textRange = document.body.createTextRange(); 
     textRange.moveToElementText(el); 
     textRange.execCommand(commandName, false, value); 
    } 
} 

而且示例用法：

var testDiv = document.getElementById("test"); 
execCommandOnElement(testDiv, "Bold"); 
execCommandOnElement(testDiv, "ForeColor", "red"); 

來源：set execcommand just for a div