Tips & Tricks — Exponent Forums

CKEditor Bootstrap 4/5 Styling

dleffler — Wed, 09 Nov 2022 17:41:56 +0000

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"
        }
    }
]

TinyMCE Bootstrap 4/5 Styling

dleffler — Wed, 09 Nov 2022 17:40:16 +0000

Here's how to get the Formats list in TinyMCE to display some Twitter Bootstrap 4/5 style types (this will only work in a post v2.3.7patch3 installation):

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/tinymce/tinymce.css file
Create a new toolbar configuration under the 'WYSIWYG Editor' tab of Site Configuration
Enter the following into the 'Formats List' area

{title: 'Inline', items: [
        {title: 'Strikethrough', inline: 'span', styles : {textDecoration : 'line-through'}, icon: 'strikethrough'},
        {title: 'Superscript', inline: 'sup', icon: 'superscript'},
        {title: 'Subscript', inline: 'sub', icon: 'subscript'},
        {title: 'Marker',        inline: 'mark'},
        {title: 'Big',          inline: 'big'},
        {title: 'Small',         inline: 'small'},
        {title: 'Typewriter',     inline: 'tt'},
        {title: 'Computer Code',   inline: 'code', icon: 'code'},
        {title: 'Keyboard Phrase', inline: 'kbd'},
        {title: 'Sample Text',    inline: 'samp'},
        {title: 'Variable',       inline: 'var'},
        {title: 'Deleted Text',    inline: 'del'},
        {title: 'Inserted Text',   inline: 'ins'},
        {title: 'Cited Work',     inline: 'cite'},
        {title: 'Inline Quotation', inline: 'q'},

    ]},
    {title: 'Containers', items: [
        {title: 'section', block: 'section', wrapper: true, merge_siblings: false},
        {title: 'article', block: 'article', wrapper: true, merge_siblings: false},
        {title: 'blockquote', block: 'blockquote', wrapper: true},
        {title: 'hgroup', block: 'hgroup', wrapper: true},
        {title: 'aside', block: 'aside', wrapper: true},
        {title: 'figure', block: 'figure', wrapper: true}
    ]},
    {title: 'Images', items: [
        {title: 'Styled image (left)',
            selector: 'img',
            classes: 'img-left'
        },
        {title: 'Styled image (right)',
            selector: 'img',
            classes: 'img-right'
        },
        {title: 'Styled image (center)',
            selector: 'img',
            classes: 'img-center'
        },
    ]},

/* TinyMCE Twitter Bootstrap 4/5 Styles */
    {
        "title": "Typography",
        "items": [
            {
                "title": "Lead Text",
                "block": "p",
                "classes": "lead"
            },
            {
                "title": "Small",
                "inline": "small"
            },
            {
                "title": "Marker",
                "inline": "mark"
            },
            {
                "title": "Insert",
                "inline": "ins"
            },
            {
                "title": "Abbreviation",
                "inline": "abbr"
            },
            {
                "title": "Initialism",
                "inline": "abbr",
                "classes": "initialism"
            },
            {
		"title": "Cited Work",
                "inline": "cite"
            },
            {
		"title": "Keyboard Phrase",
                "inline": "kbd"
            },
            {
                "title": "Variable",
                "inline": "var"
            },
            {
                "title": "Sample Text",
                "inline": "samp"
            },
            {
                "title": "Address",
                "format": "address",
                "wrapper": true
            },
            {
                "title": "Code Block",
                "format": "pre",
                "wrapper": true
            }
        ]
    },
    {
        "title": "Colors",
        "items": [
            {
                "title": "Muted",
                "inline": "span",
                "classes": "text-muted"
            },
            {
                "title": "Primary",
                "inline": "span",
                "classes": "text-primary"
            },
            {
                "title": "Success",
                "inline": "span",
                "classes": "text-success"
            },
            {
                "title": "Info",
                "inline": "span",
                "classes": "text-info"
            },
            {
                "title": "Warning",
                "inline": "span",
                "classes": "text-warning"
            },
            {
                "title": "Danger",
                "inline": "span",
                "classes": "text-danger"
            },
            {
                "title": "Background Primary",
                "block": "div",
                "classes": "bg-primary",
                "wrapper": true
            },
            {
                "title": "Background Success",
                "block": "div",
                "classes": "bg-success",
                "wrapper": true
            },
            {
                "title": "Background Info",
                "block": "div",
                "classes": "bg-info",
                "wrapper": true
            },
            {
                "title": "Background Warning",
                "block": "div",
                "classes": "bg-warning",
                "wrapper": true
            },
            {
                "title": "Background Danger",
                "block": "div",
                "classes": "bg-danger",
                "wrapper": true
            }
        ]
    },
    {
        "title": "Utilities",
        "items": [
            {
                "title": "Caret",
                "block": "div",
                "classes": "caret"
            },
            {
                "title": "Pull Left",
                "block": "div",
                "classes": "pull-left"
            },
            {
                "title": "Pull Right",
                "block": "div",
                "classes": "pull-right"
            },
            {
                "title": "Clearfix",
                "block": "div",
                "classes": "clearfix"
            },
            {
                "title": "Center Block",
                "block": "div",
                "classes": "center-block"
            },
            {
                "title": "Show",
                "inline": "span",
                "classes": "show"
            },
            {
                "title": "Hidden",
                "inline": "span",
                "classes": "hidden"
            },
            {
                "title": "Invisible",
                "inline": "span",
                "classes": "invisible"
            }
        ]
    },
    {
        "title": "Lists",
        "items": [
            {
                "title": "Unstyled List",
                "selector": "ul,ol",
                "classes": "list-unstyled"
            },
            {
                "title": "Inline List",
                "selector": "ul,ol",
                "classes": "list-inline"
            }
        ]
    },
    {
        "title": "Buttons",
        "items": [
            {
                "title": "Default",
                "inline": "a",
                "classes": "btn btn-secondary"
            },
            {
                "title": "Primary",
                "inline": "a",
                "classes": "btn btn-primary"
            },
            {
                "title": "Success",
                "inline": "a",
                "classes": "btn btn-success"
            },
            {
                "title": "Info",
                "inline": "a",
                "classes": "btn btn-info"
            },
            {
                "title": "Warning",
                "inline": "a",
                "classes": "btn btn-warning"
            },
            {
                "title": "Danger",
                "inline": "a",
                "classes": "btn btn-danger"
            },
            {
                "title": "Link",
                "inline": "a",
                "classes": "btn btn-link"
            },
            {
                "title": "Large",
                "selector": "a,button,input",
                "classes": "btn-lg"
            },
            {
                "title": "Small",
                "selector": "a,button,input",
                "classes": "btn-sm"
            },
            {
                "title": "Extra Small",
                "selector": "a,button,input",
                "classes": "btn-xs"
            },
            {
                "title": "Block",
                "selector": "a,button,input",
                "classes": "btn-block"
            },
            {
                "title": "Disabled",
                "selector": "a,button,input",
                "attributes": {
                    "disabled": "disabled"
                }
            }
        ]
    },
    {
        "title": "Badges",
        "items": [
            {
                "title": "Default",
                "inline": "span",
                "classes": "badge badge-secondary"
            },
            {
                "title": "Primary",
                "inline": "span",
                "classes": "badge badge-primary"
            },
            {
                "title": "Success",
                "inline": "span",
                "classes": "badge badge-success"
            },
            {
                "title": "Info",
                "inline": "span",
                "classes": "badge badge-info"
            },
            {
                "title": "Warning",
                "inline": "span",
                "classes": "badge badge-warning"
            },
            {
                "title": "Danger",
                "inline": "span",
                "classes": "badge badge-danger"
            }
        ]
    },
    {
        "title": "Alerts",
        "items": [
            {
                "title": "Default",
                "block": "div",
                "classes": "alert alert-secondary",
                "wrapper": true
            },
            {
                "title": "Primary",
                "block": "div",
                "classes": "alert alert-primary",
                "wrapper": true
            },
            {
                "title": "Success",
                "block": "div",
                "classes": "alert alert-success",
                "wrapper": true
            },
            {
                "title": "Info",
                "block": "div",
                "classes": "alert alert-info",
                "wrapper": true
            },
            {
                "title": "Warning",
                "block": "div",
                "classes": "alert alert-warning",
                "wrapper": true
            },
            {
                "title": "Danger",
                "block": "div",
                "classes": "alert alert-danger",
                "wrapper": true
            }
        ]
    },
    {
        "title": "Other",
        "items": [
            {
                "title": "Reverse Blockquote",
                "selector": "blockquote",
                "classes": "blockquote-reverse"
            },
            {
                "title": "Centered Blockquote",
                "selector": "blockquote",
                "classes": "text-center"
            },
            {
                "title": "Blockquote Footer",
                "block": "footer"
            },
            {
                "title": "Well",
                "block": "div",
                "classes": "card card-body",
                "wrapper": true
            },
            {
                "title": "Badge",
                "inline": "span",
                "classes": "badge"
            },
            {
                "title": "Responsive Image",
                "selector": "img",
                "classes": "img-fluid"
            },
            {
                "title": "Thumbnail Image",
                "selector": "img",
                "classes": "img-thumbnail"
            }
        ]
    }

Fix problems running under mysql 5.7.x

dleffler — Fri, 28 Oct 2016 10:48:28 +0000

If you are unable to insert new database records running under mysql 5.7.x, As of MySQL 5.7.5, the default SQL mode includes STRICT_TRANS_TABLES which prevents Exponent from creating new records (and possibly updating them?) since we pass (ALL) empty fields as null which is escaped to an empty string which is incompatible with an integer in strict mode.

This is most likely fixed by adding the following to the my.ini (mysql configuration) file in the 'mysqld' section

[mysqld]
sql_mode = ''

Popup Login View (Bootstrap 3)

dleffler — Tue, 17 May 2016 20:41:22 +0000

Here's a quick way to add a popup Log In/Out dialog to to a view template

{if $user->isLoggedIn()}{'Log Out'|gettext}{else}{'Log In'|gettext}{/if}
{script unique="dialog-`$__loc->src`" jquery="bootstrap-dialog" bootstrap="modal,transition"}
{literal}
    $('#topnavbar a.loginpopup').click(function(e) {
        BootstrapDialog.show({
            title: e.target.title,
            message: function(dialog) {
                var $message = $('
');
                var pageToLoad = dialog.getData('pageToLoad');
                $message.load(pageToLoad);
                return $message;
            },
            data: {
                'pageToLoad': EXPONENT.PATH_RELATIVE + "index.php?controller=login&action=showlogin&ajax_action=1"
            }
        });
        e.preventDefault();
    });
{/literal}
{/script}

Integrate multiple favicons from faviconit.com

dleffler — Mon, 25 Apr 2016 23:54:39 +0000

Exponent CMS has basic support for favicons allowing either a windows icon or png file as 'the favicon' (it must be named favicon.ico or favicon.png in the theme folder). We also provide basic support for Apple Touch icons with either a apple-touch-icon or apple-touch-icon-precomposed png file (named respectively). There is also a favicon service web site that builds a large package of favicons at all the sizes any device could request. It is and can take a large graphic/image file and convert it into multiple files of the appropriate sizes and also the code/instructions to integrate it into a web site.

Once you create the package and download it, it will contain all the image files along with some support files and 'favicon-instructions.txt' which tells you how to integrate it into a web page. Here's how you can integrate this feature into your Exponent CMS theme.

Extract all the files into your custom theme folder. Optionally you could create a subfolder within your theme and then adjust the code below to include that subfolder name before the 'favicon???.???' filename
Edit your theme and subtheme templates to insert a variation of the code found in the instructions (see below). This code will be placed within the element, preferrably immediately after the closing tag '?>' for the expTheme::head() call and before the html closing tag

SEF Urls on nginx

dleffler — Fri, 11 Mar 2016 15:18:57 +0000

To get SEF urls to work on nginx (verified running nginx 1.1.19 on ubuntu 12.04)...In the virtual hosts file for nginx the location block looks like this.

location / { 
                try_files $uri $uri/ /index.php?$args;
        }

Fix 'allow_url_fopen' error

dleffler — Fri, 12 Feb 2016 00:04:48 +0000

A way to remove the '...disabled in the server configuration by allow_url_fopen=0' error message when attempting to display an external calendar, twitter feed, etc... Add the following to the middle of your /overrides.php file (between the opening

ini_set("allow_url_fopen",1);

Remove 'Document Expired' page in browser after going 'back'

dleffler — Fri, 12 Feb 2016 00:03:00 +0000

A way to remove the 'Page/Document has Expired' message in the browser when trying to go 'back' from a page from the search hits or a form is to add the following to the middle of your /overrides.php file (between the opening

ini_set('session.cache_limiter','public');
session_cache_limiter(false);

TinyMCE Bootstrap 3 Styling

dleffler — Sat, 06 Feb 2016 14:02:04 +0000

Here's how to get the Formats list in TinyMCE to display some Twitter Bootstrap 3 style types (this will only work in a post v2.3.7patch3 installation):

You must ensure you are using a Bootstrap 3 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/tinymce/tinymce.css file
Create a new toolbar configuration under the 'WYSIWYG Editor' tab of Site Configuration
Enter the following into the 'Formats List' area

{title: 'Inline', items: [
        {title: 'Strikethrough', inline: 'span', styles : {textDecoration : 'line-through'}, icon: 'strikethrough'},
        {title: 'Superscript', inline: 'sup', icon: 'superscript'},
        {title: 'Subscript', inline: 'sub', icon: 'subscript'},
        {title: 'Marker',        inline: 'mark'},
        {title: 'Big',          inline: 'big'},
        {title: 'Small',         inline: 'small'},
        {title: 'Typewriter',     inline: 'tt'},
        {title: 'Computer Code',   inline: 'code', icon: 'code'},
        {title: 'Keyboard Phrase', inline: 'kbd'},
        {title: 'Sample Text',    inline: 'samp'},
        {title: 'Variable',       inline: 'var'},
        {title: 'Deleted Text',    inline: 'del'},
        {title: 'Inserted Text',   inline: 'ins'},
        {title: 'Cited Work',     inline: 'cite'},
        {title: 'Inline Quotation', inline: 'q'},

    ]},
    {title: 'Containers', items: [
        {title: 'section', block: 'section', wrapper: true, merge_siblings: false},
        {title: 'article', block: 'article', wrapper: true, merge_siblings: false},
        {title: 'blockquote', block: 'blockquote', wrapper: true},
        {title: 'hgroup', block: 'hgroup', wrapper: true},
        {title: 'aside', block: 'aside', wrapper: true},
        {title: 'figure', block: 'figure', wrapper: true}
    ]},
    {title: 'Images', items: [
        {title: 'Styled image (left)',
            selector: 'img',
            classes: 'img-left'
        },
        {title: 'Styled image (right)',
            selector: 'img',
            classes: 'img-right'
        },
        {title: 'Styled image (center)',
            selector: 'img',
            classes: 'img-center'
        },
    ]},

/* TinyMCE Twitter Bootstrap 3 Styles */
    {
        "title": "Typography",
        "items": [
            {
                "title": "Lead Text",
                "block": "p",
                "classes": "lead"
            },
            {
                "title": "Small",
                "inline": "small"
            },
            {
                "title": "Marker",
                "inline": "mark"
            },
            {
                "title": "Insert",
                "inline": "ins"
            },
            {
                "title": "Abbreviation",
                "inline": "abbr"
            },
            {
                "title": "Initialism",
                "inline": "abbr",
                "classes": "initialism"
            },
            {
		"title": "Cited Work",
                "inline": "cite"
            },
            {
		"title": "Keyboard Phrase",
                "inline": "kbd"
            },
            {
                "title": "Variable",
                "inline": "var"
            },
            {
                "title": "Sample Text",
                "inline": "samp"
            },
            {
                "title": "Address",
                "format": "address",
                "wrapper": true
            },
            {
                "title": "Code Block",
                "format": "pre",
                "wrapper": true
            }
        ]
    },
    {
        "title": "Colors",
        "items": [
            {
                "title": "Muted",
                "inline": "span",
                "classes": "text-muted"
            },
            {
                "title": "Primary",
                "inline": "span",
                "classes": "text-primary"
            },
            {
                "title": "Success",
                "inline": "span",
                "classes": "text-success"
            },
            {
                "title": "Info",
                "inline": "span",
                "classes": "text-info"
            },
            {
                "title": "Warning",
                "inline": "span",
                "classes": "text-warning"
            },
            {
                "title": "Danger",
                "inline": "span",
                "classes": "text-danger"
            },
            {
                "title": "Background Primary",
                "block": "div",
                "classes": "bg-primary",
                "wrapper": true
            },
            {
                "title": "Background Success",
                "block": "div",
                "classes": "bg-success",
                "wrapper": true
            },
            {
                "title": "Background Info",
                "block": "div",
                "classes": "bg-info",
                "wrapper": true
            },
            {
                "title": "Background Warning",
                "block": "div",
                "classes": "bg-warning",
                "wrapper": true
            },
            {
                "title": "Background Danger",
                "block": "div",
                "classes": "bg-danger",
                "wrapper": true
            }
        ]
    },
    {
        "title": "Utilities",
        "items": [
            {
                "title": "Caret",
                "block": "div",
                "classes": "caret"
            },
            {
                "title": "Pull Left",
                "block": "div",
                "classes": "pull-left"
            },
            {
                "title": "Pull Right",
                "block": "div",
                "classes": "pull-right"
            },
            {
                "title": "Clearfix",
                "block": "div",
                "classes": "clearfix"
            },
            {
                "title": "Center Block",
                "block": "div",
                "classes": "center-block"
            },
            {
                "title": "Show",
                "inline": "span",
                "classes": "show"
            },
            {
                "title": "Hidden",
                "inline": "span",
                "classes": "hidden"
            },
            {
                "title": "Invisible",
                "inline": "span",
                "classes": "invisible"
            },
            {
                "title": "Hide Text",
                "inline": "span",
                "classes": "hide-text"
            }
        ]
    },
    {
        "title": "Lists",
        "items": [
            {
                "title": "Unstyled List",
                "selector": "ul,ol",
                "classes": "list-unstyled"
            },
            {
                "title": "Inline List",
                "selector": "ul,ol",
                "classes": "list-inline"
            }
        ]
    },
    {
        "title": "Buttons",
        "items": [
            {
                "title": "Default",
                "inline": "a",
                "classes": "btn btn-default"
            },
            {
                "title": "Primary",
                "inline": "a",
                "classes": "btn btn-primary"
            },
            {
                "title": "Success",
                "inline": "a",
                "classes": "btn btn-success"
            },
            {
                "title": "Info",
                "inline": "a",
                "classes": "btn btn-info"
            },
            {
                "title": "Warning",
                "inline": "a",
                "classes": "btn btn-warning"
            },
            {
                "title": "Danger",
                "inline": "a",
                "classes": "btn btn-danger"
            },
            {
                "title": "Link",
                "inline": "a",
                "classes": "btn btn-link"
            },
            {
                "title": "Large",
                "selector": "a,button,input",
                "classes": "btn-lg"
            },
            {
                "title": "Small",
                "selector": "a,button,input",
                "classes": "btn-sm"
            },
            {
                "title": "Extra Small",
                "selector": "a,button,input",
                "classes": "btn-xs"
            },
            {
                "title": "Block",
                "selector": "a,button,input",
                "classes": "btn-block"
            },
            {
                "title": "Disabled",
                "selector": "a,button,input",
                "attributes": {
                    "disabled": "disabled"
                }
            }
        ]
    },
    {
        "title": "Labels",
        "items": [
            {
                "title": "Default",
                "inline": "span",
                "classes": "label label-default"
            },
            {
                "title": "Primary",
                "inline": "span",
                "classes": "label label-primary"
            },
            {
                "title": "Success",
                "inline": "span",
                "classes": "label label-success"
            },
            {
                "title": "Info",
                "inline": "span",
                "classes": "label label-info"
            },
            {
                "title": "Warning",
                "inline": "span",
                "classes": "label label-warning"
            },
            {
                "title": "Danger",
                "inline": "span",
                "classes": "label label-danger"
            }
        ]
    },
    {
        "title": "Alerts",
        "items": [
            {
                "title": "Default",
                "block": "div",
                "classes": "alert alert-default",
                "wrapper": true
            },
            {
                "title": "Primary",
                "block": "div",
                "classes": "alert alert-primary",
                "wrapper": true
            },
            {
                "title": "Success",
                "block": "div",
                "classes": "alert alert-success",
                "wrapper": true
            },
            {
                "title": "Info",
                "block": "div",
                "classes": "alert alert-info",
                "wrapper": true
            },
            {
                "title": "Warning",
                "block": "div",
                "classes": "alert alert-warning",
                "wrapper": true
            },
            {
                "title": "Danger",
                "block": "div",
                "classes": "alert alert-danger",
                "wrapper": true
            }
        ]
    },
    {
        "title": "Other",
        "items": [
            {
                "title": "Reverse Blockquote",
                "selector": "blockquote",
                "classes": "blockquote-reverse"
            },
            {
                "title": "Centered Blockquote",
                "selector": "blockquote",
                "classes": "text-center"
            },
            {
                "title": "Blockquote Footer",
                "block": "footer"
            },
            {
                "title": "Well",
                "block": "div",
                "classes": "well",
                "wrapper": true
            },
            {
                "title": "Large Well",
                "block": "div",
                "classes": "well well-lg",
                "wrapper": true
            },
            {
                "title": "Small Well",
                "block": "div",
                "classes": "well well-sm",
                "wrapper": true
            },
            {
                "title": "Badge",
                "inline": "span",
                "classes": "badge"
            },
            {
                "title": "Responsive Image",
                "selector": "img",
                "classes": "img-responsive"
            },
            {
                "title": "Rounded Image",
                "selector": "img",
                "classes": "img-rounded"
            },
            {
                "title": "Circle Image",
                "selector": "img",
                "classes": "img-circle"
            },
            {
                "title": "Thumbnail Image",
                "selector": "img",
                "classes": "img-thumbnail"
            }
        ]
    }

CKEditor Bootstrap 3 Styling

dleffler — Sat, 06 Feb 2016 13:53:26 +0000

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

You must ensure you are using a Bootstrap 3 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
Updated 25 July, 2016 to fix styles for images

[
    { 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 3 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-responsive"
        }
    }
    ,
    {
        name: "Image rounded shape" ,
        type: 'widget', 
        widget: 'image',
        attributes: {
            "class": "img-rounded"
        }
    }
    ,
    {
        name: "Image circle shape" ,
        type: 'widget',  
        widget: 'image',
        attributes: {
            "class": "img-circle"
        }
    }
    ,
    {
        name: "Image thumbnail shape" ,
        type: 'widget', 
        widget: 'image',
        attributes: {
            "class": "img-thumbnail"
        }
    }
]