Skip to Content | Skip to Navigation


Authors:Jared Jurkiewicz
Developers:Jared Jurkiewicz
Available:since V1.4

Have you ever wanted to know how node you were in while editing some rich text? Have you ever wanted to be sure the entire element was deleted, not just its content? If so, then this plugin is for you.


Once required in and enabled, this plugin provides the following features to dijit.Editor.

  • The ability to find text with modifiers of matching case and searching backwards from current position.
  • The ability to replace text, with a modifier to replace all occurances in the document past the current position.


  • This plugin does not work in Opera.
  • Searching backwards does not work well in Internet Explorer.


Basic Usage

Usage of this plugin is quite simple and painless. The first thing you need to do is require into the page you’re using the editor. This is done in the same spot all your dojo.require calls are made, usually a head script tag. For example:


Once it has been required in, all you have to do is include it in the list of extraPlugins (or the plugins property if you're reorganizing the toolbar) for you want to load into the editor. For example:

<div dojoType="dijit.Editor" id="editor" extraPlugins="['findreplace']"></div>

You also need to include the CSS for it. For example:

  @import "dojox/editor/plugins/resources/css/FindReplace.css";

And that's it. The editor instance you can reference by 'dijit.byId("editor")' is now enabled with the FindReplace plugin! To display the find/replace toolbar, click the find/replace toggle button in the main toolbar. The find/replace toolbar will then appear beneath the main toolbar.


  • The find button will not enable until text has been entered into the find field.
  • The replace button will not enable until text is in both the find and replace fields.

To replace a single instance of a word, enter the word in the find box, then enter its replacement in the replacement box. Click find and it will highlight the first occurance. Then click replace to replace it. To find the next one, click find again.

To replace all occurances, simply enter the text to find, the text to replace it with, click the 'All Occurances' checkbox, then click replace. It will interatively search the document from the current cursor position and replace all instances it finds.


Basic Usage

djConfig:parseOnLoad: true
  @import "{{baseUrl}}dojox/editor/plugins/resources/css/FindReplace.css";
<b>Toggle the find/replace toolbar by clicking its menu bar button.</b>
<div dojoType="dijit.Editor" height="250px"id="input" extraPlugins="['findreplace']">
blah blah & blah!
<td style="border-style:solid; border-width: 2px; border-color: gray;">One cell</td>
<td style="border-style:solid; border-width: 2px; border-color: gray;">
Two cell
<li>item one</li>
item two