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

Question

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

Answer 1

有一个 command find，但是editor.execCommand( 'find' )只会显示 find&replace 对话框，这不会让你满意。

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

那么你需要做什么？

首先-您需要准确地找到文本节点以及文本的位置-这不是微不足道的:)。您必须从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()）范围将被选中。

Answer 2

您可以使用 CKEditor 实例从 CKEditor 实例中提取数据instance.GetData()。

你如何找到这个词取决于你，如果它很简单，你可以.indexOf()按照@TomTeman 的建议使用，否则你可能需要一个正则表达式。

Answer 3

将 CKEditor 中的文本提取到一个变量中（如果 CKEditor 自己提供该功能，我不会感到惊讶），然后对提取的文本运行函数 .indexOf(SubstringToFind)。