4

I'm trying to add a new format or style option in CK Editor which inserts a blockquote with a class.

I have added several custom formats and styles and have no problems, but when trying to create one where the element is set to blockquote, it doesn't work.

The format dropdown does display the option, but the option does not work. The styles dropdown doesn't even show the option.

My javascript is below, and here is a JS Fiddle to demonstrate:

CKEDITOR.replace('editor1', {
format_section: {
    name: 'Section',
    element: 'section'
},
format_blockquote: {
    name: 'Blockquote',
    element: 'blockquote',
    attributes: {
        class: 'test-class1'
    }
},
format_tags: 'p;section;blockquote',
stylesSet: 'custom_styles'
});

CKEDITOR.stylesSet.add('custom_styles', [
// Block-level styles
{
    name: 'Red Title',
    element: 'h3',
    styles: {
        'color': 'Red'
    },
    attributes: {
        'class': 'test'
    }
},
{
    name: 'Bquote',
    element: 'blockquote',
    styles: {
        'color': 'Red'
    },
    attributes: {
        'class': 'test'
    }
},

// Inline styles
{
    name: 'Marker: Yellow',
    element: 'span',
    styles: {
        'background-color': 'Yellow'
    },
    attributes: {
        'class': 'test'
    }
},
{
    name: 'Bquote inline',
    element: 'blockquote',
    styles: {
        'background-color': 'Yellow'
    },
    attributes: {
        'class': 'test'
    }
}
]);

Note: I already have the default quote button enabled and we use that for our default quote styles.

Josh
  • 376
  • 2
  • 13
  • I am having the same issue, did you ever resolve it? – maddogandnoriko May 17 '20 at 23:55
  • @maddogandnoriko no, I never solved it. If you did, please do share an answer. I found extending CK Editor to be an extreme headache - the documentation seemed quite extensive but when it came down to it, it rarely had the answers I needed. Much preferred extending Tiny MCE. – Josh Oct 09 '20 at 16:17

0 Answers0