1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | dojo.provide("dojox.editor.plugins.FindReplace"); dojo.require("dijit._editor._Plugin"); dojo.declare("dojox.editor.plugins.FindReplace", dijit._editor._Plugin, { // When you click the command button, you show a toolbar, // instead of executing some editor commands. useDefaultCommand: false, // You can just use the original method. // setEditor: function(editor){}, setToolbar: function(editorToolbar){ this.inherited(arguments); //TODO: Create your additional find/replace toolbar here, // and append it after the editor toolbar. }, updateState: function(){ // You don't need to handle anything when editor state is updated. // So just leave this empty. }, destroy: function(){ this.inherited(arguments); //TODO: Remember to destroy the toolbar you created. } }); // Register this plug-in so it can construct itself when the editor publishes a topic. dojo.subscribe(dijit._scopeName + ".Editor.getPlugin", null, function(o){ if(!o.plugin && o.args.name.toLowerCase() === "findreplace"){ o.plugin = new dojox.editor.plugins.FindReplace({}); } }); |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | ... dojo.declare("dojox.editor.plugins.FindReplace", dijit._editor._Plugin, { ... // You'd like to use a toggle button to show/hide your own find/replace toolbar. buttonClass: dijit.form.ToggleButton, // As long as you provide a command, the CSS class of the button icon will be // generated automatically. For this one, it will be "dijitEditorFindReplace". command: "findReplace", // You can also use localization here. getLabel: function(){ return "Find and Replace"; }, ... }); ... |
1 2 3 4 5 6 7 | dojo.declare("dojox.editor.plugins.FindReplacePane", [dijit._Widget, dijit._Templated], { // With templates, you don't need to create all the stuff manually. templateString: dojo.cache("dojox.editor.plugins", "FindReplacePane.html"), // There are widgets in template. Tell the parser to parse them. widgetsInTemplate: true }); |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <div><div dojotype="dijit.Toolbar" dojoattachpoint="frToolbar"> <div dojoattachpoint="findField" dojotype="dojox.editor.plugins._FindReplaceTextBox" label="Find:"></div> <div dojoattachpoint="replaceField" dojotype="dojox.editor.plugins._FindReplaceTextBox" label="Replace with:"></div> <div dojotype="dojox.editor.plugins._ToolbarLineBreak"></div> <div dojoattachpoint="findButton" dojotype="dijit.form.Button" label="Find" showLable="true"></div> <div dojoattachpoint="replaceButton" dojotype="dijit.form.Button" label="Replace" showLable="true"></div> <div dojoattachpoint="replaceAllButton" dojotype="dijit.form.Button" label="Replace All" showLable="true"></div> <div dojoattachpoint="matchCase" dojotype="dojox.editor.plugins._FindReplaceCheckBox" label="Match case"></div> <div dojoattachpoint="backwards" dojotype="dojox.editor.plugins._FindReplaceCheckBox" label="Backwards"></div> </div></div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | // This initialization work should be done in setToolbar, // because you want to be sure that the editor toolbar is ready. setToolbar: function(editorToolbar){ // Super class will add the command button to the editor toolbar for you. this.inherited(arguments); // Create your find/replace toolbar, place it after the editor toolbar, // hide it, and start it up. var frtb = this.frToolbar = new dojox.editor.plugins.FindReplacePane(); frtb.placeAt(toolbar.domNode, "after"); dojo.style(frtb.domNode, "display", "none"); frtb.startup(); // Toggle it when your toggle button is clicked... this.connect(this.button, "onChange", "_toggleFindReplace"); ... }, _toggleFindReplace: function(toShow){ // Remember the original height. var height = dojo.marginBox(this.editor.domNode).h dojo.style(this.frToolbar.domNode, "display", toShow ? "block" : "none"); // Resize the editor to maintain the height. this.editor.resize({h: height}); } |
欢迎光临 电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/) | Powered by Discuz! 7.0.0 |