CODEWITHSUNDEEP
ckeditor
Jake
Jake

Reputation: 11430

How to configure styles in CKEditor?

Does someone have a proper guide to configure styles in CKEditor please? My objective is to customise the dropdown list (I only really need one dropdown) to provide multiple styles of the same HTML tag. For example a P tag could have the following styles: <p>, <p class="excerpt">, <p class="highlight"> that can be selected from the dropdown list.

I tried to read this documentation but it has a lot of missing information. It uses a lot of CKEditor jargon and doesn't give an overview of the architecture or execution/initialisation pipeline to begin with.

I am using a very simple CKEditor (below) and I cannot find the difference between the "Paragraph" and "Normal" dropdown.

enter image description here

The documentation says use this code to configure toolbar:

config.toolbarGroups = [
    { name: 'clipboard',   groups: [ 'clipboard', 'undo' ] },
    { name: 'editing',     groups: [ 'find', 'selection', 'spellchecker' ] },
    { name: 'links' },
    { name: 'insert' },
    { name: 'forms' },
    { name: 'tools' },
    { name: 'document',    groups: [ 'mode', 'document', 'doctools' ] },
    { name: 'others' },
    '/',
    { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
    { name: 'paragraph',   groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
    { name: 'styles' },
    { name: 'colors' },
    { name: 'about' }
];

I see "styles" in one of the code lines, but it does not explain what "name" is, and what { name: styles' } does. Removing it will remove both the dropdowns and there is no hint in how to customize the dropdown list.

Then I found

config.format_tags = 'p;h1;h2;h3;pre';

but this only allows me to remove the dropdown item, not the combobox itself.

There is also the CKEDITOR.styleSet.add

 CKEDITOR.stylesSet.add( 'my_styles', [
    // Block-level styles
    { name: 'Blue Title', element: 'h2', styles: { 'color': 'Blue' } },
    { name: 'Red Title' , element: 'h3', styles: { 'color': 'Red' } },

    // Inline styles
    { name: 'CSS Style', element: 'span', attributes: { 'class': 'my_style' } },
    { name: 'Marker: Yellow', element: 'span', styles: { 'background-color': 'Yellow' } }
] );

Again, it does not explain where to place this code, or the execution sequence in the initialization pipeline. It does not explain how the value 'my_style' is used, whether it is a reference to some other configuration. I also don't quite understand the purpose of the comments "block level styles" and "inline styles". Seems irrelevant? The configuration code does not seem to make a distinct between these 2.

Upvotes: 0

Views: 1224

Answers (1)

Edson Perotoni
Edson Perotoni

Reputation: 131

  CKEDITOR.replace( 'ckeditor', {
 height: 500, 
 contentsCss: '.helloworld { background-color:#C0C0C0;}.helloworld2 { background-color:#5555C0;}',
 docType: '<!DOCTYPE HTML>',
toolbar: [
		{ name: 'document', groups: [ 'mode', 'document', 'doctools' ], items: [ 'Source', '-', 'Save', 'NewPage', 'Preview', 'Print', '-', 'Templates' ] },
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ], items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ], items: [ 'Find', 'Replace', '-', 'SelectAll', '-', 'Scayt' ] },
{ name: 'forms', items: [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ] },
'/',
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ], items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', ] },
{ name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] },
{ name: 'insert', items: [ 'Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak', 'Iframe' ] },
'/',
{ name: 'styles', items: [ 'Styles'  ] },
{ name: 'tools', items: [ 'Maximize', 'ShowBlocks' ] },
{ name: 'others', items: [ '-' ] },
{ name: 'about', items: [ 'About' ] }
		],
stylesSet: [
    { name: 'Paragraph', element: 'p', attributes: { 'class': 'helloworld' } },
    { name: 'Paragraph2', element: 'p', attributes: { 'class': 'helloworld2' } },
  
]
} );

http://jsfiddle.net/zf9w6tmm/5/

Upvotes: 0

Related Questions