'adding a custom icon to a tinyMCE button
I'm trying to add a Font-Awsome icon to a button I added to tinyMCE thus:
ed.addButton('youtube', {
title: 'Add Video' ,
icon: 'icon-youtube',
onclick: function () {
//do stuff here...
}
using an image like the docs suggest was not acceptable but for some reason I am not able to make this work. any ideas?
Solution 1:[1]
this CSS based solution seems to work nicely:
i.mce-i-[FONT-AWESOME-CLASSNAME]:before { // FONT-AWESOME-CLASSNAME e.g. "icon-youtube"
content: "[FONT-AWESOME-CONTENT]"; // FONT-AWESOME-CONTENT e.g. "\f166"
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
color: #000;
font-size: 1.5em;
padding-right: 0.5em;
position: absolute;
top: 15%;
left: 0;
}
it is based on matt-royal's answer on this stack exchange wordpress thread
Solution 2:[2]
I know this is old, but I thought I would throw in my answer for anyone who is interested. I am using TinyMCE 4. I added this to my CSS
.mce-ico.mce-i-fa {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
then when I am setting the icon for the buttons I just use.
editor.addButton('adjust', {
tooltip: 'Adjust Layout',
icon: 'fa fa-adjust',
onclick: function () {
dialogLayout(editor, url, settings);
}
});
basically this will let you use any font awesome icons without having to have a specific class layout for each icon.
Hope this helps someone.
Solution 3:[3]
From what I understand you trying to add a button with an image in the list of icons tinyMCE.
tinymce.PluginManager.add("youtube", function (editor) {
editor.addButton('youtube', {
tooltip: 'Add video',
image: tinymce.baseURL + '/plugins/youtube/icons/youtube.gif',
onclick: function() {
}
});
});
Create a folder (I named "youtube") in this folder create another folder (I named "icons" in which you put your image), then create your file youtube.js under youtube folder.
Solution 4:[4]
For tinymce 5 you can use this sample:
editor.ui.registry.addButton('customButton1', {
text: '<span class="fa fa-youtube"></span>',
//icon: '<span class="icon-youtube"></span>',
onAction: () => alert('Button clicked!')
});
Solution 5:[5]
This simple stylesheet worked for me:
i.mce-i-[FONT-AWESOME-CLASSNAME]:before { // FONT-AWESOME-CLASSNAME e.g. "icon-youtube"
content: [FONT-AWESOME-CONTENT]; // FONT-AWESOME-CONTENT e.g. "\f166"
font-family: FontAwesome;
}
It can be used for a toolbar button or menu item equally well.
ed.addButton('youtube', {
title: 'Add Video' ,
icon: '[FONT-AWESOME-CLASSNAME]',
onclick: function () { /* magic */ }
}
ed.addMenuItem('youtube', {
text: 'Add Video' ,
icon: '[FONT-AWESOME-CLASSNAME]',
onclick: function () { /* magic */ },
context: 'view'
}
Do not use position: absolute
because layout in menu will be spoiled.
Solution 6:[6]
The following CSS works for TinyMCE 4 and FontAwesome 5:
.mce-ico.mce-i-fas {
display: inline-block;
font-family: 'Font Awesome 5 Free';
font-weight: 900;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; }
Solution 7:[7]
In TinyMCE v5, there's a new tinymce.editor.ui.Registry
method called addIcon, that registers a new SVG icon, quoting:
Registers a new SVG icon, the icon name reference can be configured by any TinyMCE 5 Ui components that can display an icon. The icon is only available to the editor instance it was configured for.
Method Parameters:
addIcon(name: String, svgData: String)
- name (String) - Unique name identifying the new icon.
- svgData (String) - The SVG data string the browser will use to render the SVG icon.
Method Implementation:
// To add a simple triangle icon:
editor.ui.registry.addIcon('triangleUp', '<svg height="24" width="24"><path d="M12 0 L24 24 L0 24 Z" /></svg>');
Then, you can use that unique name identifier in your custom buttons, for example:
editor.ui.registry.addButton('youtube', {
text: 'Add Video' ,
icon: 'triangleUp',
onAction: () => {
// do stuff here...
}
});
Final Result:
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|---|
Solution 1 | alamin |
Solution 2 | Robert E. McIntosh |
Solution 3 | SSouhaieb |
Solution 4 | Bahman Shafiei |
Solution 5 | naXa stands with Ukraine |
Solution 6 | Thuc Nguyen |
Solution 7 |