CODEWITHSUNDEEP
javascriptcssckeditor
MrJaysus
MrJaysus

Reputation: 31

CKEDITOR with custom toolbar and custom styles

I'm having troubles configuring CKEDITOR to have a custom toolbar with custom styles.

This is the config for the custom styles that i added to config.js

CKEDITOR.stylesSet.add('custom_styles', [
  { name: 'Text Bolder', element: 'p', attributes: { 'class': 'validate' }}
]);

This is the code i use configure the toolbar and the styles and initialize the toolbar

var cfg = { 
  toolbar: [
    [ 'Source', '-', 'Bold', 'Italic',{ name: 'Styles'}]
  ],
  stylesSet:  'custom_styles'
};
/* Inline */
CKEDITOR.inline('derecha',cfg);

The problem it's with the styles and i don't know why they show empty

Upvotes: 2

Views: 735

Answers (1)

MrJaysus
MrJaysus

Reputation: 31

The problem was with the <p> element. The previous code works if the element it's a <span> . I think it's because the inline editor is a <p> tag

CKEDITOR.stylesSet.add('custom_styles', [
 { name: 'Text Bolder', element: 'span', attributes: { 'class': 'validate' }}
]);
var cfg = { 
  toolbar: [
   [ 'Source', '-', 'Bold', 'Italic',{ name: 'Styles'}]
  ],
  stylesSet:  'custom_styles'
};
/* Inline */
CKEDITOR.inline('derecha',cfg);

Upvotes: 1

Related Questions