किसी सामग्री में टैब्बिंग की अनुमति दें execDommand

Question

के साथ संपादन योग्य div मैं एक ऐसा ऐप्लिकेशन बना रहा हूं जहां मुझे सामग्री की आवश्यकता हो। संपादन योग्य div को इसमें टैब रखने की अनुमति दी जा सकती है। मैंने पहले से ही यह पता लगाया है कि सही तरीके से काम करना संभव नहीं है। तो वहाँ एक तरीका है कि keydown पर यह एक टैब है, जो है

	 

क्या मैं अब तक इस

document.getElementById('codeline').contentEditable='true'; 
document.getElementById('codeline').onkeydown=function(e){ 
    if(e.keyCode==9){ 
     e.preventDefault(); 
     //document.getElementById('codeline').contentWindow.document.execCommand("InsertHTML",false,"	"); 
     //Thought this would work but it doesn't 
    } 
} 

तो किसी को भी जानता है अगर वहाँ करने के लिए एक तरीका है के लिए HTML कोड जोड़ता है यह, या अगर वह रास्ता है और मैं बस इसे गलत कर रहा हूं, तो कृपया मुझे बताएं! धन्यवाद!

Answer 1

एचटीएमएल कल्पना निर्दिष्ट करता है कि एक टैब वर्ण जब यह एक < पूर्व > तत्व के अंदर निहित के अतिरिक्त एक भी सफेद स्थान के रूप में व्यवहार किया जाना चाहिए।

आपके द्वारा ऊपर पोस्ट किया गया कोड काम करता है और यह एक टैब चार डालता है लेकिन यह ब्राउज़र द्वारा एक सफेद स्थान के रूप में प्रदर्शित होता है। यदि आप अपनी संपूर्ण संपादन योग्य सामग्री को < पूर्व > टैग में डाल सकते हैं तो आपके टैब दिखाए जाएंगे।

आप केवल मांगपत्र सामग्री के लिए टैब का उपयोग करना चाहते हैं, तो आप भी

execCommand('indent', false, null)

Answer 2

"मांगपत्र" कमांड पर गौर कर सकते, फ़ायरफ़ॉक्स ब्लॉककोट तत्व के साथ चयनित पाठ गिर्द घूमती है।
तो एक एक मार्जिन छोड़ दिया या padding-left ब्लॉककोट तत्व टैब का प्रतिनिधित्व करने के लिए संपत्ति परिभाषित कर सकते हैं।
"पुराना" कमांड ब्लॉकक्वाट तत्व और इसलिए शैलियों को हटा देगा।

Answer 3

भावी पाठकों के लिए, शायद 'सरल' सफेद-स्थान शैली का उपयोग करना एक आसान समाधान है। मूल पोस्ट here।

white-space: pre;