给定以下 HTML...
<p>Today is <span data-token="DateTime.DayOfWeek">$$DayOfWeek$$</span>,
</p>
<p>Tomorrow is the next day, etc, etc....</p>
点击 $$DayOfWeek$$ 返回 DOM Range对象(通过组件,即 WYSIWIG editor bundled with KendoUI )。
然后我可以像这样访问整个元素...
var element = range.startContainer.parentElement;
console.log(element);
输出...
<span data-token="DateTime.DayOfWeek">$$DayOfWeek$$</span>
我想弄清楚的是如何构造一个由整个元素组成的范围对象,作为一个范围。
所需的“高级”行为是单击一段文本,让浏览器选择该元素内的所有文本,返回一个 Range 对象。
很高兴接受 jQuery 解决方案。
最佳答案
HTML
<p>Today is <span data-token="DateTime.DayOfWeek">$$DayOfWeek$$</span>,</p>
<p>Tomorrow is the next day, etc, etc....</p>
JS
var span = document.querySelector('[data-token]');
span.addEventListener('click', function() {
var sel = window.getSelection();
var range = document.createRange();
sel.removeAllRanges();
range.setStart(span.childNodes[0], 0);
range.setEnd(span.childNodes[0], span.innerText.length);
sel.addRange(range);
});
这是给你的 fiddle : http://jsfiddle.net/V66zH/2/
它可能不是 super 跨浏览器,但适用于 chrome。参见 JavaScript Set Window selection在其他地方进行一些额外的优化。
还假定只有一个 childNode,如您的示例 html 中所示
范围 (https://developer.mozilla.org/en-US/docs/Web/API/range) 和选择 (https://developer.mozilla.org/en-US/docs/Web/API/Selection) 的一些附加引用
关于javascript - 通过单击元素内的任意位置获取 DOM 范围,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16675898/