कॉपी/पेस्ट पर पूर्ण लिंक के सापेक्ष लिंक को बदलने से क्रोम को कैसे रोकें?

Question

मैं से contenteditable="true" के साथ समृद्ध पाठ की प्रतिलिपि बना रहा हूं और इसे Medium ड्राफ्ट पर चिपका रहा हूं। अधिकांश स्वरूपण ठीक से संरक्षित है, लेकिन किसी कारण से मुझे नहीं लगता कि सभी सापेक्ष लिंक पूर्ण रूप से परिवर्तित हो जाते हैं। मुझे नहीं पता कि यह क्या कदम होता है। मैंने यह भी सोचा कि माध्यम घटनाओं को "पेस्ट" सुन रहा है। यह सबसे खराब स्थिति परिदृश्य होगा, क्योंकि इसके बारे में मेरा बहुत कम नियंत्रण होगा। लेकिन यदि हां, तो वे उस पृष्ठ के यूआरएल तक कैसे पहुंच सकते हैं जब मैंने सामग्री की प्रतिलिपि बनाई थी? दरअसल, अन्य ब्राउज़रों के साथ जांच करने के बाद, मैंने निष्कर्ष निकाला कि यह क्रोम की गलती है, न कि मध्यम। सफारी पर यह पूरी तरह से काम करता है, फ़ायरफ़ॉक्स पर यह बिल्कुल काम नहीं करता है (लेकिन यह एक और प्रश्न के लिए एक विषय है ...)।

चीजों को और स्पष्ट करने के लिए, मैं footnotes plugin के व्यवहार की नकल करने की कोशिश कर रहा हूं, मैं अपने वर्डप्रेस ब्लॉग पर एक बुकमार्कलेट लिखकर उपयोग करता हूं जो अनिवार्य रूप से वही करता है।

https://rawgit.com/arielpontes/footnoter/master/index.html

उपयोग के दोनों मोड में ([1] प्रतिलिपि करने/चिपकाने:

यहाँ आप इनलाइन संदर्भ के लिए एक विकि की तरह वाक्य रचना के साथ पाठ चिपकाएं और उन्हें उचित पाद टिप्पणियों में पार्स कर सकते हैं एक डेमो पृष्ठ है डेमो पेज या [2] बुकमार्लेट का उपयोग करके), परिणामी एचटीएमएल के उचित सापेक्ष लिंक हैं। हालांकि, क्रोम पर मध्यम पर वापस चिपकने के बाद, वे पूर्ण हो जाते हैं, rawgit.com पर इंगित करते हैं और कार्यक्षमता तोड़ते हैं।

यदि मैं rawgit.com की बजाय अपनी स्थानीय मशीन से कोड चलाता हूं, हालांकि, लिंक क्रोम पर भी पेस्ट के बाद संबंधित रूप में रखे जाते हैं।

संभवतः क्या हो सकता है? इसे ठीक करने का कोई तरीका है?

Answer 1

टी एल; डॉ - एक है कि चिपकाया सामग्री के लिए प्रभारी कार्यक्रम क्लिपबोर्ड में कहते हैं कि है।

हर बार है कि आप क्लिपबोर्ड में कुछ कॉपी, अनुप्रयोग है कि करता है प्रतिलिपि वहाँ कई डेटा प्रकार रख सकते हैं, तो प्रोग्राम है जो आप paste में एक है कि इसके लिए सबसे अच्छा काम करता उपयोग करने के लिए सक्षम हो जाएगा। ब्राउज़र के मामले में - जब आप किसी वेबपृष्ठ की सामग्री चुनते हैं और अपने क्लिपबोर्ड पर प्रतिलिपि बनाते हैं - ब्राउज़र दो प्रकार (html/plain और text/html) बनाएगा, इसलिए यदि आप उस सामग्री को उस प्रोग्राम में पेस्ट करते हैं जो HTML को संभाल सकता है - वह डेटा जो आप करेंगे पेस्ट एचटीएमएल होगा, लेकिन यदि नहीं - वह डेटा सादा पाठ होगा। (- कोई फर्क नहीं पड़ता कि सामग्री कहां से चिपकाया जाएगा - यह वास्तव में जिस तरह से करने के लिए आप चाहते हैं दिखेगा इस तरह से)

1. अवहेलना सामग्री है कि ब्राउज़र क्लिपबोर्ड में सहेजता है:

   असल में आपके पास दो विकल्प

2. पेस्ट ईवेंट को हाइजैक करें, क्लिपबोर्ड से डेटा प्राप्त करें, जिस तरह से आप चाहते हैं उसे बदलें, और इसे स्वयं संपादक में रखें।

$('#text').on('paste', function(e) { 
 
    if ($('input[name=paste-type]:checked').val() == 'special') { 
 
    e.preventDefault(); 
 
    if (window.getSelection) { 
 
     sel = window.getSelection(); 
 
     if (sel.rangeCount) { 
 
     range = sel.getRangeAt(0); 
 
     range.deleteContents(); 
 
     node = document.createElement("p"); 
 
     text = 'Replacement text only for the paste' 
 
     node.appendChild(document.createTextNode(text)) 
 
     range.insertNode(node); 
 
     } 
 
    } 
 
    } 
 
}); 
 
$(document).on('copy', function(e) { 
 
    if ($('input[name=copy-type]:checked').val() == 'special') { 
 
    e.preventDefault(); 
 
    if (window.getSelection) { 
 
     sel = window.getSelection(); 
 
     if (sel.rangeCount) { 
 
     range = sel.getRangeAt(0); 
 
     nodes = range.cloneContents().childNodes 
 
     content = '' 
 
     contentPlain = '' 
 
     for (var i = 0; i < nodes.length; i++) { 
 
      node = nodes[i]; 
 
      contentPlain += node.textContent 
 
      if (node.nodeType == 3) { 
 
      content += node.textContent 
 
      } else if (node.nodeType == 1) { 
 
      content += node.outerHTML 
 
      } 
 
     } 
 
     } 
 
    } else { 
 
     content = '<span style="color: red; background: yellow;">Replacement text only for the copy</span>'; 
 
    } 
 
    e.originalEvent.clipboardData.setData('text/html', content); 
 
    e.originalEvent.clipboardData.setData('text/plain', contentPlain); 
 
    } 
 
}); 
 
$('#btn1').click(function() { 
 
    $('#ta1').val($('#text').html()); 
 
});

<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script> 
 
<div id="text" contenteditable="true" style="width: 400px; height :250px; border: 1px solid black;">Paste your text here...</div><br /> 
 
<textarea id="ta1" style="width: 400px; height: 150px; border: 1px solid green;" disabled="disabled"></textarea><br /> 
 
<button id="btn1">View HTML</button><br /> 
 
<label for="reg"><input type="radio" name="paste-type" value="regular" id="reg" checked="checked" /> Regular Paste</label> 
 
<label for="special"><input type="radio" name="paste-type" value="special" id="special" /> Force my paste</label> 
 
<br /><br /> 
 
<label for="copy-reg"><input type="radio" name="copy-type" value="regular" id="copy-reg" checked="checked" /> Regular Copy</label> 
 
<label for="copy-special"><input type="radio" name="copy-type" value="special" id="copy-special" /> Force my copy</label> 
 
<br /><br /> 
 
<div style="width: 400px; height: 300px; border: 1px solid red;"> 
 
    <p>Nonumes molestiae <b>scripserit mei eu. In sea singulis evertitur</b>, verear inimicus delicatissimi ad eam. Eu eros scripserit cum, nam ferri ludus saperet te, ex sea nostro prompta inciderint. Est at causae .</p> 
 
    <p>Quem feugait nam cu, sed <span style="background: red;">tantas meliore eu. Propriae efficiendi at</span> has, in usu nusquam noluisse, no nam natum verterem. Eu tation dignissim pro. Id eos wisi mollis commune</p> 
 
    <p>Ea has quando blandit <a href="#a1">intellegebat, iusto</a> fabulas eos in, per consul suscipit inciderint cu. Ea veri possim nostrud vis. Id civibi. Ut duo posse <a href="#a2">graecis voluptatibus</a>, mea eu errem possim quaestio.</p> 
 
</div>

उपरोक्त उदाहरण मैं विकल्प आप (मूल कॉपी/पेस्ट और विशेष कॉपी/पेस्ट) के साथ खेल सकते दिया है।
आप देख सकते हैं कि विशेष प्रतिलिपि के उदाहरण में - मैंने पृष्ठ में चयन से क्लिपबोर्ड में रखने के लिए html स्ट्रिंग बनाया है (DOM तत्वों के आधार पर)। इस तरह से मैं href (इसे पूर्ण पथ में बदलने के बिना) का सटीक मान प्राप्त करने में सक्षम था।

अपने सुविधाजनक के लिए, jsfiddle में ठीक उसी कोड: https://jsfiddle.net/m0ad3uaa/

Answer 2

मुद्दा क्लाइंट साइड है। ब्राउज़र पूर्ण URL के साथ लिंक कॉपी करते हैं, यह विभिन्न क्षेत्रों में लिंक पेस्ट करते समय उत्पन्न होने वाले मुद्दों को रोकने के लिए होता है।

उदाहरण के लिए, यदि मैं http://site1.com पर एक लिंक पर क्लिक करता हूं जो इस <a href="/myresource.jpg"> जैसा दिखता है, तो मुझे http://site1.com/myresource.jpg पर निर्देशित किया जाएगा।

अब, यदि आप उसी टैग को http://site2.com पर कॉपी करना चाहते हैं, तो लिंक अब http://site2.com/myresource.jpg पर इंगित करेगा, जो मौजूद हो सकता है या नहीं भी हो सकता है।

यह ज्यादातर मामलों में समझ में आता है, जैसे कि आप क्रोम का उपयोग कर रहे हैं, तो आप साइट, संपत्तियों और सभी की प्रतिलिपि बनाने की कोशिश करने की संभावना नहीं रखते हैं। यह उन मुद्दों को भी ठीक करता है जहां <img> टैग उन संपत्तियों को इंगित करेंगे जो मौजूद नहीं हैं।

हालांकि, यह सब कहकर, चुना जा रहा है के साथ प्रोग्रामेटिक रूप से गड़बड़ करना संभव है।

इस यहाँ एक महान उदाहरण है: http://bavotasan.com/2010/add-a-copyright-notice-to-copied-text/

अनिवार्य रूप से, तुम सिर्फ document.oncopy बदलने के लिए window.getSelection() लेने के लिए और अपने डोमेन नाम की सभी आवृत्तियां निकाल, सुनिश्चित करना है कि लिंक के बजाय रिश्तेदार हैं चाहता हूँ।