4

我们正在为我们的客户开发一个应用程序，该应用程序将 dart lang 与聚合物组件一起使用。我们的自定义组件之一，即 datagrid<div contenteditable></div>用于向 datagrid 单元格输入值。我还想提供自定义格式化功能，所以我不得不覆盖按键事件。当我想在 Chrome 35 中的内容可编辑div元素中的插入符号位置创建新的 HTML 节点时，问题就出现了（可能是所有原生支持 Shadow DOM 的 webkit 浏览器，而不是通过 polyfills）。

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

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

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

<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);

...但它没有正常工作。有任何想法吗？

4

2 回答 2

3

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

于 2014-10-07T14:16:12.223 回答
0

我创建了一个 plunk，它展示了我们如何保存 shadowRoot 选择范围并在需要时使用它。问题是 this.shadowRoot.getSelection().getRangeAt(0) 返回不正确的范围，您必须通过 getSelection().setStart、getSelection().setEnd 从 this.shadowRoot.getSelection() 创建范围。如需更多了解，请参阅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);
于 2015-01-29T11:07:06.350 回答