브라우저 북마크가 활성 창에서 선택한 텍스트를 가져오고 저장하는 방법

Question

먼저 프로그래머가 아니라는 것을 분명히해야합니다 (곧 나오는 프로젝트의 세부 사항을 다룰뿐입니다). 그러니 약간의 질문이 어리석게 들리면 나에게 쉽게가주십시오.

기본적으로 브라우저 북마크릿을 만들 필요가 있습니다. 이것은 사용자의 상태 표시 줄로 끌 수 있습니다. 그래서 이것이 어떻게 작동해야합니까? 특정 웹 페이지에있을 때, 페이지에서 일부 청크를 선택하고 북마크를 클릭 할 수 있습니다. 이렇게하면 북마크릿은 선택한 데이터베이스의 모든 데이터를 내 데이터베이스에 저장해야합니다.

이제 내가 선택한 텍스트에서 모든 서식, 하이퍼 링크 등을 저장하려는 경우 이것이 가능한지 알고 싶습니다. 예를 들어 브라우저 창에서 선택한 웹 페이지의 일부에는 일부 이미지, 링크, 굵게 표시된 텍스트 및 3 개의 단락이 포함될 수 있습니다. 북마크릿을 간단하게 클릭하여이 모든 것을 캡처 할 수 있습니까?

도움을 주셔서 감사합니다.

추신 :이 웹 사이트에서이 정보를 검색해 보았지만이 특정 문제를 해결할만한 답변이 없습니다.

Answer 1

선택한 HTML을 추출하여 몇 가지 방법을 얻을 수 있습니다. CSS 형식을 얻으려면 꽤 많은 처리가 필요합니다. 이는 제 답변의 범위를 벗어납니다. 선택한 HTML을 서버로 보내야합니다.이 경우 Ajax를 사용해야합니다.

Ajax 부분은 매우 간단합니다. Ajax를 사용하여 서버에 값을 게시하는 방법에 관한 튜토리얼이 많이있다. 그러나 게시하는 서버와 동일한 도메인의 페이지에서만 작동한다는 점을 알아야하므로 어디서나 사용할 수 없으므로 북마크 릿으로 사용하지 않아도됩니다. 웹에서.

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

: 여기

모든 주요 브라우저에서 현재 선택된 HTML을 유도 할 수있는 기능입니다