He Gu Yi
|Project owner:||Jared Jurkiewicz|
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.
Usage of this plugin is quite simple and painless.
First include the CSS for it:
Then require it into the page where you're using the editor:
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 data-dojo-type="dijit/Editor" id="editor" data-dojo-props="extraPlugins:['findreplace']"></div>
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.
This updated plugin provides the user with some basic find and replace functions. Click the Find and Replace button to open the toolbar.
Enter the text in Find text field and click Find button or press ENTER key to perform a search.
Enter the text to be replaced in Find text field and enter the replacement text in Replace with text field. Click Replace button or press ENTER key to perform a replacement.
Enter the text to be replaced in Find text field and enter the replacement text in the Replace with text field. Click Replace All button to perform a full text replacement.
All fields within the FindReplace toolbar can be accessed with the keyboard.
<b>Toggle the find/replace toolbar by clicking its menu bar button.</b> <br> <div data-dojo-type="dijit/Editor" height="250px" id="input" data-dojo-props="extraPlugins:['findreplace']"> <div> <br> blah blah & blah! <br> </div> <br> <table> <tbody> <tr> <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 </td> </tr> </tbody> </table> <ul> <li>item one</li> <li> item two </li> </ul> </div>