标签: getselection

我有contentEditable元素(可以是p,div,...),我想在其中得到插入符号(光标).我通常可以用这段代码实现它:

var position = window.getSelection().getRangeAt(0).startOffset;

这个工作正常,而元素只包含文本.但是当元素包含一些HTML格式时,返回的位置相对于包含的HTML元素中的插入位置.

我们假设contentEditable元素的内容是这样的:

AB<b>CD</b>EF

如果插入符号在内部<b></b>,让我们说在C和D之间,上面代码的返回位置是1而不是3(从contentEditable元素的内容开始算起)

任何人都可以提出解决方案吗？

我可以使用以下代码来获取所选文本:

text=window.getSelection(); /// for Firefox text=document.selection.createRange().text; /// for IE

但是如何获得所选的Html,其中包括text和html标签？

如果我将内容插入到TinyMCE已经选择的textarea中,那么设置光标/插入符号位置的最佳方法是什么？

我正在使用tinyMCE.execCommand("mceInsertRawHTML", false, content);插入内容,我想将光标位置设置为内容的结尾.

双方document.selection并myField.selectionStart不会为这方面的工作,我觉得好像这将是由TinyMCE的支持(通过的东西,我不能在他们的论坛上找到)或它会是一个非常丑陋的黑客.

后来:它变得更好; 我只是想通了,当你在WordPress中加载TinyMCE时,它会在嵌入式iframe中加载整个编辑器.

稍后(2):我可以使用document.getElementById('content_ifr').contentDocument.getSelection();将选择作为字符串,但不是我可以使用的选择对象getRangeAt(0).一点一点地进步.

我有一个带有文本内容的html页面.在选择任何文本并按突出显示按钮时,我可以更改所选文本的样式以突出显示相同的文本.为了实现这个功能,我写了以下方法.

sel = window.getSelection();
var range = sel.getRangeAt(0);
var span = document.createElement('span');
span.className = "highlight" + color;
range.surroundContents(span);

如果您选择没有html标记的文本,但是当文本中间有任何html标记时,它会正常工作

无法在'Range'上执行'surroundContents':Range已部分选择了非Text节点.

如何解决这个问题呢.是否可以为每个部分分别突出显示相同的内容(除以html标签)？

我有一个脚本可以更改已选择的文本的背景颜色.但是,当跨多个元素/标签选择文本时,我遇到了问题.

我得到的代码是:

var text = window.getSelection().getRangeAt(0);
var colour = document.createElement("hlight");
colour.style.backgroundColor = "Yellow";
text.surroundContents(colour);

输出的错误是:

Error: The boundary-points of a range does not meet specific requirements. =
NS_ERROR_DOM_RANGE_BAD_BOUNDARYPOINTS_ERR
Line: 7

我相信这与getRange()函数有关,虽然我不太清楚如何继续,因为我是javascript的初学者.

有没有其他方法可以复制我想要实现的目标？

非常感谢.

我想将元素放在选定文本上方.但我无法弄清楚坐标.

var sel = document.getSelection();
  if(sel != null) {
    positionDiv();
}

示例:(图片)

alt text http://www.freeimagehosting.net/uploads/bf4035f29f.png

我正在构建一个基于Web的注释工具,最终用户可以从HTML文档中选择和注释一段文本.从编程上讲,使用"window.getSelection"和"getRangeAt"可以直接访问和使用所选文本和相应的范围.

但是,当我尝试将所有这些放在一个跨浏览器的应用程序中时,我遇到了一个问题.一切都可以在Firefox中找到,但是在Safari中我立即注意到当我点击HTML按钮(即"注释"按钮)时,当前用户文本选择消失,好像点击按钮重新定位了文本插入符号.我尝试访问window.getSelection的代码从此按钮中的脚本执行,然后报告不存在选择.

我深入研究了Google Docs,特别是他们的文字处理应用程序如何处理这个问题,因为选择文本和点击"Bold"或"Change Font"的行为和机制基本上与我的注释功能相对应.在Google文档中,他们会将要编辑的文档文本加载到iframe中.玩弄这个,我了解到Firefox开箱即用支持包含多个框架或iframe的网页中的多个选择范围.换句话说,我可以在基页中选择一段文本,而iframe中的单独文本部分没有第一个选择消失.此Google Docs解决方案适用于Firefox和Safari(我感兴趣的两种浏览器).但是当我构建一个简单的示例页面来测试这个解决方案时,它在Safari中不起作用.只要我单击按钮或在根页面(iframe外部)中选择文本,当前iframe选择的文本就会消失.

任何人都知道我在这里缺少什么让这个工作？或者建议另一种方法让它发挥作用？

我的问题与此类似,但我需要一种方法来在Firefox中使用Javascript获取选择右侧的坐标.我做了一个小例子来说明我的意思:

我从其他帖子得到的代码如下:

var range = window.getSelection().getRangeAt(0);
var dummy = document.createElement("span");
range.insertNode(dummy);
var box = document.getBoxObjectFor(dummy);
var x = box.x, y = box.y;
dummy.parentNode.removeChild(dummy);

这给了我选择开始的坐标.有没有办法检索选择结束的坐标？

我有一个 contenteditable div 并希望在用户单击span.

我的问题是，当我单击 时span，选择未选中，因此window.getSelection().toString()返回''。

我怎样才能在点击a 时span让它工作？

我知道实际的getSelection()作品，因为如果我window.getSelection().toString()在setTimeout5 秒内换行，5 秒后，我会得到选定的文本！

我的代码：

$('#btn').click(function() {
  console.log(window.getSelection().toString()); //returns ''
});

#btn {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id='btn'>get selection</span>
<br><br>
<div id='ce' contenteditable='true'>test</div>

我正在尝试将样式应用于用户选择的文本（鼠标拖动），我需要获取所选文本的开始和结束索引。

我试过使用“indexOf(...)”方法。但它返回所选子字符串的第一次出现。我想要子字符串相对于原始字符串的实际位置。例如..，如果我在位置 3 [ YOL O Cobe]处选择字母“O” ，我希望索引为 3，但 indexOf() 方法返回 1，这是 [Y O LO ] 中第一次出现的“O”科比]。

有没有其他方法可以获取所选文本的实际开始和结束索引而不是第一次出现？

function getSelectionText()
{
    var text = "";
    if (window.getSelection) {
        text = window.getSelection().toString();
    }
    return text;
}
document.getElementById('ip').addEventListener('mouseup',function(e)
{
        var txt=this.innerText;
        console.log(txt);
        var selectedText = getSelectionText();
        console.log(selectedText);
        var start = txt.indexOf(selectedText);
        var end = start + selectedText.length;
        if (start >= 0 && end >= 0){
    	    console.log("start: " + start);
    	    console.log("end: " + end);
        }
});

<div id="ip">YOLO Cobe</div>