ブラウザのブックマークレットでアクティブなウィンドウから選択したテキストをプル＆ストアする

Question

まず、プログラマーではないことを明確にする必要があります（今後のプロジェクトの詳細を作成するだけです）。ですから、いくつかの質問がばかげて聞こえたら、私には簡単に行きましょう。

基本的には、ブラウザのブックマークレットを作成する必要があります。これはユーザーのステータスバーにドラッグすることができます。だから、これがうまくいくはずです。私が特定のウェブページにいるとき、ページからいくつかのコンテンツを選択し、ブックマークレットをクリックすることができます。これにより、ブックマークレットは選択したすべてのデータをデータベースに保存する必要があります。

私が知りたいことは、選択したテキストからすべての書式、ハイパーリンクなどを保存したい場合に可能なことです。たとえば、ブラウザウィンドウで選択するウェブページの一部には、いくつかの画像、リンク、太字のテキスト、3つの段落が含まれている場合があります。ブックマークレットの簡単なクリックでこれらのすべてをキャプチャすることは可能ですか？

ありがとうございました。

PS：このウェブサイトでこの情報を検索してみましたが、この特定の問題を解決する答えはありません。

Answer 1

選択したHTMLを抽出することによって、いくつかの方法が得られます。 CSSの書式設定を取得するには、私の答えの範囲を超えて、かなり重い処理が必要です。また、選択したHTMLをサーバーに送信する必要があります。そのためには、Ajaxを使用する必要があります。

Ajaxの部分はかなりシンプルです。 Ajaxを使用してサーバーに値を投稿する方法については、多数のチュートリアルがあります。しかし、あなたはあなたがポストしているサーバーと同じドメインのページ上でしか動かないので、ブックマークレットとしてこれを行う点を否定するかもしれないことに注意する必要があります。ウェブ上で。

ここではすべての主要なブラウザで現在選択されているHTMLを取得する機能です。

function getSelectionHtml() { 
    var html = ""; 
    if (typeof window.getSelection != "undefined") { 
     var sel = window.getSelection(); 
     if (sel.rangeCount) { 
      var container = document.createElement("div"); 
      for (var i = 0, len = sel.rangeCount; i < len; ++i) { 
       container.appendChild(sel.getRangeAt(i).cloneContents()); 
      } 
      html = container.innerHTML; 
     } 
    } else if (typeof document.selection != "undefined") { 
     if (document.selection.type == "Text") { 
      html = document.selection.createRange().htmlText; 
     } 
    } 
    return html; 
} 

alert(getSelectionHtml());