Question

我知道一种像这样的字体化改变工具的方法。

'textwidth'

生成文本菜单

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

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

我一直在搜索tinymce所有图标，但没有字体图标。

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

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

但这不是表演。只显示＆＃34;。＆＃34;仅

如何使用FontAwesome Icon？

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

您可以提供text或image属性代替icon属性，该属性允许您引用您选择的工具栏按钮图像。

我会注意到使用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 Icon？

2 个答案: