javascript - 用于从事件窗口中提取和存储所选文本的浏览器书签

Question

首先，我应该澄清我不是程序员(只是制定即将进行的项目的细节)。所以，如果有些问题听起来很愚蠢，请对我宽容一些。

基本上，我需要创建一个浏览器书签。可以将其拖到用户的状态栏上。所以它应该是这样工作的:当我在任何特定网页上时，我可以从页面中选择一些内容 block 并单击书签。执行此操作时，小书签应将所有选定的数据保存在我的数据库中。

现在，我想知道的是，如果我还想存储所选文本中的所有格式、超链接等，这是否可行。例如，我在浏览器窗口上选择的网页部分可能包括一些图像、链接、粗体文本和三个段落。我是否可以通过简单地单击书签来捕获所有这些内容？

非常感谢您的帮助。

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