如何使用javascript在CKEditor中通过编码来搜索单词？ [英] How to Search a word through coding in CKEditor using javascript?

问题描述

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

Can anyone give tell me how to search for a particular word in a CKEditor instance using JavaScript? I have one button named search and one textbox. When I type a word in the text box and press the button it should find the text in the Editor. The solution must be JavaScript only.

推荐答案

有一条命令 find ，但是 editor.execCommand（'find'）只会显示查找与替换对话框，而不会满足您的要求。

There's a command find, however editor.execCommand( 'find' ) will only show the find&replace dialog, what rather won't satisfy you.

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

Unfortunately, to copy behaviour of this dialog you'll need to write your own search impl, because logic standing behind it is unreachable from outside (this needs a ticket on http://dev.ckeditor.com). You can check find plugin impl in _source/plugins/find/dialogs/find.js, but it probably won't help you enough without some explanation.

那么您需要做什么？

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

First - you need to find in which text nodes exactly and at what positions your text is - this won't be trivial :). You have to start from editor.document.getBody() and then traverse DOM tree in source order. There's a tool that can help you - CKEDITOR.dom.walker.

第二个-您需要创建Range（ 新建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）。

Second - you need to create Range (new CKEDITOR.dom.range( editor.document )) and set its startContainer, startOffset, endContainer, endOffset. Here's more about W3C's ranges - http://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html - CKEDITOR's are quite similar - you can find more about them in API docs (sorry for not posting the link, but with my low reputation I can't :D).

当您设置范围的开始和结束时，您只需要调用 range.select（）。如果编辑器的焦点（您可以通过调用 editor.focus（）来确保），则将选择范围。

And when you set start and end of the range you just have to call range.select(). If editor was focused (you can ensure this by calling editor.focus()) range will be selected.

这篇关于如何使用javascript在CKEditor中通过编码来搜索单词？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！