CKEditor styles

Yeah, you can configure the CkEditor and create your styles for it. See Personalizing the editor toolbars and buttons and Defining styles for the editor

Hi Richard,

Thanks for your reply. I followed the docs. When I'm trying to assign my toolbar to a widget it does take my custom toolbar but it doesn't take the styles I defined in styles.js but instead it takes the standard styles from the default.

I want to be able to create different toolbars and styles for my widgets.

Hi Nicky,

Do you want to style the content inside the CkEditor (not seen on live site) or the output of the widget itself? If its the first case, make sure that you clear your browser cache once you defined your custom styles. If its the second case - create your styles as a part of standard CSS stylesheet and define your Web part containers and use them in your widgets.

Hi Nicky,

I will just chime in with few suggestions

https://docs.kentico.com/display/K9/Defining+styles+for+the+editor

Important: When you modify the config.js file (or any other file used by the editor), the changes only apply after you clear your browser cache.

Hi,

Thanks for your feedback. I followed the docs but it gives met the default styles. I added a new styleSet under the default one:

CKEDITOR.stylesSet.add( 'default', [
/* Block Styles */

// These styles are already available in the "Format" combo ("format" plugin),
// so they are not needed here by default. You may enable them to avoid
// placing the "Format" combo in the toolbar, maintaining the same features.

{ name: 'Paragraph',        element: 'p' },
{ name: 'Heading 1', element: 'h1', attributes: {'class': 'default'} },
{ name: 'Heading 2',        element: 'h2' },
{ name: 'Heading 3',        element: 'h3' },
{ name: 'Heading 4',        element: 'h4' },
{ name: 'Heading 5',        element: 'h5' },
{ name: 'Heading 6',        element: 'h6' },
{ name: 'Preformatted Text',element: 'pre' },
{ name: 'Address',          element: 'address' },

/*

{ name: 'Italic Title',     element: 'h2', styles: { 'font-style': 'italic' } },
{ name: 'Subtitle',         element: 'h3', styles: { 'color': '#aaa', 'font-style': 'italic' } },
{
    name: 'Special Container',
    element: 'div',
    styles: {
        padding: '5px 10px',
        background: '#eee',
        border: '1px solid #ccc'
    }
},
*/

/* Inline Styles */

// These are core styles available as toolbar buttons. You may opt enabling
// some of them in the Styles combo, removing them from the toolbar.
// (This requires the "stylescombo" plugin)
/*
{ name: 'Strong',           element: 'strong', overrides: 'b' },
{ name: 'Emphasis',         element: 'em'   , overrides: 'i' },
{ name: 'Underline',        element: 'u' },
*/

{ name: 'Strikethrough',    element: 'strike' },
{ name: 'Subscript',        element: 'sub' },
{ name: 'Superscript',      element: 'sup' },

{ name: 'Marker',           element: 'span', attributes: { 'class': 'marker' } },

{ name: 'Big',              element: 'big' },
{ name: 'Small',            element: 'small' },
{ name: 'Typewriter',       element: 'tt' },

{ name: 'Computer Code',    element: 'code' },
{ name: 'Keyboard Phrase',  element: 'kbd' },
{ name: 'Sample Text',      element: 'samp' },
{ name: 'Variable',         element: 'var' },

{ name: 'Deleted Text',     element: 'del' },
{ name: 'Inserted Text',    element: 'ins' },

{ name: 'Cited Work',       element: 'cite' },
{ name: 'Inline Quotation', element: 'q' },

{ name: 'Language: RTL',    element: 'span', attributes: { 'dir': 'rtl' } },
{ name: 'Language: LTR',    element: 'span', attributes: { 'dir': 'ltr' } },

/* Object Styles */

{
    name: 'Styled image (left)',
    element: 'img',
    attributes: { 'class': 'left' }
},

{
    name: 'Styled image (right)',
    element: 'img',
    attributes: { 'class': 'right' }
},

{
    name: 'Styled image (center)',
    element: 'img',
    attributes: { 'class': 'img-center' }
},

{
    name: 'Compact table',
    element: 'table',
    attributes: {
        cellpadding: '5',
        cellspacing: '0',
        border: '1',
        bordercolor: '#ccc'
    },
    styles: {
        'border-collapse': 'collapse'
    }
},
{ name: 'Borderless Table',     element: 'table',   styles: { 'border-style': 'hidden', 'background-color': '#E6E6FA' } },
{ name: 'Square Bulleted List', element: 'ul',      styles: { 'list-style-type': 'square' } }

] );

CKEDITOR.stylesSet.add('textblock', [ /* Block Styles */

// These styles are already available in the "Format" combo ("format" plugin),
// so they are not needed here by default. You may enable them to avoid
// placing the "Format" combo in the toolbar, maintaining the same features.

{ name: 'Paragraph', element: 'p' },
{ name: 'Heading', element: 'h2' },

/* Inline Styles */

// These are core styles available as toolbar buttons. You may opt enabling
// some of them in the Styles combo, removing them from the toolbar.
// (This requires the "stylescombo" plugin)
/*
{ name: 'Strong',           element: 'strong', overrides: 'b' },
{ name: 'Emphasis',         element: 'em'   , overrides: 'i' },
{ name: 'Underline',        element: 'u' },
*/

/* Object Styles */
    {
    name: 'Center image',
    element: 'img',
    attributes: { 'class': 'img-center' }
},

{ name: 'Custom', element: 'h2', attributes: { 'class': 'intro-heading' } },

{ name: 'Square Bulleted List', element: 'ul', styles: { 'list-style-type': 'square' } }

]);

As you can see I deleted the Headings except for Heading 2. Now in my widget I see my created toolbar but it still takes the styles from the 'default' toolbar.