MCE5- How to put any image as custom button icon in Tiny mce-5?

Question

I'm using TinyMce-5 and I have to add some custom buttons to it, the buttons are working great but I don't know how to add an image as icon on those buttons, as fontawesomes do not come up with those icons, so I need to put a .png image as icon on the button. Here is my code that I've used in setup: parameter

ed.ui.registry.addButton('alignTop', {
    image:'http://localhost/image-process/images/donut_PNG27.png',
    tooltip: 'Align box top',
    onAction: function () {
        $('.shape[data-active=me]').css('top','0px');
    }
});

yes, its all jquery and non-conventional code , but yeah it worked — Meiji, Apr 03 '19 at 11:08
awesome! i can you put that info into an answer i'll happily upvote it. i haven't been able to figure out the right parameters to pass to addButton to get an image to show up. — Michael, Apr 03 '19 at 14:08
You cannot add icon to Tiny-mce on page load that's why we set interval of 100 ms after the page load to add icons, I'm pasting the code. — Meiji, Apr 04 '19 at 07:59

score 4 · Answer 1 · answered May 17 '19 at 10:20

I did not like above solution, so i have tried as below and worked like charm!!!!!


ed.ui.registry.addButton('alignTop', {
    text: '<image src="http://localhost/image-process/images/donut_PNG27.png" style="height: 24px;width: 24px;padding: 3px 0px 0px 0px;"/ >',
    tooltip: 'Align box top',
    onAction: function () {
        $('.shape[data-active=me]').css('top','0px');
    }
});

score 1 · Answer 2 · answered Sep 15 '20 at 03:42

While the addIcon API documentation says it's for registering SVG icons, you can pass it any markup:

// works with tinymce v5.2
ed.ui.registry.addIcon('donut', '<img src="/image-process/images/donut_PNG27.png" />');

ed.ui.registry.addButton('alignTop', {
    icon: 'donut',
    ...
});

score 0 · Accepted Answer · answered Apr 04 '19 at 08:06

Here is the js code

function fixTinyIcons(){
    if($('button[aria-label="Bend down text"]').length > 0 && $('button[aria-label="Bend down text"]').attr('data-bg') != 'done'){
    //console.log('1st found');
    $('button[aria-label="Bend down text"]').html('<img src="images/bottom-bend.jpg" style="height: 20px; width: 20px;">');
    $('button[aria-label="Bend down text"]').attr('data-bg','done');
    st_stop++;
}
$(document).ready(function(){
    WinIntervalCheck = setInterval(fixTinyIcons,100);

});

here is the explanation in image

MCE5- How to put any image as custom button icon in Tiny mce-5?

3 Answers3