如何在 TinyMCE 上使用 FontAwesome 图标？

Question

我知道一种改变字体大小的方法。

<script type="text/javascript" src="/js/tinymce/tinymce.min.js"></script>
<script type="text/javascript">
    tinymce.init({
        selector : 'textarea',
        toolbar  : 'fontsizeselect',
    });
</script>

<textarea name="aaa"></textarea>

即生成文字菜单

<span class="mce-txt">Font Sizes</span>

但我不喜欢。我想把这段文字改成这样的图标。

我搜索了tinymce的所有图标，但是没有font-icon。

所以我认为这个解决方案是使用 FontAwesome。

<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<style type="text/css">
    span.mce-txt:before {
        content: "\f301";
        font-family: FontAwesome;
    }
</style>

但这不是表演。只显示“。”只有.

如何使用 FontAwesome 图标？

Answer 1

控制您在该工具栏按钮上看到的内容的代码在 tinymce/classes/ui/FormatControls.js

在第 507 行的 TinyMCE 4.4.3 中，您会发现：

editor.addButton('fontsizeselect', function() {
        var items = [], defaultFontsizeFormats = '8pt 10pt 12pt 14pt 18pt 24pt 36pt';
        var fontsize_formats = editor.settings.fontsize_formats || defaultFontsizeFormats;

        each(fontsize_formats.split(' '), function(item) {
            var text = item, value = item;
            // Allow text=value font sizes.
            var values = item.split('=');
            if (values.length > 1) {
                text = values[0];
                value = values[1];
            }
            items.push({text: text, value: value});
        });

        return {
            type: 'listbox',
            text: 'Font Sizes',
            tooltip: 'Font Sizes',
            values: items,
            fixedWidth: true,
            onPostRender: createListBoxChangeHandler(items, 'fontsize'),
            onclick: function(e) {
                if (e.control.settings.value) {
                    editor.execCommand('FontSize', false, e.control.settings.value);
                }
            }
        };
    });

您可以提供 image 或 icon 属性来代替 text 属性，这样您就可以为工具栏按钮引用您选择的图像。

我会注意到，使用 CSS 更改 TinyMCE 的 UI 现在可能会起作用，但随着 TinyMCE 的发展，无法保证 CSS 将保持不变同样，您的 CSS 技巧将来很容易失效。随着时间的推移，使用 TinyMCE API 显示图像不会遇到类似问题。

Answer 2

我通过修正两个错误解决了这个问题：

内容值为"\f031"，不是"\f301"。
font-family没有申请，所以我用!important

这可能有效：

<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<style type="text/css">
    [aria-label^="Font Sizes"] .mce-txt:before {
        content: "\f031";
        font-family: FontAwesome !important;
    }
</style>

http://codepen.io/qwe001/pen/VKPqqv

如何在 TinyMCE 上使用 FontAwesome 图标？

How to use FontAwesome Icon on TinyMCE?

css

php

jquery

tinymce

tinymce-4