Question

我正在编写一个脚本，用户需要在该脚本中选择一些通过ajax发送到后端脚本的文本，以便进一步处理。

我可以选择纯文本节点或文本节点，其中包含粗体，斜体或带下划线的文本。

例如

<p>This is <strong>some</strong> cool <em>italic</em> text, <u>really!</u></p>

所以，这很有效，那很酷。

然而，问题是，如果文本节点以hsome粗体，斜体或带下划线的文本或甚至标题开头，它会在firefox控制台上输出以下错误：

The boundary-points of a range does not meet specific requirements." code: "1 range.surroundContents($('<span...wAnno_'+newLen+'"></span>').get(0));

当用户选择以下内容时输出错误：

<strong>Mark says</strong> Hi

OR

<em>Mark says</em> Hi

OR

<u>Mark says</u> Hi

即使文本包含在标题标记内，例如<h2>test</h2>

，也会输出相同的错误

我的代码如下：

var select = window.getSelection();
var parents = $(select.focusNode).parents('.the-content');

if($(select.focusNode).parent().hasClass('.highlighted')) {
    alert('This text is already highlighted');
} else {
    for(var i = 0; i < select.rangeCount; i++) {
        var range = select.getRangeAt(i); 
        range.surroundContents($('<span class="newHighlight" id="newHigh_'+newLen+'"></span>').get(0));
    }
}

var selectedText = select.toString();

我需要帮助解决这个问题。

帮助代码将非常棒。

Answer 1

问题是surroundContents的{{1}}方法无法在开始和结束边界位于不同元素内的范围内工作，因为在元素中包含此类范围的内容会不生成有效的HTML。如果您需要更改Range的背景颜色，可以使用Range的以下技巧：

document.execCommand

否则，您需要遍历范围内的文本节点，并使用function highlight(colour) { var range, sel; if (window.getSelection) { // Non-IE case sel = window.getSelection(); if (sel.getRangeAt) { range = sel.getRangeAt(0); } document.designMode = "on"; if (range) { sel.removeAllRanges(); sel.addRange(range); } // Use HiliteColor since some browsers apply BackColor to the whole block if ( !document.execCommand("HiliteColor", false, colour) ) { document.execCommand("BackColor", false, colour); } document.designMode = "off"; } else if (document.selection && document.selection.createRange) { // IE case range = document.selection.createRange(); range.execCommand("BackColor", false, colour); } }围绕每个文本节点，这不是一件容易的事。我一直在研究一个跨浏览器范围和选择库，其中包含一个模块，用于将CSS类应用于选择的内容或范围http://code.google.com/p/rangy/，尽管该模块距离被记录并且还有几天的时间。释放。

范围的边界点不符合特定要求

1 个答案: