CKEditor 4 - inline editing - custom styles combo - css

Question

I'm running multiple instances of CKE, in its inline editing mode, to have the final user edit blocks of contents, just as these will look like in the final html rendering.
So everything edited inherits from the global CSS of my editing page.
And it's awesome.
Now I would like the style combo to display, not all the running styles, but only a part of them (color classes and basic stuff like this).
How can I achieve this?
i.e. keeping all existing css applied to whatever is edited AND only offer a few of them in the combo
Thanks for any help or starting point...
After finding the solution : a fully working code sample with multiple inline editing, custom styles, auto-save via ajax and other tuning, if it can help
CKEDITOR.disableAutoInline = true;
CKEDITOR.stylesSet.add( 'my_styles', [
// Block-level styles
{ name: 'Blue Title', element: 'h2', attributes: { 'class': 'bleu' } },
{ name: 'Red Title' , element: 'h3', attributes: { 'class': 'rouge' } },
// Inline styles
{ name: 'CSS Style', element: 'span', attributes: { 'class': 'my_style' } },
{ name: 'Marker: Yellow', element: 'span', styles: { 'background-color': 'Yellow' } }
] );
$("div[contenteditable='true']" ).each(function( index ) {
var content_id = $(this).attr('id');
var ligneidx = $(this).attr('ligneidx');
var blocidx = $(this).attr('blocidx');
CKEDITOR.inline( content_id, {
stylesSet : 'my_styles',
toolbarGroups : [
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'editing' ] },
{ name: 'forms', groups: [ 'forms' ] },
'/',
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi', 'paragraph' ] },
{ name: 'links', groups: [ 'links' ] },
{ name: 'insert', groups: [ 'insert' ] },
'/',
{ name: 'styles', groups: [ 'styles' ] },
{ name: 'colors', groups: [ 'colors' ] },
{ name: 'tools', groups: [ 'tools' ] },
{ name: 'others', groups: [ 'others' ] },
{ name: 'about', groups: [ 'about' ] }
],
// Remove some buttons provided by the standard plugins, which are
// not needed in the Standard(s) toolbar.
removeButtons : 'Form,Checkbox,Radio,TextField,Textarea,Select,Button,HiddenField,ImageButton,Replace,Find,SelectAll,JustifyLeft,JustifyCenter,JustifyRight,JustifyBlock,Language,BidiRtl,BidiLtr,Flash,Smiley,PageBreak,Iframe,Font,FontSize,About,NumberedList,Blockquote,CreateDiv,Underline,Subscript,Superscript,Page2images, Newpage,Templates,Strike,Indent,Outdent',
//removePlugins: 'page2images,VideoDetector',
format_tags : 'p;h1;h3',
// Simplify the dialog windows.
removeDialogTabs : 'image:advanced;link:advanced',
extraPlugins : 'sourcedialog',
colorButton_enableMore : false,
colorButton_colors : '00819c,e32434,e9632d,9c1f4d,795127,ececf0,ececec,fafafa,dddddd,939393,25242c,fff,000',
filebrowserBrowseUrl : '/modele/classes/filemanager/dialog.php?type=2&editor=ckeditor&lang=fr_FR&fldr=',
filebrowserUploadUrl : '/modele/classes/filemanager/dialog.php?type=2&editor=ckeditor&lang=fr_FR&fldr=',
filebrowserImageBrowseUrl : '/modele/classes/filemanager/dialog.php?type=1&editor=ckeditor&lang=fr_FR&fldr=',
uiColor : "#a7f0ff",
defaultLanguage : 'fr',
on: {
blur: function( event ) {
var data = event.editor.getData();
var request = jQuery.ajax({
url: "/modele/admin/ajaxupdate_bloc.php",
type: "POST",
data: {
content : data,
ligneidx : ligneidx,
blocidx : blocidx
},
});
}
}
} );
});

Answer 1

Try to pass your own style definitions to CKEDITOR like this
CKEDITOR.stylesSet.add()
More information and example here:
http://docs.ckeditor.com/#!/guide/dev_howtos_styles
There is also a Stylesheet Parser Plugin that can be used, info here:
http://ckeditor.com/addon/stylesheetparser