how to create custom style on CK Editor (formerly FCK Editor)

first create a definition of its own menus and style

CKEDITOR.addStylesSet( ‘my_styles’,
[
// Block Styles
{ name : ‘Green Title’, element : ‘h2’, styles : { ‘color’ : ‘Green’ } },
{ name : ‘Orange Title’ , element : ‘h3’, styles : { ‘color’ : ‘Orange’ } },

// Inline Styles
{ name : ‘Warning Box’, element : ‘span’, attributes : { ‘class’ : ‘warning-box’ } }
]);

you can add and subtract style that will be displayed by adding a set that contains:
name : title to be displayed in combo-box at the editor
element: tag that will be used to add style to the selected text
attribute: attribute other than style in the tag
styles: inline style on the tag.

then load the style on the configuration of our editors

CKEDITOR.replace( “my_editor”,{
…
stylesCombo_stylesSet: ‘my_styles’
});

if you only use inline styles (information about style is defined there in step 1, it does not require external css), then you have completed
but if you like the example use the classes from external css, the view in the editor will not change because active css in the editor is different from outside the editor. (As in style at the bottom of the class)
for that you must add the style definition in the editor:

CKEDITOR.instances.my_editor.addCss (‘. Warning-box (width: 100%; padding: 10px; text-align: center; font-size: 14px; font-weight: bold; border: 2px solid # FF0000; background: # F0FFF0;) ‘);

then view at the editor same with the view that we get (What You See Is What You Get)