Marque-page du navigateur pour extraire et stocker le texte sélectionné de la fenêtre active

Question

Tout d'abord, je dois préciser que je ne suis pas un programmeur (je travaille simplement sur les détails d'un projet à venir). Alors s'il vous plaît, allez-y doucement si certaines questions semblent idiotes.

Fondamentalement, j'ai besoin de créer un bookmarklet de navigateur. Cela peut être glissé dans la barre d'état de l'utilisateur. Donc, voici comment cela devrait fonctionner: quand je suis sur une page Web particulière, je peux sélectionner un morceau de contenu de la page et cliquez sur le bookmarklet. En faisant cela, le bookmarklet devrait enregistrer toutes les données sélectionnées dans ma base de données.

Maintenant, ce que je voudrais savoir, c'est si c'est possible si je veux aussi stocker tous les formatages, liens hypertextes, etc à partir du texte sélectionné. Par exemple, la partie de la page Web que je sélectionne dans une fenêtre de navigateur peut inclure des images, des liens, du texte en gras et trois paragraphes. Est-il possible pour moi de capturer tout cela par un simple clic sur un bookmarklet?

Merci beaucoup pour votre aide. PS: J'ai essayé de rechercher cette information sur ce site Web, mais aucune réponse ne semble pleuvoir avec ce problème spécifique.

Answer 1

Vous pouvez obtenir une partie du chemin en extrayant le code HTML sélectionné. Pour obtenir le formatage CSS aussi, vous aurez besoin d'un traitement assez lourd, ce qui dépasse la portée de ma réponse. Vous devrez également envoyer le code HTML sélectionné au serveur, pour lequel vous devrez utiliser Ajax.

La partie Ajax est assez simple. Il y a des tonnes de tutoriels autour de comment publier une valeur sur le serveur en utilisant Ajax. Cependant, vous devez être conscient que cela ne fonctionnera que sur une page du même domaine que le serveur auquel vous envoyez des messages. Cela peut annuler le fait de le faire en tant que bookmarklet, car il ne peut pas être utilisé n'importe où sur le Web.

est ici une fonction qui obtient le HTML actuellement sélectionné dans tous les principaux navigateurs:

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());