2016-07-29 8 views
13

divのリッチテキストをcontenteditable="true"とコピーし、それをMediumドラフトに貼り付けています。ほとんどの書式設定は問題なく保存されていますが、何らかの理由ですべての相対リンクが絶対パスに変換されているとは限りません。私はこれがどのようなステップで起こるか分かりません。私は、ミディアムが「ペースト」イベントを聞いていると思っているとさえ思っていましたこれは最悪のシナリオです。なぜなら、私はそれをほとんど制御できないからです。しかしもしそうなら、私はコンテンツをコピーしたときのページのURLにどのようにアクセスできますか?確かに、他のブラウザで確認したところ、私はChromeの欠陥であり、Mediumのものではないと結論づけました。 Safariでは完全に動作しますが、Firefoxではまったく動作しません(ただし、別の質問のトピックです...)。Chromeがコピー/ペースト時に絶対リンクへの相対リンクを変更しないようにするにはどうすればよいですか?

もっと明確にするために、私はfootnotes pluginの動作を模倣しようとしています。Wordpressのブログでは、本質的に同じブックマークレットを書いています。

ここでは、インライン参照のwikiのような構文でテキストを貼り付け、適切な脚注にそれらを解析することができますデモページです:使用法の両方のモードで

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

([1]コピー/貼り付けは、デモページや[2]ブックマークレットを使用して)、結果のhtmlには適切な相対リンクがあります。ただし、Chromeのメディアに貼り付けた後は、絶対値はrawgit.comになり、機能が無効になります。

ローカルマシンからrawgit.comではなくコードを実行すると、リンクはChrome上でも貼り付け後に相対形式で保持されます。

何が起こっている可能性がありますか?それを修正する方法はありますか?

答えて

2

TL; DR - 貼り付けられたコンテンツの担当クリップボードにそれを置くプログラムであるもの。

クリップボードに何かをコピーするたびに、コピーがあり、いくつかのデータ型を置くことができないアプリケーションなので、あなたがpasteにそれのために最適なものを使用することができますプログラム。ブラウザの場合、ウェブページのコンテンツを選択してクリップボードにコピーすると、ブラウザは2種類のタイプ(html/plaintext/html)を作成するので、そのコンテンツをhtmlを処理できるプログラムに貼り付けると、貼り付けはhtmlになりますが、そうでなければそのデータはプレーンテキストになります。 ( - コンテンツをペーストする場所に関係なく - それはあなたが望む正確な方法には見ていないだろう。この方法は)

  1. オーバーライドブラウザはクリップボードに保存したコンテンツ:

    は、基本的には次の2つのオプションがあります

  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/

1

問題は、クライアント側です。ブラウザはリンクを絶対URLでコピーします。これは、リンクを別の領域に貼り付けるときに発生する問題を防ぐためです。

たとえば、<a href="/myresource.jpg">のようなリンクをクリックすると、http://site1.com/myresource.jpgに転送されます。

これで、同じタグをhttp://site2.comにコピーすると、リンクはhttp://site2.com/myresource.jpgを指していた可能性があります。

これはほとんどの場合、Chromeを使用している場合と同じように、サイト、アセット、およびすべてをコピーしようとすることはまずありません。また、<img>タグが存在しないアセットを指している問題も修正されています。

しかし、そのすべてを言って、選択されているものをプログラムによって混乱させることは可能です。

ここではこれの良い例があります: http://bavotasan.com/2010/add-a-copyright-notice-to-copied-text/

基本的に、あなたは、リンクではなく、相対的であることを保証し、window.getSelection()を取り、あなたのドメイン名のすべてのインスタンスを削除するにはdocument.oncopyを変更したいだけでしょう。

+0

あなたの回答が、この質問にまだ存在していない新しい情報をどのくらい正確に与えるかを教えてください。 – Dekel

関連する問題