如何使用javascript通过CKEditor中的编码来搜索单词

How to Search a word through coding in CKEditor using javascript?

本文关键字：编码搜索单词何使用 javascript 通过 CKEditor 更新时间：2023-09-26

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

有一个

命令find，但是editor.execCommand( 'find' )只会显示查找和替换对话框，这不会让您满意。

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

那你需要做什么呢？

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

其次 - 你需要创建范围（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()来确保这一点）范围将被选中。

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

您可以使用

instance.GetData() 从 CKEditor 实例中提取数据。

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