用於在Javascript中添加註釋/註釋的示例代碼

Question

我有一個HTML文件，我正在用Webkit打開它。

我想開發一個應用程序，在打開它之後，我應該能夠選擇一些文本並進行標記（例如按下「註釋文本」按鈕）。

當我按下按鈕時，一個音符圖像應該出現在右邊，但我無法弄清楚所選的文本位置，我也不知道如何在右邊添加浮動圖像（也許是div元素） ？

任何人都可以給我一個關於在Javascript中添加註釋/註釋的示例代碼片段嗎？

Answer 1

我最近在Quirksmode.org上使用this文章開始識別Javascript中的用戶選擇。從本質上講，IE與其他瀏覽器在選擇信息方面有所不同：Mozilla和其他瀏覽器提供了相對強大的Selection，而IE提供了TextRange。

如果您能夠堅持使用基於Webkit的瀏覽器，則可以使用由window.getSelection()返回的選擇來識別選定文本。

至於在選定文本附近添加浮動圖像，您可以使用Selection的anchorNode屬性來查找要添加圖像的附近元素。要做圖像的實際定位 - 是的，可能在div，我建議學習positioning in CSS。