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 : [ config.contentsCss, CKEDITOR.getUrl( editor.skinPath + 'editor.css' ) ],
\r
30 voiceLabel : lang.panelVoiceLabel
\r
36 stylesSet = config.stylesCombo_stylesSet.split( ':', 2 ),
\r
37 stylesSetPath = stylesSet[ 1 ] || CKEDITOR.getUrl( pluginPath + 'styles/' + stylesSet[ 0 ] + '.js' ) ;
\r
39 stylesSet = stylesSet[ 0 ];
\r
41 CKEDITOR.loadStylesSet( stylesSet, stylesSetPath, function( stylesDefinitions )
\r
49 // Put all styles into an Array.
\r
50 for ( var i = 0 ; i < stylesDefinitions.length ; i++ )
\r
52 var styleDefinition = stylesDefinitions[ i ];
\r
54 styleName = styleDefinition.name;
\r
56 style = styles[ styleName ] = new CKEDITOR.style( styleDefinition );
\r
57 style._name = styleName;
\r
59 stylesList.push( style );
\r
62 // Sorts the Array, so the styles get grouped
\r
64 stylesList.sort( sortStyles );
\r
66 // Loop over the Array, adding all items to the
\r
69 for ( i = 0 ; i < stylesList.length ; i++ )
\r
71 style = stylesList[ i ];
\r
72 styleName = style._name;
\r
74 var type = style.type;
\r
76 if ( type != lastType )
\r
78 combo.startGroup( lang[ 'panelTitle' + String( type ) ] );
\r
84 style.type == CKEDITOR.STYLE_OBJECT ? styleName : buildPreview( style._.definition ),
\r
94 onClick : function( value )
\r
97 editor.fire( 'saveSnapshot' );
\r
99 var style = styles[ value ],
\r
100 selection = editor.getSelection();
\r
102 if ( style.type == CKEDITOR.STYLE_OBJECT )
\r
104 var element = selection.getSelectedElement();
\r
106 style.applyToObject( element );
\r
111 var elementPath = new CKEDITOR.dom.elementPath( selection.getStartElement() );
\r
113 if ( style.type == CKEDITOR.STYLE_INLINE && style.checkActive( elementPath ) )
\r
114 style.remove( editor.document );
\r
116 style.apply( editor.document );
\r
118 editor.fire( 'saveSnapshot' );
\r
121 onRender : function()
\r
123 editor.on( 'selectionChange', function( ev )
\r
125 var currentValue = this.getValue();
\r
127 var elementPath = ev.data.path,
\r
128 elements = elementPath.elements;
\r
130 // For each element into the elements path.
\r
131 for ( var i = 0, element ; i < elements.length ; i++ )
\r
133 element = elements[i];
\r
135 // Check if the element is removable by any of
\r
137 for ( var value in styles )
\r
139 if ( styles[ value ].checkElementRemovable( element, true ) )
\r
141 if ( value != currentValue )
\r
142 this.setValue( value );
\r
148 // If no styles match, just empty it.
\r
149 this.setValue( '' );
\r
154 onOpen : function()
\r
156 if ( CKEDITOR.env.ie )
\r
159 var selection = editor.getSelection();
\r
161 var element = selection.getSelectedElement(),
\r
162 elementName = element && element.getName(),
\r
163 elementPath = new CKEDITOR.dom.elementPath( element || selection.getStartElement() );
\r
165 var counter = [ 0, 0, 0, 0 ];
\r
168 for ( var name in styles )
\r
170 var style = styles[ name ],
\r
173 if ( type == CKEDITOR.STYLE_OBJECT )
\r
175 if ( element && style.element == elementName )
\r
177 if ( style.checkElementRemovable( element, true ) )
\r
183 this.hideItem( name );
\r
187 if ( style.checkActive( elementPath ) )
\r
194 if ( !counter[ CKEDITOR.STYLE_BLOCK ] )
\r
195 this.hideGroup( lang[ 'panelTitle' + String( CKEDITOR.STYLE_BLOCK ) ] );
\r
197 if ( !counter[ CKEDITOR.STYLE_INLINE ] )
\r
198 this.hideGroup( lang[ 'panelTitle' + String( CKEDITOR.STYLE_INLINE ) ] );
\r
200 if ( !counter[ CKEDITOR.STYLE_OBJECT ] )
\r
201 this.hideGroup( lang[ 'panelTitle' + String( CKEDITOR.STYLE_OBJECT ) ] );
\r
207 var stylesSets = {};
\r
209 CKEDITOR.addStylesSet = function( name, styles )
\r
211 stylesSets[ name ] = styles;
\r
214 CKEDITOR.loadStylesSet = function( name, url, callback )
\r
216 var stylesSet = stylesSets[ name ];
\r
220 callback( stylesSet );
\r
224 CKEDITOR.scriptLoader.load( url, function()
\r
226 callback( stylesSets[ name ] );
\r
230 function buildPreview( styleDefinition )
\r
234 var elementName = styleDefinition.element;
\r
236 // Avoid <bdo> in the preview.
\r
237 if ( elementName == 'bdo' )
\r
238 elementName = 'span';
\r
240 html = [ '<', elementName ];
\r
242 // Assign all defined attributes.
\r
243 var attribs = styleDefinition.attributes;
\r
246 for ( var att in attribs )
\r
248 html.push( ' ', att, '="', attribs[ att ], '"' );
\r
252 // Assign the style attribute.
\r
253 var cssStyle = CKEDITOR.style.getStyleText( styleDefinition );
\r
255 html.push( ' style="', cssStyle, '"' );
\r
257 html.push( '>', styleDefinition.name, '</', elementName, '>' );
\r
259 return html.join( '' );
\r
262 function sortStyles( styleA, styleB )
\r
264 var typeA = styleA.type,
\r
265 typeB = styleB.type;
\r
267 return typeA == typeB ? 0 :
\r
268 typeA == CKEDITOR.STYLE_OBJECT ? -1 :
\r
269 typeB == CKEDITOR.STYLE_OBJECT ? 1 :
\r
270 typeB == CKEDITOR.STYLE_BLOCK ? 1 :
\r
276 * The "styles definition set" to load into the styles combo. The styles may
\r
277 * be defined in the page containing the editor, or can be loaded on demand
\r
278 * from an external file when opening the styles combo for the fist time. In
\r
279 * the second case, if this setting contains only a name, the styles definition
\r
280 * file will be loaded from the "styles" folder inside the stylescombo plugin
\r
281 * folder. Otherwise, this setting has the "name:url" syntax, making it
\r
282 * possible to set the URL from which loading the styles file.
\r
284 * @default 'default'
\r
286 * // Load from the stylescombo styles folder (mystyles.js file).
\r
287 * config.stylesCombo_stylesSet = 'mystyles';
\r
289 * // Load from a relative URL.
\r
290 * config.stylesCombo_stylesSet = 'mystyles:/editorstyles/styles.js';
\r
292 * // Load from a full URL.
\r
293 * config.stylesCombo_stylesSet = 'mystyles:http://www.example.com/editorstyles/styles.js';
\r
295 CKEDITOR.config.stylesCombo_stylesSet = 'default';
\r