ContentEditable - वर्तमान फ़ॉन्ट रंग/आकार

Question

प्राप्त करें मैं वेब ब्राउज़र के लिए रिच टेक्स्ट एडिटर पर काम कर रहा हूं और मैं आरटीई/सामग्री संपादन योग्य तत्व में वर्तमान फ़ॉन्ट रंग और आकार के मूल्यों के साथ काम करना चाहता हूं। क्या इन मानों को प्राप्त करने के लिए कुछ पूर्व निर्धारित फ़ंक्शन है, जैसे execCommand, जो सीधे ContentEditable तत्व से जुड़ा हुआ है? या मुझे कुछ टेक्स्ट रेंज jQuery लाइब्रेरी का उपयोग करना चाहिए जो इन गुणों को प्राप्त करेगा?

Answer 1

आप document.queryCommandValue() उपयोग कर सकते हैं सभी प्रमुख ब्राउज़रों में वर्तमान चयन के रंग और फ़ॉन्ट आकार पाने के लिए:

लाइव डेमो: http://jsfiddle.net/timdown/AJBsY/

कोड:

var colour = document.queryCommandValue("ForeColor"); 
var fontSize = document.queryCommandValue("FontSize"); 

हालांकि, परिणाम हैं ब्राउज़र में असंगत और FontSize कमांड केवल सीएसएस के बजाय HTML <font> तत्व में उपयोग किए गए फ़ॉन्ट आकार 1-7 के साथ काम करता है, इसलिए आप तत्व सह को पकड़ने से बेहतर होंगे चयन ntaining और का उपयोग कर अपने सीएसएस गुण window.getComputedStyle()/currentStyle की जांच:

लाइव डेमो: http://jsfiddle.net/timdown/K4n2j/

कोड:

function getComputedStyleProperty(el, propName) { 
    if (window.getComputedStyle) { 
     return window.getComputedStyle(el, null)[propName]; 
    } else if (el.currentStyle) { 
     return el.currentStyle[propName]; 
    } 
} 

function reportColourAndFontSize() { 
    var containerEl, sel; 
    if (window.getSelection) { 
     sel = window.getSelection(); 
     if (sel.rangeCount) { 
      containerEl = sel.getRangeAt(0).commonAncestorContainer; 
      // Make sure we have an element rather than a text node 
      if (containerEl.nodeType == 3) { 
       containerEl = containerEl.parentNode; 
      } 
     } 
    } else if ((sel = document.selection) && sel.type != "Control") { 
     containerEl = sel.createRange().parentElement(); 
    } 

    if (containerEl) { 
     var fontSize = getComputedStyleProperty(containerEl, "fontSize"); 
     var colour = getComputedStyleProperty(containerEl, "color"); 
     alert("Colour: " + colour + ", font size: " + fontSize); 
    } 
} 

यह एक सुधार है, लेकिन अभी भी ऐसी इकाइयों भिन्न के रूप में ब्राउज़र विसंगतियों हैं या रंग प्रारूप