Chrome擴展程序內容可編輯，可獲取並設置插入符號

Question

在Google擴展程序中使用DOM

我正在創建一個Google Chrome擴展程序 ，需要在其中將鏈接插入gmail窗口。 我能夠在窗口頂部創建一個簡單的擴展按鈕，並執行替換電子郵件文檔中元素的代碼。

現在，我想在鍵入時在contenteditable部分中添加鏈接。 似乎應該有一種簡單的方法來用javascript文檔對象模型中的鏈接替換文本。 同樣，這僅適用於chrome，因為我不打算在不久的將來編寫Firefox或版本。

最初，我嘗試執行以下操作：

1. 從當前插入符號位置插入文本
2. 捕獲插入符位置。
3. 通過插入位置設置插入符的位置。

getSelection，不是那么快

我嘗試在gmail上下文中使用window.getSelection （這是一個設置為contenteditable的主體元素，並嵌入gmail標簽的iframe中）以獲取當前范圍和位置。 該選擇始終為空，並且不包含任何范圍，無論是否選擇了文本。

我發現getSelection代碼不起作用的原因是因為在錯誤的窗口上選擇了document.getSelection 。 在gmail中創建新郵件時，有5個iframe（Windows）可用。 在此框架內部有一個稱為嵌套的嵌套iframe，需要調用getSelection以獲得正確的文本選擇。 這是一些代碼，可讓您在電子郵件的contenteditable區域中獲得選定的插入符位置。

這是獲取gmail文檔窗口選擇的一種方法

var mySelection = $("iframe")[4].contentDocument.
    querySelector("iframe").contentDocument.getSelection();

首次替換文字

希望我現在已經接近解決方案了。 抱歉，如果它太草率，我找不到有關如何編寫此代碼的任何好的文檔。

// Select the keyword
var range = s.getRangeAt(0);
var keyEl = range.startContainer.splitText(index);
var newRange = doc.createRange();
newRange.selectNode(keyEl);
s.removeAllRanges();
newRange.setEnd(keyEl, length);
s.addRange(newRange);

// Insert the link
var newLink = document.createElement("a");
newLink.setAttribute("href", value);
s.removeAllRanges();
newRange.surroundContents(newLink);

// Set the position
newRange.setStartAfter(newLink);
newRange.collapse(true);
s.addRange(newRange);

這幾乎可以完美地工作，但是問題在於文本插入符位於鏈接內部，因此剛插入后鍵入的任何文本都將插入鏈接。 這是個大問題。 而且，通過嘗試一些事情，我能夠使該問題部分消失。 一個類似的新問題導致一些怪異的鏈接擴展到以下單詞，但僅包含幾個字符。

希望最終嘗試進行文本替換

// find position in text 
var index = s.focusNode.data.search(keyword);
var length = keyword.length;

var range = s.getRangeAt(0);
var keyEl = range.startContainer.splitText(index);
var newRange = doc.createRange();
newRange.selectNode(keyEl);
s.removeAllRanges();
newRange.setEnd(keyEl, length);
s.addRange(newRange);

var newLink = document.createElement("a");
newLink.setAttribute("href", value);
$(newLink).css("text-decoration", "none");
$(newLink).css("cursor", "pointer");
$(newLink).css("color", "color:#3366FF");
newRange.surroundContents(newLink);
newRange.collapse(false);
s.removeAllRanges();
s.addRange(newRange);

在我現在已經消失的許多試驗中，似乎有一個普遍存在的問題。 這產生了一些怪異的鏈接，延伸到以下單詞。

隨時幫助我清理代碼，使其更簡潔

Answer 1

如果您完全知道要插入插入符號的位置，則應執行以下操作：

var node = someTextNode;
var caret = 10; // insert caret after the 10th character
var range = document.createRange();
range.setStart(node,caret);
range.setEnd(node,caret);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);

但是，這僅適用於DOM文本節點。 因此，如果您想操作contenteditable div或類似內容的內容，則必須遞歸遍歷其子元素並檢查文本節點。

我最近寫了一個Chrome擴展程序，可以在包括GMail在內的網站上進行文本替換-這是相應jQuery插件的來源，如果適合您的用例，請隨意利用它： https : //github.com/squidpeople/ASCIImoji/blob/ master / asciimoji.jquery.js