MCE5-如何在 Tinymce-5 中将图像作为自定义按钮图标？答案

【问题标题】：MCE5- How to put any image as custom button icon in Tiny mce-5?MCE5-如何在 Tinymce-5 中将图像作为自定义按钮图标？
【发布时间】：2023-03-22 11:16:01
【问题描述】：

我正在使用 TinyMce-5，我必须为其添加一些自定义按钮，这些按钮效果很好，但我不知道如何在这些按钮上添加图像作为图标，因为 fontawesomes 没有提供这些图标，所以我需要在按钮上放置一个 .png 图像作为图标。这是我在设置中使用的代码：参数

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');
    }
});

【问题讨论】：

找到解决方案了吗？
是的，它都是 jquery 和非常规代码，但是它确实有效
太棒了！我能把这些信息放入答案中吗？我很乐意支持它。我无法找出正确的参数来传递给 addButton 以显示图像。
您无法在页面加载时将图标添加到 Tiny-mce，这就是为什么我们在页面加载后设置 100 毫秒的间隔来添加图标，我正在粘贴代码。

标签： jquery tinymce tinymce-plugins

【解决方案1】：

我不喜欢上面的解决方案，所以我尝试了下面的方法并像魅力一样工作！！！！！


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');
    }
});

【讨论】：

【解决方案2】：

虽然addIcon API documentation 表示它用于注册 SVG 图标，但您可以将任何标记传递给它：

// 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',
    ...
});

【讨论】：

【解决方案3】：

这里是js代码

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);

});

这是图片中的解释

【讨论】：