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

edited November 2022 in Tips & Tricks
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" } ] }
Sign In or Register to comment.