Prerequirements
Supported browsers
- All major browsers supported by TinyMCE and supporting SVG
- Chrome
- Firefox
- Safari
- Edge
- IE 11
- All major mobile browsers
- etc.
Installation
- Copy uncompressed folder booticons into your /tinymce/js/tinymce/plugins/ folder (depending on your TinyMCE path)
- Edit your tinymce.init()
- Add booticons into plugins
- Add booticons into toolbar
- (optional) Add booticons into menu - TinyMCE documentation
- (optional) Add booticons_default_color definition - default is '858796'
- (optional) Add booticons_sizes definition - default is '16, 20, 30, 40, 70, 100, 140' (make sure it fits in the dialog box if you choose larger dimensions)
- (optional) Add booticons_default_size definition - default is '40'
acceptable values depends on booticons_sizes
Example tinymce.init() - exactly the same is used on demo page:
tinymce.init({
height : 500,
//language : "cs",
selector : "#tiny",
toolbar: "booticons",
plugins: 'booticons code',
booticons_default_color: 'c74848',
booticons_sizes: '16, 20, 30, 40, 70, 100, 140',
booticons_default_size: '40',
menubar: 'insert view',
menu: {
insert: { title: 'Insert', items: 'booticons' },
view: { title: 'View', items: 'code' }
},
});
Languages
- Plugin is in default english language, the only one other is Czech - 'cs' language
- If you need some other, it's easy to add new language:
- Copy cs.js file in the langs subfolder of plugin
- Rename file to yuorlangshortcut.js (for example ca.js for Catalan) - list of languages with shortcuts is here on TinyMCE page
- Edit new language file - change lang shortcut on first row and translate it to your language (it's only 5 items, it's easy)
Example - cs.js language file:
tinymce.addI18n('cs',{
"Bootstrap icons": "Bootstrap ikony",
"Icon selection": "Výběr ikony",
"Settings": "Nastavení",
"Icon size": "Velikost ikony",
"Icon color": "Barva ikony"
});
About Bootstrap Icons
Icons in this plugin are from 1.4.0 version of
Bootstrap Icons. Bootstrap Icons license -
MIT