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