एचटीएमएल को पहले, अंदर, और चयन के बाद कैसे प्राप्त करें (textarea में नहीं)?

Question

यहां मैं यह पूरा करने की कोशिश कर रहा हूं: जब कोई उपयोगकर्ता "myDiv" के अंदर टेक्स्ट का चयन करने के लिए माउस, कीबोर्ड या स्पर्श का उपयोग करता है, तो मैं HTML के तीन बुद्धिमान भाग प्राप्त करना चाहता हूं: चयन से पहले HTML ("बाएं" इसका), चयन के अंदर HTML, और चयन के बाद HTML (इसके "दाएं" तक)। एचटीएमएल होना चाहिए क्योंकि यह myDiv.innerHTML के साथ दिखाई देगा।

चयन टैग जोड़ी के अंदर शुरू या समाप्त हो सकता है (यानी, पृथक चयन आवश्यक HTML नहीं है)। मुझे चयन के भीतर पूर्ण-स्थित तत्वों जैसे विशेष परिदृश्यों से निपटने की आवश्यकता नहीं है; जिन सभी चयनों से मैं चिंतित हूं, उन्हें एक div में बाध्य किया जाएगा जिसमें मजबूत, एम, उल, ओएल, एच 1, छवि और तालिका जैसे मूल टैग होंगे।

चयन का स्नैग करने के लिए मैं निकटतम rangy का उपयोग कर रहा हूं और चयन HTML प्राप्त करने के लिए selection.getRangeAt(0).cloneContents() पर कॉल कर रहा हूं। यह तब तक पर्याप्त काम करता है जब तक कि मैं अलगाव में अमान्य न हो, और ब्राउज़र इसे वैध मार्कअप बनाने के लिए दस्तावेज़ खंड के HTML को बदल देता है।

अतिरिक्त जानकारी: यहां कारण बताया गया है कि मैं इस की जरूरत है:

मैं एक दस्तावेज़ राय प्रणाली बनाने रहा हूँ, तो मैं बाद में पुनः प्राप्ति और पुनर्गठन के लिए एक डेटाबेस के लिए चयन जानकारी को बचाने के लिए की जरूरत है। आम तौर पर मैं डीओएम पथ और चयनित पाठ का उपयोग करके चयन को सहेज लेगा, लेकिन टेक्स्ट सहेजने और पुनर्गठन के बीच बदल सकता है। उदाहरण के लिए, लेखक पूरे पैराग्राफ को चारों ओर ले जा सकते हैं, अनुभागों को हटा सकते हैं, आदि। डीओएम पथ तब बेकार हो जाता है।

तो मेरी (अपूर्ण) योजना चयन को [ऑफ़सेट, लंबाई, html_snippet] के रूप में संग्रहीत करना है। वह "स्थिति" है। मैं एचटीएमएल स्निपेट भी स्टोर करूंगा जो चयनित पाठ से पहले और बाद में सीधे आए थे। यह "संदर्भ" है।

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

सुपरथैंक! कैसे है कि एचटीएमएल एचटीएमएल चयन या viceversa करने के लिए पिछले की तुलना में किसी भी अलग होगा -

1.- जब आप कहते हैं कि 'चयन के बाद html':

Answer 1

मैं कई प्रश्न हैं? क्या आपकी 'स्क्रिप्ट' या जो भी हो, 'चयन' प्रक्रिया स्वयं HTML के साथ छेड़छाड़ कर रही है?

2.- आपने कहा कि पाठ चयन टेक्स्टरेस में नहीं हो रहे हैं ... तब आप किस तत्व के साथ काम कर रहे हैं? पैराग्राफ? divs ...? इसे कम करने से मदद मिलेगी।

3.- क्या आपने jquery का उपयोग करने के बारे में सोचा है?

http://api.jquery.com/select/

$('#element_with_text_goes_here').select(function() { 

//apply grabbing functions here, for example 

//copy html 'before' selection: 
    $pre_html = $('html').clone(); 

    // copy selection...see below: 

    // copy html 'after' selection'...same as before 


}); 

कॉपी चयन की तरह कुछ कर रही:

के रूप में यहाँ का उल्लेख किया:

Selecting text in an element (akin to highlighting with your mouse)

जेसन लिखा निम्नलिखित समारोह:

http://jsfiddle.net/edelman/KcX6A/339/

और यहाँ एक jQuery प्लगइन संस्करण: http://jsfiddle.net/edelman/KcX6A/340/

जो तुम चयनित पाठ का obtention के लिए उपयोग कर सकते हैं

function selectText(element) { 
    var doc = document; 
    var text = doc.getElementById(element);  

    if (doc.body.createTextRange) { // ms 
     var range = doc.body.createTextRange(); 
     range.moveToElementText(text); 
     range.select(); 
    } else if (window.getSelection) { // moz, opera, webkit 
     var selection = window.getSelection();    
     var range = doc.createRange(); 
     range.selectNodeContents(text); 
     selection.removeAllRanges(); 
     selection.addRange(range); 
    } 
} 

एक जीवित काम कर डेमो यहां पाया जा सकता है कि साथ

। आपको इसे तदनुसार तब्दील करना होगा क्योंकि वह इसे एक उलटा कोण से आ रहा था। अधिक जानकारी जो आप हमें दे सकते हैं ... बेहतर हम मदद कर सकते हैं।

आशा इस
जी

Answer 2

इस कोड को उपयोगकर्ता के चयन से html/पाठ हो जाता है में मदद करता है, लेकिन यह केवल IE में काम करता है। कोड क्रॉस-टैग चयन के साथ भी काम करता है। (वैश्विक कोड कम रखने के लिए इस्तेमाल किया।) & से पहले

<script> 
function selected(){ 
    thediv=document.getElementById('div'); 
    res=document.getElementById('htm'); 
    userSelection=document.selection; 
    userRange=userSelection.createRange(); 
    /* For wider scale of elements */ 
    // rangeParent=userRange.parentElement(); 
    // if(rangeParent!=thediv) userRange.moveToElementText(rangeParent); 
    rangeText=userRange.htmlText; // OR: rangeText=userRange.text; 
    res.innerText=rangeText;  
    return; 
}  
</script> 
</head>  
<body onload="document.onselectionchange=selected;"> 
<div id="div"> 
<h1>The great testpage</h1> 
<p>A paragraph with some text</p> 
<p>This paragraph <b>contains</b> a child element.</p> 
<p>And this is the last paragraph.</p> 
<table> 
<tr><td>Cell1-1</td><td>cell1-2</td></tr> 
<tr><td>Cell2-1</td><td>cell2-2</td></tr> 
</table> 
<ol> 
<li>item1</li> 
<li>item2</li> 
<li>item3</li> 
</ol> 
</div> 
<br> 
<span id="htm"></span> 
</body> 

सामग्री चयन के बाद में thediv आप इस तरह मिल जाएगा: prepost=thediv.innerHTML/innerText.split(rangeText);

पेज किसी भी अन्य तत्वों लेकिन thediv शामिल है, तो वे करने के लिए है अचयनित किया जाना चाहिए।