4

我正在尝试将At.js集成到Trix 编辑器中，以便我可以@提及用户。

$('trix-editor').atwho({
    at: "@",
    data:['Peter', 'Tom', 'Anne']
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/basecamp/trix/master/dist/trix.js"></script>
<script src="https://cdn.rawgit.com/ichord/At.js/master/dist/js/jquery.atwho.js"></script>
<script src="https://cdn.rawgit.com/ichord/Caret.js/master/dist/jquery.caret.js"></script>
<link href="https://cdn.rawgit.com/basecamp/trix/master/dist/trix.css" rel="stylesheet"/>
<link href="https://cdn.rawgit.com/ichord/At.js/master/dist/css/jquery.atwho.css" rel="stylesheet"/>


Trix Editor: 
<form action='#'>
  <input id="x" type="hidden" name="content" value="Type @">
  <trix-editor input="x"></trix-editor>
</form>

正如您在上面的示例中看到的那样，出现了弹出窗口，但是当您选择一个项目时，您会收到以下错误：jquery.atwho.js:686 The given range isn't in document.

在此处输入图像描述

“给定范围不在文档中”是什么意思我应该从哪里开始寻找调试它？

4

1 回答 1

0

我遇到了同样的错误，The given range isn't in document它发生是因为我用来获取范围的 DOM 元素已从 DOM 中删除。

我尝试在javascript中try/catch打开错误sel.addRange(range);但它没有工作（为什么？我不知道，也许它是异步的......）所以我找到的解决方案是检查范围元素的容器是否仍然存在DOM：

if (document.body.contains(range.commonAncestorContainer))
    sel.addRange(range);

这可以防止调用.addRange范围元素是否同时从 DOM 中删除。我希望它有帮助！

于 2018-07-19T16:04:50.267 回答