2011-03-05 15 views
6

यह पूरे दस्तावेज़ के लिए नहीं एक div तत्व के साथ बाँध execCommand के लिए किसी भी तरह से है के लिए execCommand, मैं इस कोशिश:सेट सिर्फ एक div

document.getElementById('div').execcommand(...) 

लेकिन यह एक त्रुटि है:

execcommand is not a function 

यह केवल div तत्व के साथ execcommand बांधने के लिए कोई रास्ता नहीं है पूरे दस्तावेज़ !! मुझे iframe विधि का उपयोग पसंद नहीं है।

+0

आप कब ट्रिगर करने के लिए आदेश चाहते हैं? जब div क्लिक किया जाता है? –

+0

@ पेक्का, क्या आप अधिक – mkotwd

+0

को समझा सकते हैं किसी तत्व को कमांड को समझना समझ में नहीं आता है। आप वास्तव में क्या करना चाहते हैं? –

उत्तर

15

यह अन्य ब्राउज़र से अधिक IE में ऐसा करने की वजह से IE के TextRange वस्तुओं एक execCommand() विधि है, जिसका अर्थ है कि एक कमांड निष्पादित किया जा सकता आसान है चयन को बदलने की आवश्यकता के बिना दस्तावेज़ के एक भाग पर और अस्थायी रूप से designMode सक्षम करें (जो आपको अन्य ब्राउज़रों में करना है)।

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"); 
+0

वाह, बहुत बहुत धन्यवाद, यह वही काम करता है जैसा मैं चाहता हूं :) – mkotwd

+0

कमाल ... बहुत बहुत धन्यवाद! – enloz

+0

हम फ़ायरफ़ॉक्स में div – Nayeem

3

शायद यह तुम बाहर में मदद करता है:

Example code 1 इस पृष्ठ पर एक समारोह का उपयोग करके एक div पर execCommand है। यकीन नहीं है कि क्या आप इसके बाद क्या कर रहे हैं? सौभाग्य!

संपादित करें: मैं पता लगा कि कैसे कोड यहाँ डाल करने के लिए: ओ

<head> 
<script type="text/javascript"> 
    function SetToBold() { 
     document.execCommand ('bold', false, null); 
    } 
</script> 
</head> 
<body> 
     <div contenteditable="true" onmouseup="SetToBold();"> 
     Select a part of this text!  
     </div> 
</body> 
2

जावास्क्रिप्ट:

var editableFocus = null; 

    window.onload = function() { 
    var editableElements = document.querySelectorAll("[contenteditable=true]"); 

    for (var i = 0; i<editableElements.length; i++) { 
     editableElements[i].onfocus = function() { 
     editableFocus = this.id; 
     } 
    }; 
    } 

    function setPreviewFocus(obj){ 
    editableFocus = obj.id 
    } 

    function formatDoc(sCmd, sValue) { 
    if(editableFocus == "textBox"){ 
     document.execCommand(sCmd, false, sValue); 
    } 
    } 

HTML: यहाँ तुम क्या सफाई से चाहते करने के लिए एक समारोह है

<div id="textBox" contenteditable="true"> 
Texto fora do box 
</div> 

<div contenteditable="true"> 
Texto fora do box 
</div> 

<button title="Bold" onclick="formatDoc('bold');">Bold</button> 
+0

यह बहुत अच्छा है। धन्यवाद! – yanike

0

आप इसे सरल रख सकते हैं, और इसे अपने div में जोड़ें।

<div contenteditable="true" onmouseup="document.execCommand('bold',false,null);">