使用Trix编辑器的at.js：错误＆＃34;给定范围不在文档中。＆＃34;

Question

我正在尝试将At.js集成到Trix editor中，以便我可以@mention用户。

＆＃13;

＆＃13;

$('trix-editor').atwho({
    at: "@",
    data:['Peter', 'Tom', 'Anne']
})

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

＆＃34;文件中的给定范围是什么＆＃34;意思是我应该从哪里开始调试呢？

Answer 1

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

我试图在JavaScript中try/catch上出现sel.addRange(range);错误，但该错误不起作用（为什么？我不知道，也许是异步的...），所以找到的解决方案是检查range元素的容器在DOM中是否仍然存在：

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

如果在此期间从DOM中删除了范围元素，则可以防止调用.addRange。希望对您有所帮助！