2 Copyright (c) 2003-2009, CKSource - Frederico Knabben. All rights reserved.
\r
3 For licensing, see LICENSE.html or http://ckeditor.com/license
\r
8 CKEDITOR.plugins.add( 'stylescombo',
\r
10 requires : [ 'richcombo', 'styles' ],
\r
12 init : function( editor )
\r
14 var config = editor.config,
\r
15 lang = editor.lang.stylesCombo,
\r
16 pluginPath = this.path,
\r
19 editor.ui.addRichCombo( 'Styles',
\r
22 title : lang.panelTitle,
\r
23 voiceLabel : lang.voiceLabel,
\r
24 className : 'cke_styles',
\r
29 css : [ CKEDITOR.getUrl( editor.skinPath + 'editor.css' ) ].concat( config.contentsCss ),
\r
30 voiceLabel : lang.panelVoiceLabel
\r
36 stylesSet = config.stylesCombo_stylesSet.split( ':' );
\r
38 var stylesSetPath = stylesSet[ 1 ] ?
\r
39 stylesSet.slice( 1 ).join( ':' ) : // #4481
\r
40 CKEDITOR.getUrl( pluginPath + 'styles/' + stylesSet[ 0 ] + '.js' ) ;
\r
42 stylesSet = stylesSet[ 0 ];
\r
44 CKEDITOR.loadStylesSet( stylesSet, stylesSetPath, function( stylesDefinitions )
\r
52 // Put all styles into an Array.
\r
53 for ( var i = 0 ; i < stylesDefinitions.length ; i++ )
\r
55 var styleDefinition = stylesDefinitions[ i ];
\r
57 styleName = styleDefinition.name;
\r
59 style = styles[ styleName ] = new CKEDITOR.style( styleDefinition );
\r
60 style._name = styleName;
\r
62 stylesList.push( style );
\r
65 // Sorts the Array, so the styles get grouped
\r
67 stylesList.sort( sortStyles );
\r
69 // Loop over the Array, adding all items to the
\r
72 for ( i = 0 ; i < stylesList.length ; i++ )
\r
74 style = stylesList[ i ];
\r
75 styleName = style._name;
\r
77 var type = style.type;
\r
79 if ( type != lastType )
\r
81 combo.startGroup( lang[ 'panelTitle' + String( type ) ] );
\r
87 style.type == CKEDITOR.STYLE_OBJECT ? styleName : buildPreview( style._.definition ),
\r
97 onClick : function( value )
\r
100 editor.fire( 'saveSnapshot' );
\r
102 var style = styles[ value ],
\r
103 selection = editor.getSelection();
\r
105 if ( style.type == CKEDITOR.STYLE_OBJECT )
\r
107 var element = selection.getSelectedElement();
\r
109 style.applyToObject( element );
\r
114 var elementPath = new CKEDITOR.dom.elementPath( selection.getStartElement() );
\r
116 if ( style.type == CKEDITOR.STYLE_INLINE && style.checkActive( elementPath ) )
\r
117 style.remove( editor.document );
\r
119 style.apply( editor.document );
\r
121 editor.fire( 'saveSnapshot' );
\r
124 onRender : function()
\r
126 editor.on( 'selectionChange', function( ev )
\r
128 var currentValue = this.getValue();
\r
130 var elementPath = ev.data.path,
\r
131 elements = elementPath.elements;
\r
133 // For each element into the elements path.
\r
134 for ( var i = 0, element ; i < elements.length ; i++ )
\r
136 element = elements[i];
\r
138 // Check if the element is removable by any of
\r
140 for ( var value in styles )
\r
142 if ( styles[ value ].checkElementRemovable( element, true ) )
\r
144 if ( value != currentValue )
\r
145 this.setValue( value );
\r
151 // If no styles match, just empty it.
\r
152 this.setValue( '' );
\r
157 onOpen : function()
\r
159 if ( CKEDITOR.env.ie )
\r
162 var selection = editor.getSelection();
\r
164 var element = selection.getSelectedElement(),
\r
165 elementName = element && element.getName(),
\r
166 elementPath = new CKEDITOR.dom.elementPath( element || selection.getStartElement() );
\r
168 var counter = [ 0, 0, 0, 0 ];
\r
171 for ( var name in styles )
\r
173 var style = styles[ name ],
\r
176 if ( type == CKEDITOR.STYLE_OBJECT )
\r
178 if ( element && style.element == elementName )
\r
180 if ( style.checkElementRemovable( element, true ) )
\r
186 this.hideItem( name );
\r
190 if ( style.checkActive( elementPath ) )
\r
197 if ( !counter[ CKEDITOR.STYLE_BLOCK ] )
\r
198 this.hideGroup( lang[ 'panelTitle' + String( CKEDITOR.STYLE_BLOCK ) ] );
\r
200 if ( !counter[ CKEDITOR.STYLE_INLINE ] )
\r
201 this.hideGroup( lang[ 'panelTitle' + String( CKEDITOR.STYLE_INLINE ) ] );
\r
203 if ( !counter[ CKEDITOR.STYLE_OBJECT ] )
\r
204 this.hideGroup( lang[ 'panelTitle' + String( CKEDITOR.STYLE_OBJECT ) ] );
\r
210 var stylesSets = {};
\r
212 CKEDITOR.addStylesSet = function( name, styles )
\r
214 stylesSets[ name ] = styles;
\r
217 CKEDITOR.loadStylesSet = function( name, url, callback )
\r
219 var stylesSet = stylesSets[ name ];
\r
223 callback( stylesSet );
\r
227 CKEDITOR.scriptLoader.load( url, function()
\r
229 callback( stylesSets[ name ] );
\r
233 function buildPreview( styleDefinition )
\r
237 var elementName = styleDefinition.element;
\r
239 // Avoid <bdo> in the preview.
\r
240 if ( elementName == 'bdo' )
\r
241 elementName = 'span';
\r
243 html = [ '<', elementName ];
\r
245 // Assign all defined attributes.
\r
246 var attribs = styleDefinition.attributes;
\r
249 for ( var att in attribs )
\r
251 html.push( ' ', att, '="', attribs[ att ], '"' );
\r
255 // Assign the style attribute.
\r
256 var cssStyle = CKEDITOR.style.getStyleText( styleDefinition );
\r
258 html.push( ' style="', cssStyle, '"' );
\r
260 html.push( '>', styleDefinition.name, '</', elementName, '>' );
\r
262 return html.join( '' );
\r
265 function sortStyles( styleA, styleB )
\r
267 var typeA = styleA.type,
\r
268 typeB = styleB.type;
\r
270 return typeA == typeB ? 0 :
\r
271 typeA == CKEDITOR.STYLE_OBJECT ? -1 :
\r
272 typeB == CKEDITOR.STYLE_OBJECT ? 1 :
\r
273 typeB == CKEDITOR.STYLE_BLOCK ? 1 :
\r
279 * The "styles definition set" to load into the styles combo. The styles may
\r
280 * be defined in the page containing the editor, or can be loaded on demand
\r
281 * from an external file when opening the styles combo for the fist time. In
\r
282 * the second case, if this setting contains only a name, the styles definition
\r
283 * file will be loaded from the "styles" folder inside the stylescombo plugin
\r
284 * folder. Otherwise, this setting has the "name:url" syntax, making it
\r
285 * possible to set the URL from which loading the styles file.
\r
287 * @default 'default'
\r
289 * // Load from the stylescombo styles folder (mystyles.js file).
\r
290 * config.stylesCombo_stylesSet = 'mystyles';
\r
292 * // Load from a relative URL.
\r
293 * config.stylesCombo_stylesSet = 'mystyles:/editorstyles/styles.js';
\r
295 * // Load from a full URL.
\r
296 * config.stylesCombo_stylesSet = 'mystyles:http://www.example.com/editorstyles/styles.js';
\r
298 CKEDITOR.config.stylesCombo_stylesSet = 'default';
\r