php - 如何在 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 显示图像不会遇到类似问题。