javascript - 如何使用 JavaScript 在 CKEditor 中通过编码搜索单词？

Question

谁能告诉我如何使用 JavaScript 在 CKEditor 实例中搜索特定单词？我有一个名为搜索的按钮和一个文本框。当我在文本框中键入一个词并按下按钮时，它应该会在编辑器中找到该文本。解决方案必须仅使用 JavaScript。

Answer 1

有一个命令find，但是editor.execCommand( 'find' ) 只会显示查找&替换对话框，而不会满足您。

不幸的是，要复制此对话框的行为，您需要编写自己的搜索实现，因为它背后的逻辑无法从外部访问(这需要 http://dev.ckeditor.com 上的票证)。您可以查看 _source/plugins/find/dialogs/find.js 中的 find 插件实现，但如果不进行一些解释，它可能无法为您提供足够的帮助。

那么你需要做什么？

首先 - 您需要准确找到文本节点中的文本以及文本所在的位置 - 这不会是微不足道的 :)。您必须从 editor.document.getBody() 开始，然后按源代码顺序遍历 DOM 树。有一个工具可以帮助您 - CKEDITOR.dom.walker。

其次 - 您需要创建 Range (new CKEDITOR.dom.range( editor.document)) 并设置其 startContainer、startOffset , endContainer, endOffset。这里有更多关于 W3C 范围的信息 - http://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html - CKEDITOR 非常相似 - 您可以在 API 文档中找到更多关于它们的信息(很抱歉没有发布链接，但由于我的声誉很低，我不能:D)。

当您设置范围的开始和结束时，您只需调用 range.select()。如果编辑器获得焦点(您可以通过调用 editor.focus() 确保这一点)范围将被选中。