অনুলিপি করা ওয়েব টেক্সটে কীভাবে অতিরিক্ত তথ্য যুক্ত করা যায়

Question

কিছু ওয়েবসাইট এখন টেন্টের একটি জাভাস্ক্রিপ্ট পরিষেবা ব্যবহার করে যা অনুলিপি করা সামগ্রীতে পাঠ্য সংযোজন করে।

আপনি যদি এটি ব্যবহার করে কোনও সাইট থেকে পাঠ্য অনুলিপি করেন এবং তারপরে পেস্ট করেন তবে আপনি পাঠ্যের নীচে মূল সামগ্রীর লিঙ্ক পাবেন।

টেন্টও এটি ঘটে যেমন ট্র্যাক করে। এটি একটি ঝরঝরে কৌশল খুব ভালভাবে সম্পন্ন হয়েছে।

এটি করার জন্য তাদের স্ক্রিপ্ট চিত্তাকর্ষক - বরং ক্লিপবোর্ড (যা কেবলমাত্র IE এর পুরানো সংস্করণগুলি তাদের ডিফল্টরূপে করতে দেয় এবং যা সর্বদা বন্ধ করা উচিত) হস্তক্ষেপ করার চেষ্টা করার পরিবর্তে তারা আসল নির্বাচনটি হেরফের করে।

সুতরাং আপনি যখন পাঠ্যের একটি ব্লক নির্বাচন করেন তখন আপনার নির্বাচনের <div>অন্তর্ভুক্ত লুকানো হিসাবে অতিরিক্ত সামগ্রী যুক্ত করা হয় । আপনি যখন পেস্ট করবেন তখন অতিরিক্ত শৈলী উপেক্ষা করা হবে এবং অতিরিক্ত লিঙ্কটি উপস্থিত হবে।

পাঠ্যের সাধারণ ব্লকগুলি সহ এটি করা মোটামুটি সহজ, তবে আপনি যখন বিভিন্ন ব্রাউজারগুলিতে জটিল এইচটিএমএল জুড়ে সম্ভব সমস্ত নির্বাচন বিবেচনা করেন তখন একটি দুঃস্বপ্ন।

আমি একটি ওয়েব অ্যাপ্লিকেশন বিকাশ করছি - আমি চাই না যে কেউ অনুলিপি করা সামগ্রীটি ট্র্যাক করতে সক্ষম হবে এবং আমি কেবল একটি লিঙ্কের চেয়ে অতিরিক্ত তথ্য প্রাসঙ্গিক কিছু রাখতে চাই। এক্ষেত্রে টায়েন্টের পরিষেবা সত্যই উপযুক্ত নয়।

কেউ কি এমন কোনও ওপেন সোর্স জাভাস্ক্রিপ্ট লাইব্রেরি (এমন কোনও jQuery প্লাগ ইন বা অনুরূপ) জানেন যা অনুরূপ কার্যকারিতা সরবরাহ করে তবে এটি অভ্যন্তরীণ অ্যাপ্লিকেশন ডেটা প্রকাশ করে না?

Comments

আমার উত্তরটি একবার stackoverflow.com/questions/6344588/… এ দেখুন । আপনার প্রস্তাব অনুসারে এটি খুব একইভাবে করা হয়

— নিক্লাস

আরও দেখুন stackoverflow.com/questions/1203082/...

— Gnubie

দয়া করে এটি করবেন না। দয়া করে দয়া করে দয়া করে না।

— কাউচাঁদ

@ চৌচাঁদ কেন নয়? আমি স্প্যাম সাইটগুলিতে এটি কতটা বিরক্তিকর তা পাই, তবে এটি এমন একটি অ্যাপ্লিকেশনের জন্য যা উদ্ধৃতিগুলির জন্য ব্যবহার করা যেতে পারে এবং যেখানে অভ্যন্তরীণ ডেটা সংবেদনশীল। এজন্য আমি টায়েন্ট ব্যবহার করতে চাইনি।

— কিথ

আপনি কি সত্যি এটা করতে চান? একজন ব্যবহারকারী হিসাবে, আমি এটি ঘৃণা করি এবং আমি এই ক্রোধটিকে আপনার পণ্যটিতে পোর্ট করব: আমার ক্লিপবোর্ডটি স্পর্শ করবেন না!

— কোডিড্যাক্ট ডট

Answer 1

2020 আপডেট

সমাধান যা সাম্প্রতিক সমস্ত ব্রাউজারগুলিতে কাজ করে ।

document.addEventListener('copy', (event) => {
  const pagelink = `\n\nRead more at: ${document.location.href}`;
  event.clipboardData.setData('text', document.getSelection() + pagelink);
  event.preventDefault();
});

Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
<textarea name="textarea" rows="7" cols="50" placeholder="paste your copied text here"></textarea>

---

[পুরানো পোস্ট - 2020 আপডেটের আগে]

অনুলিপিযুক্ত ওয়েব পাঠ্যে অতিরিক্ত তথ্য যুক্ত করার দুটি উপায় রয়েছে।

1. নির্বাচন পরিচালনা

ধারণাটি হ'ল এটি দেখার জন্য copy event, তারপরে আমাদের অতিরিক্ত তথ্যের সাথে একটি লুকানো ধারক যুক্ত করুন domএবং এটিতে নির্বাচন প্রসারিত করুন।
এই পদ্ধতিটি c.bavota দ্বারা এই নিবন্ধ থেকে অভিযোজিত । এছাড়াও চেক করুন jitbit -এর সংস্করণ আরো জটিল ক্ষেত্রে জন্য।

• ব্রাউজারের সামঞ্জস্যতা : সমস্ত বড় ব্রাউজারগুলি, আইই> 8।
• ডেমো : জেফিডাল ডেমো ।
• জাভাস্ক্রিপ্ট কোড :

    function addLink() {
        //Get the selected text and append the extra info
        var selection = window.getSelection(),
            pagelink = '<br /><br /> Read more at: ' + document.location.href,
            copytext = selection + pagelink,
            newdiv = document.createElement('div');

        //hide the newly created container
        newdiv.style.position = 'absolute';
        newdiv.style.left = '-99999px';

        //insert the container, fill it with the extended text, and define the new selection
        document.body.appendChild(newdiv);
        newdiv.innerHTML = copytext;
        selection.selectAllChildren(newdiv);

        window.setTimeout(function () {
            document.body.removeChild(newdiv);
        }, 100);
    }

    document.addEventListener('copy', addLink);

2. ক্লিপবোর্ড পরিচালনা

ধারণাটি হ'ল দেখুন copy eventএবং ক্লিপবোর্ডের ডেটা সরাসরি সংশোধন করা। clipboardDataসম্পত্তি ব্যবহার করে এটি সম্ভব । মনে রাখবেন যে এই সম্পত্তিটি সমস্ত প্রধান ব্রাউজারে উপলব্ধ read-only; setDataপদ্ধতি ইন্টারনেট উপর শুধুমাত্র উপলব্ধ।

• ব্রাউজারের সামঞ্জস্যতা : আইই> 4।
• ডেমো : জেফিডাল ডেমো ।
• জাভাস্ক্রিপ্ট কোড :

    function addLink(event) {
        event.preventDefault();

        var pagelink = '\n\n Read more at: ' + document.location.href,
            copytext =  window.getSelection() + pagelink;

        if (window.clipboardData) {
            window.clipboardData.setData('Text', copytext);
        }
    }

    document.addEventListener('copy', addLink);

Comments

চিয়ার্স! দুর্ভাগ্যক্রমে আমাদের এটি IE এ কাজ করা দরকার তবে এটি কোনও খারাপ শুরু নয়।

— কিথ

"<p>> ট্যাগগুলির জন্য একটি কার্যকারিতা থাকতে হবে, এই স্ক্রিপ্টটির একটি স্মুথ সংস্করণ এখানে রয়েছে

— অ্যালেক্স

মনে রাখবেন যে "ক্লিপবোর্ড ম্যানিপুলেটিং" আপনি যদি পরিবর্তন করেন তবে ফায়ারফক্স, ক্রোম এবং সাফারিতে প্রাকৃতিকভাবে কাজ window.clipboardDataকরে event.clipboardData। আইই (v11 এছাড়াও) event.clipboardData jsfiddle.net/m56af0je/8

— মেমস

আপনি যদি গুগল অ্যানালিটিকস ইত্যাদি ব্যবহার করে থাকেন তবে ব্যবহারকারীরা আপনার সাইট থেকে কী অনুলিপি করছেন তা লগ করতে আপনি কোনও ইভেন্ট বন্ধ করতে পারেন। আকর্ষণীয়

— geedubb

প্রথম বিকল্পটি অনুলিপি করা পাঠ্যের নতুন লাইনের অক্ষরগুলিকে উপেক্ষা করে।

— সোহম

Answer 2

এটি উপরের পরিবর্তিত সমাধান থেকে ভ্যানিলা জাভাস্ক্রিপ্ট সমাধান তবে আরও ব্রাউজার সমর্থন করে (ক্রস ব্রাউজার পদ্ধতি)

function addLink(e) {
    e.preventDefault();
    var pagelink = '\nRead more: ' + document.location.href,
    copytext =  window.getSelection() + pagelink;
    clipdata = e.clipboardData || window.clipboardData;
    if (clipdata) {
        clipdata.setData('Text', copytext);
    }
}
document.addEventListener('copy', addLink);

Answer 3

JQuery এর আমি সংক্ষিপ্ততম সংস্করণ যা আমি পরীক্ষা করেছি এবং এটির কাজ করছি:

jQuery(document).on('copy', function(e)
{
  var sel = window.getSelection();
  var copyFooter = 
        "<br /><br /> Source: <a href='" + document.location.href + "'>" + document.location.href + "</a><br />© YourSite";
  var copyHolder = $('<div>', {html: sel+copyFooter, style: {position: 'absolute', left: '-99999px'}});
  $('body').append(copyHolder);
  sel.selectAllChildren( copyHolder[0] );
  window.setTimeout(function() {
      copyHolder.remove();
  },0);
});

Comments

ক্লিপবোর্ডে ফলাফলটি অনুলিপি করে দেওয়ার কোডটি কোথায়?

— vsync

@vsync আমি বিশ্বাস করি এটি অনুলিপি হওয়ার ঠিক আগে কার্যকারিতা যুক্ত করে (যা ব্যবহারকারী এটি শুরু করার পরে সিস্টেম দ্বারা করা হয়)।

— টেরানরিচ

@ ভিসিএনসি - টেররিচ যেমন বলেছিলেন, আমি সেই প্রশ্নের জবাব দেওয়ার চেষ্টা করেছি, যা অনুলিপি করা পাঠ্যে অতিরিক্ত তথ্য যুক্ত করার বিষয়ে ছিল, সুতরাং সমাধানটি কেবল এই অংশটি কভার করে।

— ব্যবহারকারী 2276146

Answer 4

প্রকল্পটি রেডমেজ থেকে https://github.com/niklasvh/jquery.plugin.clipboard করার জন্য এখানে jquery এ একটি প্লাগইন রয়েছে "এই স্ক্রিপ্টটি অনুলিপি করা হওয়ার আগে একটি অনুলিপি সংকলনের নির্বাচনের সামগ্রীতে পরিবর্তন করে, যার ফলে অনুলিপি করা হয় ব্যবহারকারী যা পছন্দ করেছেন তার থেকে আলাদা হচ্ছেন।

এটি আপনাকে কপিরাইটের তথ্য বা অন্যান্য সামগ্রী হিসাবে নির্বাচনের সামগ্রীতে সংযোজন / সংযোজন করতে দেয়।

এমআইটি লাইসেন্সের আওতায় মুক্তি পেয়েছে "

Comments

এটা খুব আশাব্যঞ্জক দেখাচ্ছে। এটি ইনলাইন স্টাইলগুলি ব্যবহার করে যা আমরা আমাদের সিএসপি দিয়ে অনুমতি দিই না, তবে এটি সম্ভাব্যভাবে মানিয়ে নেওয়া যেতে পারে। চিয়ার্স!

— কিথ

Answer 5

উত্তরের উপর উন্নতি করা, অনুলিপি পরে অনুলিপি নির্বাচন প্রতিরোধ করার জন্য নির্বাচন পুনরুদ্ধার।

function addLink() {
    //Get the selected text and append the extra info
    var selection = window.getSelection(),
        pagelink = '<br /><br /> Read more at: ' + document.location.href,
        copytext = selection + pagelink,
        newdiv = document.createElement('div');
    var range = selection.getRangeAt(0); // edited according to @Vokiel's comment

    //hide the newly created container
    newdiv.style.position = 'absolute';
    newdiv.style.left = '-99999px';

    //insert the container, fill it with the extended text, and define the new selection
    document.body.appendChild(newdiv);
    newdiv.innerHTML = copytext;
    selection.selectAllChildren(newdiv);

    window.setTimeout(function () {
        document.body.removeChild(newdiv);
        selection.removeAllRanges();
        selection.addRange(range);
    }, 100);
}

document.addEventListener('copy', addLink);

Comments

@ সুকিমোটো মিতসুমাসা থাকতে হবেvar range = selection.getRangeAt(0);

— ভোকিয়েল

পাঠ্য নির্বাচন পুনরুদ্ধার করা একটি ভাল ধারণা, অন্যথায়, এটি ডিফল্ট ব্রাউজার আচরণটি ভেঙে দেয়।

— সের্গেই

Answer 6

2018 এর উন্নতি

document.addEventListener('copy', function (e) {
    var selection = window.getSelection();
    e.clipboardData.setData('text/plain', $('<div/>').html(selection + "").text() + "\n\n" + 'Source: ' + document.location.href);
    e.clipboardData.setData('text/html', selection + '<br /><br />Source: <a href="' + document.location.href + '">' + document.title + '</a>');
    e.preventDefault();
});

Comments

আপনি যখন অনুলিপি-পেস্ট করবেন তখন বিন্যাসটি হারাবেন ( <a> , <img> , <b> এবং অন্যান্য ট্যাগগুলি)। নির্বাচিত পাঠ্যের HTML কোড পাওয়া ভাল। এই উত্তরটি থেকে getSelectionHtml () ফাংশনটি ব্যবহার করুন : [ স্ট্যাকওভারফ্লো.com/a/4177234/4177020 ] এবং এখন আপনি এই স্ট্রিংটিকে এটি var selection = window.getSelection();দ্বারা প্রতিস্থাপন করতে পারেন :var selection = getSelectionHtml();

— দিমিত্রি কুলাহিন

Answer 7

এছাড়াও একটি সামান্য খাটো সমাধান:

jQuery( document ).ready( function( $ )
    {
    function addLink()
    {
    var sel = window.getSelection();
    var pagelink = "<br /><br /> Source: <a href='" + document.location.href + "'>" + document.location.href + "</a><br />© text is here";
    var div = $( '<div>', {style: {position: 'absolute', left: '-99999px'}, html: sel + pagelink} );
    $( 'body' ).append( div );
    sel.selectAllChildren( div[0] );
    div.remove();
    }



document.oncopy = addLink;
} );

Answer 8

এটি মাইক্রোসফ্ট এজ এর সাথে উপরের 2 টি উত্তরের সংমিশ্রণ।

আমি শেষের দিকে মূল নির্বাচনটি পুনরুদ্ধারও যুক্ত করেছি, কারণ এটি কোনও ব্রাউজারে ডিফল্টরূপে প্রত্যাশিত।

function addCopyrightInfo() {
    //Get the selected text and append the extra info
    var selection, selectedNode, html;
    if (window.getSelection) {
        var selection = window.getSelection();
        if (selection.rangeCount) {
            selectedNode = selection.getRangeAt(0).startContainer.parentNode;
            var container = document.createElement("div");
            container.appendChild(selection.getRangeAt(0).cloneContents());
            html = container.innerHTML;
        }
    }
    else {
        console.debug("The text [selection] not found.")
        return;
    }

    // Save current selection to resore it back later.
    var range = selection.getRangeAt(0);

    if (!html)
        html = '' + selection;

    html += "<br/><br/><small><span>Source: </span><a target='_blank' title='" + document.title + "' href='" + document.location.href + "'>" + document.title + "</a></small><br/>";
    var newdiv = document.createElement('div');

    //hide the newly created container
    newdiv.style.position = 'absolute';
    newdiv.style.left = '-99999px';

    // Insert the container, fill it with the extended text, and define the new selection.
    selectedNode.appendChild(newdiv); // *For the Microsoft Edge browser so that the page wouldn't scroll to the bottom.

    newdiv.innerHTML = html;
    selection.selectAllChildren(newdiv);

    window.setTimeout(function () {
        selectedNode.removeChild(newdiv);
        selection.removeAllRanges();
        selection.addRange(range); // Restore original selection.
    }, 5); // Timeout is reduced to 10 msc for Microsoft Edge's sake so that it does not blink very noticeably.  
}

document.addEventListener('copy', addCopyrightInfo);