Please disregard the 'View article...' shown at the bottom of many posts as this is the result of restoring old forum posts from a backup.
TinyMCE Bootstrap 4/5 Styling
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"
}
]
}