The Jodit icon system allows you to connect and use a ready-made set of icons in several places. Icons are actually SVG strings. You can insert any of these into your layout:
console.log(Jodit.modules.Icon.get('cancel')); // <svg ...
You can add your own icons:
Jodit.modules.Icon.set('someIcon', '<svg ....');
And then use this icon for example in a button in the toolbar
Jodit.make('#editor', { buttons: [ { icon: 'someIcon', name: 'someButton', exec: e => alert(e.selection.html) } ]});
The list of icons from the build can be viewed here
In addition to the added icons in the toolbar, you can also use a simple link to the image:
Jodit.make('#editor', { buttons: [ { iconURL: 'https://xdsoft.net/jodit/build/images/logo.png', name: 'someButton', exec: e => alert(e.selection.html) } ]});
Include Jodit and the CDN Font Awesome
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/><link rel="stylesheet" href="build/jodit.min.css" /><script src="build/jodit.min.js"></script>
Create input element
<textarea id="editor">Some text</textarea>
And define event getIcon:
getIcon
const editor = Jodit.make('#editor', { events: { getIcon: function (name, control, clearName) { var code = name; // not all font awesome icons is matched to Jodit icons switch (clearName) { case 'redo': code = 'rotate-right'; break; } return ( '<i style="font-size:14px" class="fa fa-' + code + ' fa-xs"></i>' ); } }});
For full replacing you can copy this code:
const editor = Jodit.make('#editor', { events: { getIcon: function (name, control, clearName) { var code = clearName; switch (clearName) { case 'redo': code = 'rotate-right'; break; case 'video': code = 'video-camera'; break; case 'copyformat': code = 'clone'; break; case 'about': code = 'question'; break; case 'selectall': code = 'legal'; break; case 'symbol': return '<span style="text-align: center;font-size:14px;">Ω</span>'; case 'hr': code = 'minus'; break; case 'left': case 'right': case 'justify': case 'center': code = 'align-' + name; break; case 'brush': code = 'tint'; break; case 'fontsize': code = 'text-height'; break; case 'ul': case 'ol': code = 'list-' + name; break; case 'source': code = 'code'; break; } return ( '<i style="font-size:14px" class="fa fa-' + code + ' fa-xs"></i>' ); } }});
If you like Jodit - try Jodit PRO
Icon system
The Jodit icon system allows you to connect and use a ready-made set of icons in several places. Icons are actually SVG strings. You can insert any of these into your layout:
You can add your own icons:
And then use this icon for example in a button in the toolbar
The list of icons from the build can be viewed here
In addition to the added icons in the toolbar, you can also use a simple link to the image:
Custom icons / Use Font awesome
Include Jodit and the CDN Font Awesome
Create input element
And define event
getIcon
:For full replacing you can copy this code: