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