向 tinyMCE 按钮添加自定义图标答案

【问题标题】：adding a custom icon to a tinyMCE button向 tinyMCE 按钮添加自定义图标
【发布时间】：2014-08-07 20:40:39
【问题描述】：

我正在尝试将 Font-Awsome 图标添加到我添加到 tinyMCE 的按钮中：

 ed.addButton('youtube', {
     title: 'Add Video' ,
     icon: 'icon-youtube',
     onclick: function () {
     //do stuff here...
 }

使用文档建议的图像是不可接受的，但由于某种原因，我无法完成这项工作。有什么想法吗？

【问题讨论】：

标签： javascript angularjs plugins tinymce

【解决方案1】：

这个基于 CSS 的解决方案似乎运行良好：

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

它基于matt-royal对this stack exchange wordpress thread的回答

【讨论】：

正是我需要的。谢谢！
@msqar，只需转到fortawesome.github.io/Font-Awesome/icons 并在图标上执行“检查元素”，然后在 html 中查找“:before”元素并检查该元素的样式。
请注意，您需要在 [FONT-AWESOME-CONTENT] 周围加上双引号。我已经编辑了答案以包含它们。
从 TinyMCE 4.3 开始，它的字体不再很棒。我想现在是 icomoon。

【解决方案2】：

我知道这是旧的，但我想我会为任何感兴趣的人提供我的答案。我正在使用 TinyMCE 4。我将它添加到我的 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;
}

然后当我为我刚刚使用的按钮设置图标时。

editor.addButton('adjust', {
    tooltip: 'Adjust Layout',
    icon: 'fa fa-adjust',
    onclick: function () {
        dialogLayout(editor, url, settings);
    }
});

基本上，这将允许您使用任何字体很棒的图标，而不必为每个图标设置特定的类布局。

希望这对某人有所帮助。

【讨论】：

【解决方案3】：

据我了解，您试图在 tinyMCE 图标列表中添加带有图像的按钮。

 tinymce.PluginManager.add("youtube", function (editor) {   
    editor.addButton('youtube', {
        tooltip: 'Add video',
        image: tinymce.baseURL + '/plugins/youtube/icons/youtube.gif',
        onclick: function() {

        }
    }); 
});

在此文件夹中创建一个文件夹（我命名为“youtube”）创建另一个文件夹（我命名为“icons”，您将在其中放置您的图片），然后在 youtube 文件夹下创建您的文件 youtube.js。

【讨论】：

感谢您的宝贵时间。正如我上面提到的，我试图使用自定义字体 icon 而不是直接使用 image 文件。上面的解决方案做到了。

【解决方案4】：

对于 tinymce 5，您可以使用此示例：

editor.ui.registry.addButton('customButton1', {
    text: '<span class="fa fa-youtube"></span>',
    //icon: '<span class="icon-youtube"></span>',
    onAction: () => alert('Button clicked!')
});

【讨论】：

我的作品：

【解决方案5】：

这个简单的样式表对我有用：

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

它同样可以用于工具栏按钮或菜单项。

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

不要使用position: absolute，因为会破坏菜单布局。

【讨论】：

【解决方案6】：

以下 CSS 适用于 TinyMCE 4 和 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; }

【讨论】：