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 CKEDITOR.plugins.add( 'format', 7 { 8 requires : [ 'richcombo', 'styles' ], 9 10 init : function( editor ) 11 { 12 var config = editor.config, 13 lang = editor.lang.format; 14 15 // Gets the list of tags from the settings. 16 var tags = config.format_tags.split( ';' ); 17 18 // Create style objects for all defined styles. 19 var styles = {}; 20 for ( var i = 0 ; i < tags.length ; i++ ) 21 { 22 var tag = tags[ i ]; 23 styles[ tag ] = new CKEDITOR.style( config[ 'format_' + tag ] ); 24 styles[ tag ]._.enterMode = editor.config.enterMode; 25 } 26 27 editor.ui.addRichCombo( 'Format', 28 { 29 label : lang.label, 30 title : lang.panelTitle, 31 className : 'cke_format', 32 panel : 33 { 34 css : editor.skin.editor.css.concat( config.contentsCss ), 35 multiSelect : false, 36 attributes : { 'aria-label' : lang.panelTitle } 37 }, 38 39 init : function() 40 { 41 this.startGroup( lang.panelTitle ); 42 43 for ( var tag in styles ) 44 { 45 var label = lang[ 'tag_' + tag ]; 46 47 // Add the tag entry to the panel list. 48 this.add( tag, styles[tag].buildPreview( label ), label ); 49 } 50 }, 51 52 onClick : function( value ) 53 { 54 editor.focus(); 55 editor.fire( 'saveSnapshot' ); 56 57 var style = styles[ value ], 58 elementPath = new CKEDITOR.dom.elementPath( editor.getSelection().getStartElement() ); 59 60 style[ style.checkActive( elementPath ) ? 'remove' : 'apply' ]( editor.document ); 61 62 // Save the undo snapshot after all changes are affected. (#4899) 63 setTimeout( function() 64 { 65 editor.fire( 'saveSnapshot' ); 66 }, 0 ); 67 }, 68 69 onRender : function() 70 { 71 editor.on( 'selectionChange', function( ev ) 72 { 73 var currentTag = this.getValue(); 74 75 var elementPath = ev.data.path; 76 77 for ( var tag in styles ) 78 { 79 if ( styles[ tag ].checkActive( elementPath ) ) 80 { 81 if ( tag != currentTag ) 82 this.setValue( tag, editor.lang.format[ 'tag_' + tag ] ); 83 return; 84 } 85 } 86 87 // If no styles match, just empty it. 88 this.setValue( '' ); 89 }, 90 this); 91 } 92 }); 93 } 94 }); 95 96 /** 97 * A list of semi colon separated style names (by default tags) representing 98 * the style definition for each entry to be displayed in the Format combo in 99 * the toolbar. Each entry must have its relative definition configuration in a 100 * setting named "format_(tagName)". For example, the "p" entry has its 101 * definition taken from config.format_p. 102 * @type String 103 * @default 'p;h1;h2;h3;h4;h5;h6;pre;address;div' 104 * @example 105 * config.format_tags = 'p;h2;h3;pre' 106 */ 107 CKEDITOR.config.format_tags = 'p;h1;h2;h3;h4;h5;h6;pre;address;div'; 108 109 /** 110 * The style definition to be used to apply the "Normal" format. 111 * @type Object 112 * @default { element : 'p' } 113 * @example 114 * config.format_p = { element : 'p', attributes : { 'class' : 'normalPara' } }; 115 */ 116 CKEDITOR.config.format_p = { element : 'p' }; 117 118 /** 119 * The style definition to be used to apply the "Normal (DIV)" format. 120 * @type Object 121 * @default { element : 'div' } 122 * @example 123 * config.format_div = { element : 'div', attributes : { 'class' : 'normalDiv' } }; 124 */ 125 CKEDITOR.config.format_div = { element : 'div' }; 126 127 /** 128 * The style definition to be used to apply the "Formatted" format. 129 * @type Object 130 * @default { element : 'pre' } 131 * @example 132 * config.format_pre = { element : 'pre', attributes : { 'class' : 'code' } }; 133 */ 134 CKEDITOR.config.format_pre = { element : 'pre' }; 135 136 /** 137 * The style definition to be used to apply the "Address" format. 138 * @type Object 139 * @default { element : 'address' } 140 * @example 141 * config.format_address = { element : 'address', attributes : { 'class' : 'styledAddress' } }; 142 */ 143 CKEDITOR.config.format_address = { element : 'address' }; 144 145 /** 146 * The style definition to be used to apply the "Heading 1" format. 147 * @type Object 148 * @default { element : 'h1' } 149 * @example 150 * config.format_h1 = { element : 'h1', attributes : { 'class' : 'contentTitle1' } }; 151 */ 152 CKEDITOR.config.format_h1 = { element : 'h1' }; 153 154 /** 155 * The style definition to be used to apply the "Heading 1" format. 156 * @type Object 157 * @default { element : 'h2' } 158 * @example 159 * config.format_h2 = { element : 'h2', attributes : { 'class' : 'contentTitle2' } }; 160 */ 161 CKEDITOR.config.format_h2 = { element : 'h2' }; 162 163 /** 164 * The style definition to be used to apply the "Heading 1" format. 165 * @type Object 166 * @default { element : 'h3' } 167 * @example 168 * config.format_h3 = { element : 'h3', attributes : { 'class' : 'contentTitle3' } }; 169 */ 170 CKEDITOR.config.format_h3 = { element : 'h3' }; 171 172 /** 173 * The style definition to be used to apply the "Heading 1" format. 174 * @type Object 175 * @default { element : 'h4' } 176 * @example 177 * config.format_h4 = { element : 'h4', attributes : { 'class' : 'contentTitle4' } }; 178 */ 179 CKEDITOR.config.format_h4 = { element : 'h4' }; 180 181 /** 182 * The style definition to be used to apply the "Heading 1" format. 183 * @type Object 184 * @default { element : 'h5' } 185 * @example 186 * config.format_h5 = { element : 'h5', attributes : { 'class' : 'contentTitle5' } }; 187 */ 188 CKEDITOR.config.format_h5 = { element : 'h5' }; 189 190 /** 191 * The style definition to be used to apply the "Heading 1" format. 192 * @type Object 193 * @default { element : 'h6' } 194 * @example 195 * config.format_h6 = { element : 'h6', attributes : { 'class' : 'contentTitle6' } }; 196 */ 197 CKEDITOR.config.format_h6 = { element : 'h6' }; 198