1// Register a new CKEditor plugin. 2// http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.resourceManager.html#add 3CKEDITOR.plugins.add( 'footnote', 4{ 5 // The plugin initialization logic goes inside this method. 6 // http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.pluginDefinition.html#init 7 init: function( editor ) 8 { 9 // Create an editor command that stores the dialog initialization command. 10 // http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.command.html 11 // http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dialogCommand.html 12 editor.addCommand( 'footnoteDialog', new CKEDITOR.dialogCommand( 'footnoteDialog' ) ); 13 var lang = editor.lang.footnote; 14 if(!lang) { 15 lang = CKEDITOR.lang['default']['footnote']; 16 } 17 else { 18 var lang_default = CKEDITOR.lang['default']['footnote']; 19 for(var k in lang_default) { 20 if(!lang[k]) { 21 lang[k] = lang_default[k]; 22 } 23 } 24 } 25 26 if(!oDokuWiki_FCKEditorInstance.oinsertHtmlCodeObj) { 27 oDokuWiki_FCKEditorInstance.oinsertHtmlCodeObj = new Object(); 28 oDokuWiki_FCKEditorInstance.oinsertHtmlCodeObj.notes = new Array(); 29 oDokuWiki_FCKEditorInstance.oinsertHtmlCodeObj.count = 0; 30 } 31 32 // Create a toolbar button that executes the plugin command defined above. 33 // http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.ui.html#addButton 34 editor.ui.addButton( 'Footnotes', 35 { 36 // Toolbar button tooltip. 37 label: lang.ToolTip, //'Insert a footnote', 38 // Reference to the plugin command name. 39 command: 'footnoteDialog', 40 // Button's icon file path. 41 icon: this.path + 'images/footnote.png' 42 } ); 43 44 // Add a new dialog window definition containing all UI elements and listeners. 45 // http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dialog.html#.add 46 // http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dialog.dialogDefinition.html 47 CKEDITOR.dialog.add( 'footnoteDialog', function( editor ) 48 { 49 50 51 return { 52 // Basic properties of the dialog window: title, minimum size. 53 // http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dialog.dialogDefinition.html 54 title : lang.Title, //'Footnote Dialog', 55 minWidth : 400, 56 minHeight : 200, 57 fontSize: "14pt", 58 onShow: function() { 59 /* 60 var el = this.getContentElement( 'general', 'contents').getInputElement().$.id; 61 var ta = document.getElementById(el); 62 */ 63 }, 64 65 // Dialog window contents. 66 // http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dialog.definition.content.html 67 contents : 68 [ 69 { 70 // Definition of the Settings dialog window tab (page) with its id, label and contents. 71 // http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dialog.contentDefinition.html 72 id : 'general', 73 label : lang.Settings, //'Settings', 74 elements : 75 [ 76 // Dialog window UI element: HTML code field. 77 // http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.ui.dialog.html.html 78 { 79 type : 'html', 80 // HTML code to be shown inside the field. 81 // http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.ui.dialog.html.html#constructor 82 html : lang.Header, //'This dialog window lets you create and edit footnotes.' 83 }, 84 // Dialog window UI element: a textarea field for the link text. 85 // http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.ui.dialog.textarea.html 86 { 87 type : 'textarea', 88 id : 'contents', 89 // Text that labels the field. 90 // http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.ui.dialog.labeledElement.html#constructor 91 label : lang.Label_1, //'Footnote Text (required)', 92 // Validation checking whether the field is not empty. 93 validate : CKEDITOR.dialog.validate.notEmpty(lang.Validate), //'The footnote text field cannot be empty.' 94 95 // Function to be run when the commitContent method of the parent dialog window is called. 96 // Get the value of this field and save it in the data object attribute. 97 // http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dom.element.html#getValue 98 commit : function( data ) 99 { 100 data.contents = this.getValue(); 101 102 }, 103 }, 104 // Dialog window UI element: a text input field for the link URL. 105 // http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.ui.dialog.textInput.html 106 107 { 108 type : 'hbox', 109 id: 'revisions', 110 widths : [ '15%', '30%', '2%', '53%' ], 111 children : 112 [ 113 { 114 type: 'html', 115 html: lang.Label_2, //'Footnote Id: ', 116 }, 117 { 118 type : 'text', 119 id : 'noteId', 120 maxLength: "9", 121 commit : function( data ) 122 { 123 data.noteId = this.getValue(); 124 }, 125 onChange: function(data) { 126 127 }, 128 129 }, 130 { 131 type: 'html', 132 html: ' ', 133 }, 134 135 { 136 type : 'button', 137 label: lang.LoadButtonLabel, //'Load Note In Editor', 138 id : 'id3', 139 onClick: function () { 140 var dialog = this.getDialog(); 141 var el = dialog.getContentElement( 'general', 'noteId').getInputElement().$.id; 142 var fn_id = document.getElementById(el).value; 143 if(fn_id) { 144 if(oDokuWiki_FCKEditorInstance.oinsertHtmlCodeObj.notes[fn_id]) { 145 var el = dialog.getContentElement( 'general', 'contents').getInputElement().$.id; 146 var ta = document.getElementById(el); 147 ta.value = oDokuWiki_FCKEditorInstance.oinsertHtmlCodeObj.notes[fn_id]; 148 } 149 } 150 }, 151 } 152 ] 153 }, 154 155 156 ] 157 }, 158 { 159 id : 'info', 160 label : 'Info', 161 elements : 162 [ 163 // Dialog window UI element: HTML code field. 164 // http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.ui.dialog.html.html 165 { 166 type : 'html', 167 // HTML code to be shown inside the field. 168 // http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.ui.dialog.html.html#constructor 169 html : lang.FootNoteInfo, //html.join(""), 170 }, 171 ] 172 }, 173 ], 174 onOk : function() 175 { 176 // Create a sup element and an object that will store the data entered in the dialog window. 177 // http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dom.document.html#createElement 178 179 var dialog = this, 180 data = {}, 181 sup = editor.document.createElement( 'sup' ); 182 // Populate the data object with data entered in the dialog window. 183 // http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dialog.html#commitContent 184 this.commitContent( data ); 185 186 if(data.noteId) { 187 oDokuWiki_FCKEditorInstance.oinsertHtmlCodeObj.notes[data.noteId] = data.contents; 188 return; 189 } 190 191 // http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dom.element.html#setAttribute 192 //sup.setAttribute( 'title', data.noteId ); 193 sup.setAttribute( 'class', "dwfcknote " ); 194 var instance = ++oDokuWiki_FCKEditorInstance.oinsertHtmlCodeObj.count; 195 var fn_id = 'fckgL'+ instance; 196 sup.setAttribute( 'class', "dwfcknote " + fn_id ); 197 198 oDokuWiki_FCKEditorInstance.oinsertHtmlCodeObj.notes[fn_id] = data.contents 199 // http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dom.element.html#setHtml 200 201 sup.setHtml( fn_id ); 202 203 // Insert the sup element into the current cursor position in the editor. 204 // http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#insertElement 205 editor.insertElement( sup ); 206 } 207 }; 208 } ); 209 } 210} );
