1 /* 2 Copyright (c) 2003-2012, CKSource - Frederico Knabben. All rights reserved. 3 For licensing, see LICENSE.html or http://ckeditor.com/license 4 */ 5 6 (function() 7 { 8 function addCombo( editor, comboName, styleType, lang, entries, defaultLabel, styleDefinition ) 9 { 10 var config = editor.config; 11 12 // Gets the list of fonts from the settings. 13 var names = entries.split( ';' ), 14 values = []; 15 16 // Create style objects for all fonts. 17 var styles = {}; 18 for ( var i = 0 ; i < names.length ; i++ ) 19 { 20 var parts = names[ i ]; 21 22 if ( parts ) 23 { 24 parts = parts.split( '/' ); 25 26 var vars = {}, 27 name = names[ i ] = parts[ 0 ]; 28 29 vars[ styleType ] = values[ i ] = parts[ 1 ] || name; 30 31 styles[ name ] = new CKEDITOR.style( styleDefinition, vars ); 32 styles[ name ]._.definition.name = name; 33 } 34 else 35 names.splice( i--, 1 ); 36 } 37 38 editor.ui.addRichCombo( comboName, 39 { 40 label : lang.label, 41 title : lang.panelTitle, 42 className : 'cke_' + ( styleType == 'size' ? 'fontSize' : 'font' ), 43 panel : 44 { 45 css : editor.skin.editor.css.concat( config.contentsCss ), 46 multiSelect : false, 47 attributes : { 'aria-label' : lang.panelTitle } 48 }, 49 50 init : function() 51 { 52 this.startGroup( lang.panelTitle ); 53 54 for ( var i = 0 ; i < names.length ; i++ ) 55 { 56 var name = names[ i ]; 57 58 // Add the tag entry to the panel list. 59 this.add( name, styles[ name ].buildPreview(), name ); 60 } 61 }, 62 63 onClick : function( value ) 64 { 65 editor.focus(); 66 editor.fire( 'saveSnapshot' ); 67 68 var style = styles[ value ]; 69 70 if ( this.getValue() == value ) 71 style.remove( editor.document ); 72 else 73 style.apply( editor.document ); 74 75 editor.fire( 'saveSnapshot' ); 76 }, 77 78 onRender : function() 79 { 80 editor.on( 'selectionChange', function( ev ) 81 { 82 var currentValue = this.getValue(); 83 84 var elementPath = ev.data.path, 85 elements = elementPath.elements; 86 87 // For each element into the elements path. 88 for ( var i = 0, element ; i < elements.length ; i++ ) 89 { 90 element = elements[i]; 91 92 // Check if the element is removable by any of 93 // the styles. 94 for ( var value in styles ) 95 { 96 if ( styles[ value ].checkElementMatch( element, true ) ) 97 { 98 if ( value != currentValue ) 99 this.setValue( value ); 100 return; 101 } 102 } 103 } 104 105 // If no styles match, just empty it. 106 this.setValue( '', defaultLabel ); 107 }, 108 this); 109 } 110 }); 111 } 112 113 CKEDITOR.plugins.add( 'font', 114 { 115 requires : [ 'richcombo', 'styles' ], 116 117 init : function( editor ) 118 { 119 var config = editor.config; 120 121 addCombo( editor, 'Font', 'family', editor.lang.font, config.font_names, config.font_defaultLabel, config.font_style ); 122 addCombo( editor, 'FontSize', 'size', editor.lang.fontSize, config.fontSize_sizes, config.fontSize_defaultLabel, config.fontSize_style ); 123 } 124 }); 125 })(); 126 127 /** 128 * The list of fonts names to be displayed in the Font combo in the toolbar. 129 * Entries are separated by semi-colons (;), while it's possible to have more 130 * than one font for each entry, in the HTML way (separated by comma). 131 * 132 * A display name may be optionally defined by prefixing the entries with the 133 * name and the slash character. For example, "Arial/Arial, Helvetica, sans-serif" 134 * will be displayed as "Arial" in the list, but will be outputted as 135 * "Arial, Helvetica, sans-serif". 136 * @type String 137 * @example 138 * config.font_names = 139 * 'Arial/Arial, Helvetica, sans-serif;' + 140 * 'Times New Roman/Times New Roman, Times, serif;' + 141 * 'Verdana'; 142 * @example 143 * config.font_names = 'Arial;Times New Roman;Verdana'; 144 */ 145 CKEDITOR.config.font_names = 146 'Arial/Arial, Helvetica, sans-serif;' + 147 'Comic Sans MS/Comic Sans MS, cursive;' + 148 'Courier New/Courier New, Courier, monospace;' + 149 'Georgia/Georgia, serif;' + 150 'Lucida Sans Unicode/Lucida Sans Unicode, Lucida Grande, sans-serif;' + 151 'Tahoma/Tahoma, Geneva, sans-serif;' + 152 'Times New Roman/Times New Roman, Times, serif;' + 153 'Trebuchet MS/Trebuchet MS, Helvetica, sans-serif;' + 154 'Verdana/Verdana, Geneva, sans-serif'; 155 156 /** 157 * The text to be displayed in the Font combo is none of the available values 158 * matches the current cursor position or text selection. 159 * @type String 160 * @example 161 * // If the default site font is Arial, we may making it more explicit to the end user. 162 * config.font_defaultLabel = 'Arial'; 163 */ 164 CKEDITOR.config.font_defaultLabel = ''; 165 166 /** 167 * The style definition to be used to apply the font in the text. 168 * @type Object 169 * @example 170 * // This is actually the default value for it. 171 * config.font_style = 172 * { 173 * element : 'span', 174 * styles : { 'font-family' : '#(family)' }, 175 * overrides : [ { element : 'font', attributes : { 'face' : null } } ] 176 * }; 177 */ 178 CKEDITOR.config.font_style = 179 { 180 element : 'span', 181 styles : { 'font-family' : '#(family)' }, 182 overrides : [ { element : 'font', attributes : { 'face' : null } } ] 183 }; 184 185 /** 186 * The list of fonts size to be displayed in the Font Size combo in the 187 * toolbar. Entries are separated by semi-colons (;). 188 * 189 * Any kind of "CSS like" size can be used, like "12px", "2.3em", "130%", 190 * "larger" or "x-small". 191 * 192 * A display name may be optionally defined by prefixing the entries with the 193 * name and the slash character. For example, "Bigger Font/14px" will be 194 * displayed as "Bigger Font" in the list, but will be outputted as "14px". 195 * @type String 196 * @default '8/8px;9/9px;10/10px;11/11px;12/12px;14/14px;16/16px;18/18px;20/20px;22/22px;24/24px;26/26px;28/28px;36/36px;48/48px;72/72px' 197 * @example 198 * config.fontSize_sizes = '16/16px;24/24px;48/48px;'; 199 * @example 200 * config.fontSize_sizes = '12px;2.3em;130%;larger;x-small'; 201 * @example 202 * config.fontSize_sizes = '12 Pixels/12px;Big/2.3em;30 Percent More/130%;Bigger/larger;Very Small/x-small'; 203 */ 204 CKEDITOR.config.fontSize_sizes = 205 '8/8px;9/9px;10/10px;11/11px;12/12px;14/14px;16/16px;18/18px;20/20px;22/22px;24/24px;26/26px;28/28px;36/36px;48/48px;72/72px'; 206 207 /** 208 * The text to be displayed in the Font Size combo is none of the available 209 * values matches the current cursor position or text selection. 210 * @type String 211 * @example 212 * // If the default site font size is 12px, we may making it more explicit to the end user. 213 * config.fontSize_defaultLabel = '12px'; 214 */ 215 CKEDITOR.config.fontSize_defaultLabel = ''; 216 217 /** 218 * The style definition to be used to apply the font size in the text. 219 * @type Object 220 * @example 221 * // This is actually the default value for it. 222 * config.fontSize_style = 223 * { 224 * element : 'span', 225 * styles : { 'font-size' : '#(size)' }, 226 * overrides : [ { element : 'font', attributes : { 'size' : null } } ] 227 * }; 228 */ 229 CKEDITOR.config.fontSize_style = 230 { 231 element : 'span', 232 styles : { 'font-size' : '#(size)' }, 233 overrides : [ { element : 'font', attributes : { 'size' : null } } ] 234 }; 235