2 Copyright (c) 2003-2010, CKSource - Frederico Knabben. All rights reserved.
\r
3 For licensing, see LICENSE.html or http://ckeditor.com/license
\r
10 CKEDITOR.plugins.add( 'stylescombo',
\r
12 requires : [ 'richcombo', 'styles' ],
\r
14 init : function( editor )
\r
16 var config = editor.config,
\r
17 lang = editor.lang.stylesCombo,
\r
18 pluginPath = this.path,
\r
21 if ( !stylesManager )
\r
22 stylesManager = CKEDITOR.stylesSet;
\r
24 var comboStylesSet = config.stylesCombo_stylesSet.split( ':' ),
\r
25 styleSetName = comboStylesSet[ 0 ],
\r
26 externalPath = comboStylesSet[ 1 ];
\r
28 stylesManager.addExternal( styleSetName,
\r
30 comboStylesSet.slice( 1 ).join( ':' ) :
\r
31 pluginPath + 'styles/' + styleSetName + '.js', '' );
\r
33 editor.ui.addRichCombo( 'Styles',
\r
36 title : lang.panelTitle,
\r
37 className : 'cke_styles',
\r
41 css : editor.skin.editor.css.concat( config.contentsCss ),
\r
43 attributes : { 'aria-label' : lang.panelTitle }
\r
50 CKEDITOR.stylesSet.load( styleSetName, function( stylesSet )
\r
52 var stylesDefinitions = stylesSet[ styleSetName ],
\r
59 // Put all styles into an Array.
\r
60 for ( var i = 0 ; i < stylesDefinitions.length ; i++ )
\r
62 var styleDefinition = stylesDefinitions[ i ];
\r
64 styleName = styleDefinition.name;
\r
66 style = styles[ styleName ] = new CKEDITOR.style( styleDefinition );
\r
67 style._name = styleName;
\r
69 stylesList.push( style );
\r
72 // Sorts the Array, so the styles get grouped
\r
74 stylesList.sort( sortStyles );
\r
76 // Loop over the Array, adding all items to the
\r
79 for ( i = 0 ; i < stylesList.length ; i++ )
\r
81 style = stylesList[ i ];
\r
82 styleName = style._name;
\r
84 var type = style.type;
\r
86 if ( type != lastType )
\r
88 combo.startGroup( lang[ 'panelTitle' + String( type ) ] );
\r
94 style.type == CKEDITOR.STYLE_OBJECT ? styleName : buildPreview( style._.definition ),
\r
104 onClick : function( value )
\r
107 editor.fire( 'saveSnapshot' );
\r
109 var style = styles[ value ],
\r
110 selection = editor.getSelection();
\r
112 if ( style.type == CKEDITOR.STYLE_OBJECT )
\r
114 var element = selection.getSelectedElement();
\r
116 style.applyToObject( element );
\r
121 var elementPath = new CKEDITOR.dom.elementPath( selection.getStartElement() );
\r
123 if ( style.type == CKEDITOR.STYLE_INLINE && style.checkActive( elementPath ) )
\r
124 style.remove( editor.document );
\r
126 style.apply( editor.document );
\r
128 editor.fire( 'saveSnapshot' );
\r
131 onRender : function()
\r
133 editor.on( 'selectionChange', function( ev )
\r
135 var currentValue = this.getValue();
\r
137 var elementPath = ev.data.path,
\r
138 elements = elementPath.elements;
\r
140 // For each element into the elements path.
\r
141 for ( var i = 0, element ; i < elements.length ; i++ )
\r
143 element = elements[i];
\r
145 // Check if the element is removable by any of
\r
147 for ( var value in styles )
\r
149 if ( styles[ value ].checkElementRemovable( element, true ) )
\r
151 if ( value != currentValue )
\r
152 this.setValue( value );
\r
158 // If no styles match, just empty it.
\r
159 this.setValue( '' );
\r
164 onOpen : function()
\r
166 if ( CKEDITOR.env.ie )
\r
169 var selection = editor.getSelection();
\r
171 var element = selection.getSelectedElement(),
\r
172 elementName = element && element.getName(),
\r
173 elementPath = new CKEDITOR.dom.elementPath( element || selection.getStartElement() );
\r
175 var counter = [ 0, 0, 0, 0 ];
\r
178 for ( var name in styles )
\r
180 var style = styles[ name ],
\r
183 if ( type == CKEDITOR.STYLE_OBJECT )
\r
185 if ( element && style.element == elementName )
\r
187 if ( style.checkElementRemovable( element, true ) )
\r
193 this.hideItem( name );
\r
197 if ( style.checkActive( elementPath ) )
\r
204 if ( !counter[ CKEDITOR.STYLE_BLOCK ] )
\r
205 this.hideGroup( lang[ 'panelTitle' + String( CKEDITOR.STYLE_BLOCK ) ] );
\r
207 if ( !counter[ CKEDITOR.STYLE_INLINE ] )
\r
208 this.hideGroup( lang[ 'panelTitle' + String( CKEDITOR.STYLE_INLINE ) ] );
\r
210 if ( !counter[ CKEDITOR.STYLE_OBJECT ] )
\r
211 this.hideGroup( lang[ 'panelTitle' + String( CKEDITOR.STYLE_OBJECT ) ] );
\r
217 function buildPreview( styleDefinition )
\r
221 var elementName = styleDefinition.element;
\r
223 // Avoid <bdo> in the preview.
\r
224 if ( elementName == 'bdo' )
\r
225 elementName = 'span';
\r
227 html = [ '<', elementName ];
\r
229 // Assign all defined attributes.
\r
230 var attribs = styleDefinition.attributes;
\r
233 for ( var att in attribs )
\r
235 html.push( ' ', att, '="', attribs[ att ], '"' );
\r
239 // Assign the style attribute.
\r
240 var cssStyle = CKEDITOR.style.getStyleText( styleDefinition );
\r
242 html.push( ' style="', cssStyle, '"' );
\r
244 html.push( '>', styleDefinition.name, '</', elementName, '>' );
\r
246 return html.join( '' );
\r
249 function sortStyles( styleA, styleB )
\r
251 var typeA = styleA.type,
\r
252 typeB = styleB.type;
\r
254 return typeA == typeB ? 0 :
\r
255 typeA == CKEDITOR.STYLE_OBJECT ? -1 :
\r
256 typeB == CKEDITOR.STYLE_OBJECT ? 1 :
\r
257 typeB == CKEDITOR.STYLE_BLOCK ? 1 :
\r
263 * The "styles definition set" to load into the styles combo. The styles may
\r
264 * be defined in the page containing the editor, or can be loaded on demand
\r
265 * from an external file when opening the styles combo for the fist time. In
\r
266 * the second case, if this setting contains only a name, the styles definition
\r
267 * file will be loaded from the "styles" folder inside the stylescombo plugin
\r
268 * folder. Otherwise, this setting has the "name:url" syntax, making it
\r
269 * possible to set the URL from which loading the styles file.
\r
271 * @default 'default'
\r
273 * // Load from the stylescombo styles folder (mystyles.js file).
\r
274 * config.stylesCombo_stylesSet = 'mystyles';
\r
276 * // Load from a relative URL.
\r
277 * config.stylesCombo_stylesSet = 'mystyles:/editorstyles/styles.js';
\r
279 * // Load from a full URL.
\r
280 * config.stylesCombo_stylesSet = 'mystyles:http://www.example.com/editorstyles/styles.js';
\r
282 CKEDITOR.config.stylesCombo_stylesSet = 'default';
\r