在TinyMCE中使用仪表盘图标作为自定义按钮？

时间：2018-04-02 作者：user13286

我已经为TinyMCE创建了一个自定义按钮，我希望它使用dashicons中的Twitter图标。我希望能够通过Javascript做到这一点，而不需要额外的CSS。这可能吗？

以下是我当前（非工作）的尝试：

(function () {
    tinymce.PluginManager.add(\'twitter_button_plugin\', function (editor, url) {
        editor.addButton(\'mce_tweet_button\', {
            title: \'Insert tweet\',
            icon: \'dashicons dashicons-twitter\',
            onclick: function() {
                ...
            }
        });
    });
})();

1 个回复
SO网友:birgire

我希望能够通过Javascript做到这一点，而不需要额外的CSS。这可能吗？

我想你只想呆在家里tinymce.PluginManager.add( ... ).

以下是一个JS解决方案：

jQuery( \'.is-dashicon\' ).css( \'font-family\', \'dashicons\' );
在onPostRender 事件回调：

(function () {
    tinymce.PluginManager.add(\'twitter_button_plugin\', function (editor, url) {
        editor.addButton(\'mce_tweet_button\', {
            title: \'Insert tweet\',
            icon: \'insert-tweet is-dashicon dashicons dashicons-twitter\',
            onPostRender: function () {
                jQuery( \'.is-dashicon\' ).css( \'font-family\', \'dashicons\' );
            },
            onclick: function() {
                ...
            }
        });
    });
})();
将生成标记：

<i class="mce-ico mce-i-insert-tweet 
          is-dashicon dashicons dashicons-twitter" style="font-family: dashicons;"></i>
示例：

twitter

结束
标签： tinymce   小码农  

相关推荐

如何将自定义皮肤应用到WP_Editor/TinyMCE？

我正在尝试将皮肤应用于定制wp_editor(), 但它似乎并不适用于我所做的任何事情。皮肤是根据上的说明从TinyMCE-LESS文件生成的https://www.tinymce.com/docs/advanced/creating-a-skin/在我的主题文件夹中，我有一个名为/css/tinymce 包含以下文件：内容。内联。最小值小于内容。最小值小于皮肤。最小值小于这就是我调用wp\\u编辑器的方式skin_url 设置为TinyMCE，但它似乎不适用于皮肤。$settings = array(&