stylescombo plugins with multiple class selection - ckeditor

Question

I merged the stylesheetparser and the stylescombo plugins and want to select mutiple classes from the combo. I made some changes in the onOpen and the onClick functions:
onOpen: function() {
var selection = editor.getSelection(),
selectedElement = selection.getSelectedElement(),
selectedRanges = !selectedElement && selection.getRanges(),
selectedText = !selectedElement && selection.getSelectedText(),
nativeRange,
elementPath = editor.elementPath(),
element,
counter = [ 0, 0, 0, 0 ];
this.showAll();
this.unmarkAll();
for ( var name in styles ) {
var style = styles[ name ],
type = style._.type;
if(type == CKEDITOR.STYLE_OBJECT && (selectedElement || selectedText))
element = !selectedText ? selectedElement : selectedText;
else if((type == CKEDITOR.STYLE_BLOCK || type == CKEDITOR.STYLE_INLINE) && !selectedText && !selectedElement && selectedRanges[ 0 ] && selectedRanges[ 0 ].getCommonAncestor( 1 ))
element = selectedRanges[ 0 ].getCommonAncestor( 1 ).getAscendant( style.element );
else if(type == CKEDITOR.STYLE_INLINE && selectedText && !selectedElement)
element = selectedText;
if(element != null) {
if(style.checkApplicable( elementPath, editor, editor.activeFilter )) {
counter[ type ]++;
var classes = !selectedText ? element.getAttribute( 'class' ) : null,
classArr = classes != null ? classes.split(' ') : [];
if(classArr.length > 0) {
for(var i = 0; i < classArr.length; i++) {
if(classArr[i] == style._.definition.attributes['class'])
this.mark( name );
}
}
}
else
this.hideItem( name );
}
}
if ( !counter[ CKEDITOR.STYLE_BLOCK ] )
this.hideGroup( lang[ 'panelTitle' + String( CKEDITOR.STYLE_BLOCK ) ] );
if ( !counter[ CKEDITOR.STYLE_INLINE ] )
this.hideGroup( lang[ 'panelTitle' + String( CKEDITOR.STYLE_INLINE ) ] );
if ( !counter[ CKEDITOR.STYLE_OBJECT ] )
this.hideGroup( lang[ 'panelTitle' + String( CKEDITOR.STYLE_OBJECT ) ] );
},
onClick: function( value ) {
editor.focus();
editor.fire( 'saveSnapshot' );
var style = styles[ value ],
type = style._.type,
selection = editor.getSelection(),
selectedElement = selection.getSelectedElement(),
selectedRanges = !selectedElement && selection.getRanges(),
selectedText = !selectedElement && selection.getSelectedText(),
element;
if(type == CKEDITOR.STYLE_OBJECT && (selectedElement || selectedText))
element = !selectedText ? selectedElement : selectedText;
else if((type == CKEDITOR.STYLE_BLOCK || type == CKEDITOR.STYLE_INLINE) && !selectedText && !selectedElement && selectedRanges[ 0 ] && selectedRanges[ 0 ].getCommonAncestor( 1 ))
element = selectedRanges[ 0 ].getCommonAncestor( 1 ).getAscendant( style.element );
else if(type == CKEDITOR.STYLE_INLINE && selectedText && !selectedElement)
element = selectedText;
if(element != null) {
var classes = !selectedText ? element.getAttribute( 'class' ) : null,
classArr = classes != null ? classes.split(' ') : [],
selClass = style._.definition.attributes['class'],
styleClasses = CKEDITOR.tools.clone( style );
if(classArr.length > 0 && contains(classArr, selClass) && !selectedText) {
var newClassArr = new Array();
for(var i = 0; i < classArr.length; i++) {
if(classArr[i] != selClass)
newClassArr.push(classArr[i]);
}
if(newClassArr.length == 0) {
editor.removeStyle( styleClasses );
}
else {
styleClasses._.definition.attributes['class'] = newClassArr.join(' ');
editor.applyStyle( styleClasses );
}
}
else {
classArr.push(selClass);
styleClasses._.definition.attributes['class'] = classArr.join(' ');
editor.applyStyle( styleClasses );
}
}
editor.fire( 'saveSnapshot' );
},
It works for block elements and images (didn't checked fake elements), you can select and deselect all classes you want. But I have some trouble with inline elements.
If I click inside a block element, it lists all classes for this element and I can select/deselect what I want/need. If I click inside an inline element, nothing happends. Can getAscendant() not find inline element tags?
If I select text, it lists all classes for inline elements. But I want span classes only and not e.g. strong classes. Classes for the strong tag should only available if I select a strong element. Is it possible? How can I differentiate different inline elements?
Why anchors are objects and not inline elements? If I double click an anchor and close the link dialog, I can select an anchor class.
How to disable the combo, if no classes are available? I can not find the right place.
How to disable the combo close on a class selection? If the selected class is set after close, forget this question - I can live with it :-)
Here is a demo: http://webutler.de/test/index.php?lang=en
The complete file: test/plugins/cssclasscombo/plugin.js
The plugin as zip: test/plugins/cssclasscombo.zip
If you try the plugin, set
config.contentsCss = ['contents.css']; // <= it reads the classes from this file
config.extraPlugins = 'cssclasscombo';
config.removePlugins = 'stylescombo';
config.stylesSet = [];
config.allowedContent = true;
// the plugin works with indent and justify classes =>
config.justifyClasses = [ 'alignleft', 'aligncenter', 'alignright', 'alignjustify' ];
config.indentClasses = [ 'indent1', 'indent2', 'indent3', 'indent4', 'indent5' ];
to your config and use this CSS file: http://www.webutler.de/test/contents.css
Thanx for help

Answer 1

It's not perfect, but the plugin works now. If you can need it, here is the download:
http://webutler.de/download/ckeditor_plugins/cssclasscombo.zip
Settings in your config.js:
config.removePlugins = 'stylescombo';
config.extraPlugins = 'cssclasscombo';
config.stylesSet = [];
config.contentsCss = ['contents.css']; // <= classes are read from this file(s)