Question

我们正在为我们的客户开展一项应用，该应用使用带有聚合物组件的飞镖。我们的一个自定义组件即datagrid使用<div contenteditable></div>为数据网格单元格输入值。我还想提供自定义格式化功能，所以我不得不重写按键事件。当我想在Chrome 35中的内容可编辑的 div 元素中的插入位置创建新的HTML节点时，问题就出现了问题（可能是所有支持Shadow DOM的webkit浏览器，而不是通过polyfill）。

当我使用window.getSelection().getRangeAt(0)获取当前插入位置时，新节点将添加到 body 元素的开头而不是 div 。在Firefox和IE 11中它虽然很好用（使用polyfill）。

当我按照建议here尝试this.shadowRoot.getSelection().getRangeAt(0)时，它也不起作用，因为它返回了不正确的Range对象（错误或功能？）。然而，当我记录Selection对象时，似乎所有偏移都是正确的，这意味着它可以以某种方式解决，但在SO上提出类似问题的那个人并没有发布他是如何做到的。

所以我不知道，当内容可编辑的 div 包含多个HTML节点时如何从给定的偏移量创建一个Range对象，因为浏览器在放置换行符时会创建多个节点进入单词的中间并立即将其删除（作为一个附带问题，它是否正常？它不会导致内存泄漏吗？）。然后在Chrome控制台中看起来像这样（＃cell-input这里有4个节点，虽然它只包含连续字符串＆＃34; Marek＆＃34;）：

<div contenteditable="true" id="cell-input">
    "M"
    "ar"
    "ek"
    <br>
</div>

我尝试使用类似的东西（它只是一个伪代码）：

offset = shadowRoot.getSelection().extentOffset;
element = document.querySelector('cell-input');

range = document.createRange();
range.setStart(element.children.first, offset );
range.setEnd(element.children.first, offset);
range.collapse(false);

......但它没有正常工作。有什么想法吗？

Answer 1

似乎这是我here报告的错误，并且在问题主题结束时由铬团队确认。

Answer 2

我创建了一个plunk，它显示了我们如何保存shadowRoot选择范围并在需要时使用它。问题是this.shadowRoot.getSelection（）。getRangeAt（0）返回不正确的范围，你要通过getSelection（）从set.shadowRoot.getSelection（）创建范围.setStart，getSelection（）。setEnd。有关更多说明，请参阅plunk

shadowRoot.getSelection.getRangeAt(0) instead use  
var selRange=document.createRange();
var shadowRootSelection = this.shadowRoot.getSelection();
selRange.setStart(shadowRootSelection.anchorNode, shadowRootSelection.anchorOffset);
        selRange.setEnd(shadowRootSelection.focusNode, shadowRootSelection.focusOffset);

ShadowRoot的getSelection（）。getRangeAt（0）在Google Chrome 35中返回不正确的Range对象

2 个答案: