CKEditor styles

Nicky Zeeman asked on November 24, 2016 10:27

Hi,

Is it possible to remove the default styles from the CKEditor and use my own? I already made a new toolbar named Custom inside the config.js file.

config.toolbar_Custom =
[
    [sourceName, '-'],
    ['Undo', 'Redo', '-'],
    ['Bold', 'Italic', 'Underline', '-'],
    ['NumberedList', 'BulletedList', 'Outdent', 'Indent', '-'],
    ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-'],
    ['InsertLink', 'Unlink', '-'],
    ['InsertImageOrMedia', 'QuicklyInsertImage', '-'],
    ['Maximize']
];

I defined styles in the styles.js

CKEDITOR.stylesSet.add('custom', [
/* 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': 'custom-heading' } },
{ 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' },

...

In my widget I set the default value of the toolbar set to Custom.

Now, the widget is using my custom toolbar but it takes the styles from the default styleset. Is there a way to create/override the default styleset without modifying the default?

Thanks in advance.

Recent Answers


Richard Sustek answered on November 24, 2016 10:32

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

2 votesVote for this answer Mark as a Correct answer

Nicky Zeeman answered on November 24, 2016 14:26

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.

0 votesVote for this answer Mark as a Correct answer

Richard Sustek answered on November 25, 2016 13:10

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.

1 votesVote for this answer Mark as a Correct answer

Chetan Sharma answered on November 28, 2016 11:41

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.

1 votesVote for this answer Mark as a Correct answer

Nicky Zeeman answered on November 28, 2016 14:05

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.

0 votesVote for this answer Mark as a Correct answer

   Please, sign in to be able to submit a new answer.