window.getSelection() मुझे चयनित टेक्स्ट देता है, लेकिन मुझे HTML

Question

मैं WYSIWYG HTML संपादक (फ़ायरफ़ॉक्स के लिए) का विस्तार कर रहा हूं, मैं चयन के चारों ओर टैग जोड़ना चाहता हूं। मुझे Mozilla Midas specification में इसे पूरा करने के लिए कोई फ़ंक्शन नहीं मिल रहा है।

एचटीएमएल के साथ चयन को बदलने के लिए एक आदेश है।
तो अगर मैं चयन सामग्री पढ़ सकता हूं, तो मैं अपने टैग को इस स्ट्रिंग में जोड़ सकता हूं।

window.getSelection() लगभग काम करता है, लेकिन यह मुझे nsISelection देता है जो एक सादे-पाठ स्ट्रिंग में परिवर्तित होता है।

पीएस: document.getSelection() सादे-पाठ स्ट्रिंग को nsISelection पर वापस नहीं देता है।

Answer 1

DOM Range spec पर एक नज़र डालें। आप का उपयोग कर फ़ायरफ़ॉक्स में उपयोगकर्ता चयन से एक Range प्राप्त कर सकते हैं:

var range = window.getSelection().getRangeAt(0); 

ध्यान दें कि Firefox सहित कुछ ब्राउज़रों,, एकाधिक चयन, चयन के getRangeAt() विधि के माध्यम से पहुँचा जा सकता है जो अनुमति देते हैं।

Range उन नोड्स के भीतर डोम नोड्स और ऑफ़सेट के संदर्भ में व्यक्त किया गया है। एक बार जब आप अपना Range प्राप्त कर लेते हैं, तो आप जो भी चाहते हैं उसे ठीक करने के लिए सीधा नहीं है, क्योंकि सीमा की सीमाएं डोम पेड़ के विभिन्न स्तरों पर अलग-अलग नोड्स में हो सकती हैं, इसलिए टैग के साथ रेंज की सामग्री के आस-पास बस हमेशा संभव नहीं होता है। तुम्हें पता है, निम्नलिखित की तरह कुछ करने के लिए सक्षम हो सकता है, हालांकि यह एक नया ब्लॉक तत्व चयनित सामग्री को रोकने के लिए पैदा करेगा: (

var range = window.getSelection().getRangeAt(0); 
var selectionContents = range.extractContents(); 
var div = document.createElement("div"); 
div.style.color = "yellow"; 
div.appendChild(selectionContents); 
range.insertNode(div); 

एक और, hacky, वैकल्पिक चयन को संशोधित करने के document की execCommand() विधि का उपयोग करने के लिए है उदाहरण के लिए इसे किसी विशेष रंग में सेट करके) और फिर उस रंग के तत्वों का चयन करने के लिए document.querySelectorAll या कुछ चयनकर्ता लाइब्रेरी का उपयोग करके और फिर स्टाइल लागू करें।

Answer 2

टिम डाउन का जवाब सही रास्ते पर है। हालांकि एक मुद्दा यह है कि निकालें सामग्री() डोम से चयन को हटा देगा। आप

window.getSelection().getRangeAt(0).cloneContents(); 

का उपयोग केवल चयनित चीज़ों की एक प्रति प्राप्त करने के लिए कर सकते हैं। फिर आप इसे अपने नए टैग से लपेट सकते हैं और उसके बाद चयन को प्रतिस्थापित कर सकते हैं। कई एचटीएमएल तत्वों को फैलाने वाली सीमा के बारे में टिम डाउन की चिंता निश्चित रूप से मान्य है। मुझे लगता है कि एक बार जब आप सीमा प्राप्त कर लेते हैं, तो यह एचटीएमएल को 'ठीक करता है', लेकिन जब आप इसे वापस डाल देते हैं तो इससे समस्याएं पैदा हो सकती हैं। Here रेंज ऑब्जेक्ट पर एक अच्छा संसाधन है।

Answer 3

window.getSelection() एक ऑब्जेक्ट वापस कर देगा। आप वस्तुओं को कॉल करके स्ट्रिंग के रूप में लौटाई गई चयन ऑब्जेक्ट का उपयोग कर सकते हैं .toString() विधि।

var selObj = window.getSelection(); 
var selectedText = selObj.toString(); 

https://developer.mozilla.org/en/DOM/window.getSelection