将自定义图标添加到tinyMCE按钮

Question

将自定义图标添加到tinyMCE按钮

17

我正在尝试向我添加到tinyMCE的按钮中添加Font-Awesome图标，方法如下：

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

按照文档建议使用图像不可接受，但出于某种原因我无法使其正常工作。你有什么想法吗？

- Kepedizer

7个回答

13

我知道这条留言很旧了，但是我想为任何有兴趣的人提供我的答案。我正在使用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);
    }
});

基本上，这将允许您使用任何Font Awesome图标，而无需为每个图标拥有特定的类布局。

希望这能帮助到某人。

- Robert E. McIntosh

10

据我理解，您正在尝试在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。

创建一个文件夹（我命名为“youtube”），在其中再创建一个文件夹（我命名为“icons”，你需要将图片放在其中），然后在“youtube”文件夹下创建文件youtube.js。

- SSouhaieb

谢谢您的时间。如上所述，我正在尝试使用自定义字体图标，而不是直接使用图像文件。上面提供的解决方案成功了。 - Kepedizer

3

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

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

- Bahman Shafiei

1

对我来说有效的是：<i style="font-family:FontAwesome" class="fa fa-users"></i> - Basil Kosovan

2

在 TinyMCE v5 中，有一个名为 tinymce.editor.ui.Registry 的新方法，称为 addIcon，它注册了一个新的 SVG 图标，引用如下：

注册一个新的 SVG 图标，图标名称引用可以由任何能够显示图标的 TinyMCE 5 Ui 组件进行配置。该图标仅对其配置的编辑器实例可用。

方法参数：

addIcon(name: String, svgData: String)

name（字符串）-用于标识新图标的唯一名称。
svgData（字符串）-浏览器用于呈现SVG图标的SVG数据字符串。

方法实现：

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

然后，您可以在自定义按钮中使用该唯一名称标识符，例如：

editor.ui.registry.addButton('youtube', {
  text: 'Add Video' ,
  icon: 'triangleUp',
  onAction: () => {
    // do stuff here...
  }
});

最终结果：

- Ricardo Dias Morais

1

你救了我的命。 - mmadd990

1

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

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，因为菜单的布局将会被破坏。

- naXa stands with Ukraine

1

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

- Thuc Nguyen

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Kepedizer · Accepted Answer

这个基于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在这个WordPress的Stack Exchange线程中的答案。