CKEditor Bootstrap 4/5 Styling

dleffler

Here's how to get the Styles list in CKEditor to display some Twitter Bootstrap 4/5 style types:

• You must ensure you are using a Bootstrap 4/5 framework themes AND if you are running the site from a subfolder of the root web host, you must edit the path in the /themes/yourtheme/editors/ckeditor/ckeditor.css file
• Create a new toolbar configuration under the 'WYSIWYG Editor' tab of Site Configuration
• Enter the following into the 'Styles List' area

[
    { name: 'Marker',           element: 'mark' },
 
    { 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: 'Image (left)',
        type: 'widget', 
        widget: 'image',
        attributes: { 'class': 'image-left' }
    },
 
    {
        name: 'Image (right)',
        type: 'widget', 
        widget: 'image',
        attributes: { 'class': 'image-right' }
    },
 
    {
        name: 'Image (center)',
        type: 'widget', 
        widget: 'image',
        attributes: { 'class': 'image-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 Twitter Bootstrap 4/5 Styles */
  /* Typography */
    {
        name: "Paragraph Lead" ,
        element: "p" ,
        attributes: {
            "class": "lead"
        }
    }
    ,   
  /* Blockquotes */
    {
        name: "Blockquote" ,
        element: "blockquote" ,
    }
    ,
    {
        name: "Blockquote Reversed" ,
        element: "blockquote" ,
        attributes: {
            "class": "blockquote-reverse"
        }
    }
    ,	
  /* Lists */
    {
        name: "Unstyled List" ,
        element: "ul" ,
        attributes: {
            "class": "list-unstyled"
        }
    }
    ,
    {
        name: "List inline" ,
        element: "ul" ,
        attributes: {
            "class": "list-inline"
        }
    }
    ,
  /* Tables */
    {
        name: "Table" ,
        element: "table" ,
        attributes: {
            "class": "table"
        }
    }
    ,
    {
        name: "Table Striped rows" ,
        element: "table" ,
        attributes: {
            "class": "table table-striped"
        }
    }
    ,
    {
        name: "Table Bordered" ,
        element: "table" ,
        attributes: {
            "class": "table table-bordered"
        }
    }
    ,
    {
        name: "Table Hover rows" ,
        element: "table" ,
        attributes: {
            "class": "table table-hover"
        }
    }
    ,
    {
        name: "Table Condensed" ,
        element: "table" ,
        attributes: {
            "class": "table table-condensed"
        }
    }
    ,
  /* Images */
    {
        name: "Image responsive" ,
        type: 'widget', 
        widget: 'image',
        attributes: {
            "class": "img-fluid"
        }
    }
    ,
    {
        name: "Image thumbnail shape" ,
        type: 'widget', 
        widget: 'image',
        attributes: {
            "class": "img-thumbnail"
        }
    }
]