1 /* 2 Copyright (c) 2003-2009, CKSource - Frederico Knabben. All rights reserved. 3 For licensing, see LICENSE.html or http://ckeditor.com/license 4 */ 5 6 /** 7 * @fileOverview The "toolbar" plugin. Renders the default toolbar interface in 8 * the editor. 9 */ 10 11 (function() 12 { 13 var toolbox = function() 14 { 15 this.toolbars = []; 16 this.focusCommandExecuted = false; 17 }; 18 19 toolbox.prototype.focus = function() 20 { 21 for ( var t = 0, toolbar ; toolbar = this.toolbars[ t++ ] ; ) 22 { 23 for ( var i = 0, item ; item = toolbar.items[ i++ ] ; ) 24 { 25 if ( item.focus ) 26 { 27 item.focus(); 28 return; 29 } 30 } 31 } 32 }; 33 34 var commands = 35 { 36 toolbarFocus : 37 { 38 exec : function( editor ) 39 { 40 if ( editor.toolbox ) 41 { 42 editor.toolbox.focusCommandExecuted = true; 43 editor.toolbox.focus(); 44 } 45 } 46 } 47 }; 48 49 CKEDITOR.plugins.add( 'toolbar', 50 { 51 init : function( editor ) 52 { 53 var itemKeystroke = function( item, keystroke ) 54 { 55 switch ( keystroke ) 56 { 57 case 39 : // RIGHT-ARROW 58 case 9 : // TAB 59 // Look for the next item in the toolbar. 60 while ( ( item = item.next || ( item.toolbar.next && item.toolbar.next.items[ 0 ] ) ) && !item.focus ) 61 { /*jsl:pass*/ } 62 63 // If available, just focus it, otherwise focus the 64 // first one. 65 if ( item ) 66 item.focus(); 67 else 68 editor.toolbox.focus(); 69 70 return false; 71 72 case 37 : // LEFT-ARROW 73 case CKEDITOR.SHIFT + 9 : // SHIFT + TAB 74 // Look for the previous item in the toolbar. 75 while ( ( item = item.previous || ( item.toolbar.previous && item.toolbar.previous.items[ item.toolbar.previous.items.length - 1 ] ) ) && !item.focus ) 76 { /*jsl:pass*/ } 77 78 // If available, just focus it, otherwise focus the 79 // last one. 80 if ( item ) 81 item.focus(); 82 else 83 { 84 var lastToolbarItems = editor.toolbox.toolbars[ editor.toolbox.toolbars.length - 1 ].items; 85 lastToolbarItems[ lastToolbarItems.length - 1 ].focus(); 86 } 87 88 return false; 89 90 case 27 : // ESC 91 editor.focus(); 92 return false; 93 94 case 13 : // ENTER 95 case 32 : // SPACE 96 item.execute(); 97 return false; 98 } 99 return true; 100 }; 101 102 editor.on( 'themeSpace', function( event ) 103 { 104 if ( event.data.space == editor.config.toolbarLocation ) 105 { 106 editor.toolbox = new toolbox(); 107 108 var output = [ '<div class="cke_toolbox">' ]; 109 110 var toolbars = editor.toolbox.toolbars, 111 toolbar = editor.config.toolbar; 112 113 for ( var r = 0 ; r < toolbar.length ; r++ ) 114 { 115 var row = toolbar[ r ], 116 toolbarId = 'cke_' + CKEDITOR.tools.getNextNumber(), 117 toolbarObj = { id : toolbarId, items : [] }; 118 119 if ( row === '/' ) 120 { 121 output.push( '<div class="cke_break"></div>' ); 122 continue; 123 } 124 125 output.push( '<div id="', toolbarId, '" class="cke_toolbar">' ); 126 127 // Add the toolbar to the "editor.toolbox.toolbars" 128 // array. 129 var index = toolbars.push( toolbarObj ) - 1; 130 131 // Create the next/previous reference. 132 if ( index > 0 ) 133 { 134 toolbarObj.previous = toolbars[ index - 1 ]; 135 toolbarObj.previous.next = toolbarObj; 136 } 137 138 // Create all items defined for this toolbar. 139 for ( var i = 0 ; i < row.length ; i++ ) 140 { 141 var item, 142 itemName = row[ i ]; 143 144 if ( itemName == '-' ) 145 item = CKEDITOR.ui.separator; 146 else 147 item = editor.ui.create( itemName ); 148 149 if ( item ) 150 { 151 var itemObj = item.render( editor, output ); 152 index = toolbarObj.items.push( itemObj ) - 1; 153 154 if ( index > 0 ) 155 { 156 itemObj.previous = toolbarObj.items[ index - 1 ]; 157 itemObj.previous.next = itemObj; 158 } 159 160 itemObj.toolbar = toolbarObj; 161 itemObj.onkey = itemKeystroke; 162 163 /* 164 * Fix for #3052: 165 * Prevent JAWS from focusing the toolbar after document load. 166 */ 167 itemObj.onfocus = function() 168 { 169 if ( !editor.toolbox.focusCommandExecuted ) 170 editor.focus(); 171 }; 172 } 173 } 174 175 output.push( '</div>' ); 176 } 177 178 output.push( '</div>' ); 179 180 event.data.html += output.join( '' ); 181 } 182 }); 183 184 editor.addCommand( 'toolbarFocus', commands.toolbarFocus ); 185 } 186 }); 187 })(); 188 189 /** 190 * The UI element that renders a toolbar separator. 191 * @type Object 192 * @example 193 */ 194 CKEDITOR.ui.separator = 195 { 196 render : function( editor, output ) 197 { 198 output.push( '<span class="cke_separator"></span>' ); 199 return {}; 200 } 201 }; 202 203 /** 204 * The "theme space" to which rendering the toolbar. For the default theme, 205 * the recommended options are "top" and "bottom". 206 * @type String 207 * @default 'top' 208 * @see CKEDITOR.config.theme 209 * @example 210 * config.toolbarLocation = 'bottom'; 211 */ 212 CKEDITOR.config.toolbarLocation = 'top'; 213 214 /** 215 * The toolbox (alias toolbar) definition. It is an array of toolbars (strips), 216 * each one being also an array, containing a list of UI items. 217 * @type Array 218 * @example 219 * // Defines a toolbar with only one strip containing the "Source" button, a 220 * // separator and the "Bold" and "Italic" buttons. 221 * <b>CKEDITOR.config.toolbar = 222 * [ 223 * [ 'Source', '-', 'Bold', 'Italic' ] 224 * ]</b>; 225 */ 226 CKEDITOR.config.toolbar = 227 [ 228 ['Source','-','Save','NewPage','Preview','-','Templates'], 229 ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker'], 230 ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'], 231 ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'], 232 '/', 233 ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'], 234 ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'], 235 ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'], 236 ['Link','Unlink','Anchor'], ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'], 237 '/', 238 ['Styles','Format','Font','FontSize'], 239 ['TextColor','BGColor'], 240 ['ShowBlocks'] 241 ]; 242