在contenteditable div中选择范围（第2轮） [英] Select range in contenteditable div (round 2)

问题描述

作为后续在contenteditable div中选择范围

Stackoverflow不允许我对Tim的答案发表评论，但我刚刚将Tims代码添加到jsfiddle中，但我没有看到它在Chrome或Edge上工作现在，也许它在早期的浏览器上工作

  var mainDiv = document.getElementById（main）; 
 var startNode = mainDiv.firstChild.firstChild; 
 var endNode = mainDiv.childNodes [2] .firstChild; 
 
 var range = document.createRange（）; 
 range.setStart（startNode，6）; // 6是Hello world中world的偏移量
 range.setEnd（endNode，7）; // 7是this is的长度
 var sel = window.getSelection（）; 
 sel.removeAllRanges（）; 
 sel.addRange（range）; 
  

https://jsfiddle.net/Abeeee/zc7kwar8/1/

边缘抛出控制台错误Invalid argument指向range.setStart命令（第6行），Chrome控制台显示Uncaught TypeError：无法在'Range'上执行'setStart'：参数1在相同的range.setStart行上不是'Node'类型。 p>

有人有关于如何在现代浏览器上进行这项工作的建议吗？ （Chrome版本62.0.3202.94（官方版本）（64位））

感谢Abe

解决方案实际上 startNode 和 endNode 都是 undefined ，因为通过 mainDiv.firstChild 和 mainDiv.childNodes [2] 指向2个文本节点，它没有子元素，这就是为什么通过调用 firstChild 来获得 undefined 。

实际上，这些文本节点是由您在所有标签之间换行创建的，因此您需要指出右侧元素。

这就是您的 startNode 和 endNode 定义：

  var mainDiv = document.getElementById （主要）; 
 var startNode = mainDiv.childNodes [1] .firstChild; 
 var endNode = mainDiv.childNodes [5] .firstChild; 
  

演示：

var mainDiv = document.getElementById（main）; var startNode = mainDiv.childNodes [1]。 firstChild; var endNode = mainDiv.childNodes [5] .firstChild; console.dir（mainDiv.childNodes）; console.log（endNode）; var range = document.createRange（）; range.setStart（startNode，6）; // 6是Hello world范围内world的偏移量.setEnd（endNode，7）; // 7是this is的长度var sel = window.getSelection（）; sel.removeAllRanges（）; sel.addRange（range）;

 < div id =maincontenteditable =truestyle =border：solid 1px black; width：300px; height：300px > < div id ='one'> Hello world！< / div> < div id ='two'> <峰; br> < / DIV> < div id ='three'>这是一段< / div>< / div>  

b $ b

As a follow up to Select range in contenteditable div

Stackoverflow doesn't allow me comment to Tim's "answer", but I've just tried the Tims code into jsfiddle and I don't see it working on Chrome or Edge now, maybe it worked on an earlier browser

var mainDiv = document.getElementById("main");
var startNode = mainDiv.firstChild.firstChild;
var endNode = mainDiv.childNodes[2].firstChild;

var range = document.createRange();
range.setStart(startNode, 6); // 6 is the offset of "world" within "Hello world"
range.setEnd(endNode, 7); // 7 is the length of "this is"
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);

https://jsfiddle.net/Abeeee/zc7kwar8/1/

Edge throws the console error "Invalid argument" pointing at the range.setStart command (line 6), and the Chrome console says "Uncaught TypeError: Failed to execute 'setStart' on 'Range': parameter 1 is not of type 'Node'" on the same range.setStart line.

Does anyone have an suggestion on how to make this work on a "modern" browser? (Chrome Version 62.0.3202.94 (Official Build) (64-bit))

Thanks Abe

解决方案

In fact startNode and endNode are undefined, because by mainDiv.firstChild and mainDiv.childNodes[2] you were pointing to 2 text nodes, which don't have child elements, that's why you will get undefined by calling firstChild upon them.

In fact these text nodes are created by the fact you make a new line between all your tags, so you need to point to the right elements.

This is how should your startNode and endNode be defined:

var mainDiv = document.getElementById("main");
var startNode = mainDiv.childNodes[1].firstChild;
var endNode = mainDiv.childNodes[5].firstChild;

Demo:

var mainDiv = document.getElementById("main");
var startNode = mainDiv.childNodes[1].firstChild;
var endNode = mainDiv.childNodes[5].firstChild;
console.dir(mainDiv.childNodes);
console.log(endNode);
var range = document.createRange();
range.setStart(startNode, 6); // 6 is the offset of "world" within "Hello world"
range.setEnd(endNode, 7); // 7 is the length of "this is"
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);

<div id="main" contenteditable="true" style="border:solid 1px black; width:300px; height:300px">
  <div id='one'>Hello world!</div>
  <div id='two'>
    <br>
  </div>
  <div id='three'>This is a paragraph</div>
</div>

这篇关于在contenteditable div中选择范围（第2轮）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！