如何将新的仪表盘图标用于定制TinyMCE按钮？

时间：2014-03-16 作者：MBL

我一直在跟踪a tutorial 关于Tuts+（链接自WordPress Codex）如何与TinyMCE编辑器交互以添加按钮。按照那篇文章的示例代码，我有一个JS文件，它将按钮添加到TinyMCE。添加图标的JS相关截图是：

ed.addButton(\'dropcap\', {
    title : \'DropCap\',
    cmd : \'dropcap\',
    image : url + \'/dropcap.png\'
});

在WP 3.8之前，这还不错，但是Dashicons 在TinyMCE按钮上使用静态PNG看起来已经过时了。。。自3.8版以来，我已经更新了我的自定义帖子类型以使用Dashicons，但我想知道使用Dashicons获得TinyMCE按钮的正确方法是什么？有一个handy guide James Coster介绍了如何使用可能相关的Dashicons（尽管我假设没有必要调用Dashicons脚本排队，因为它们已经在后端加载了）。

3 个回复

最合适的回答,由SO网友:MBL 整理而成

要使用已加载到WP dashboard中的Dashicons CSS文件设置图标样式，需要添加一些额外的CSS。在Wordpress（3.9）的最新beta版中，使用了TinyMCE 4.0，因此我不确定这是否适用于早期版本（不过，可能需要修改版本，以适应之前TinyMCE按钮输出的不同类）。在WP 3.9（和TinyMCE 4.0）中，输出编辑器上的图标，例如。

<div id="mce_16" class="mce-widget mce-btn" tabindex="-1" aria-labelledby="mce_16" role="button" aria-label="DropCap">
    <button role="presentation" type="button" tabindex="-1">
        <i class="mce-ico mce-i-dropcap"></i>
    </button>
</div>

有两个阶段，首先添加一个函数，将自定义样式表排入WP admin（用于设置新按钮的样式）。

add_action( \'admin_enqueue_scripts\', \'se12334_stylesheet_to_admin\' );
/**
 * Add stylesheet to the admin pages
 */
function se12334_stylesheet_to_admin() {
    wp_enqueue_style( \'custom-mce-style\', get_template_directory_uri() . \'PATH/TO/CSS.FILE\' );
}

其次，遵循James Koster\'s Dashicons（一个简单的css选择器）使用指南:before 可以应用到你的图标CSS类。在原始问题的示例中，CSS类将是mce-i-dropcap

.CUSTOM_MCE_BUTTON_CLASS:before {
    font-family: "dashicons";
    content: "\\f100";
}

尽管如此，请确保删除在原始JS中添加图像的调用ed.addButton 将改用函数和字体图标

请注意admin_enqueue_scripts 函数将在每个管理页面上调用，因此如果您的自定义样式表很大，则可能会减慢加载时间（尽管中只有图标定义的缩小样式表不太可能对加载时间产生很大影响）。

SO网友:bueltge

添加Dashicon，TinyMCE中的所有按钮都有一个类，还有自定义按钮。包括（使用wp_enqueue_style() 带有带短划线图标的样式的样式表，如以下示例所示。

.myicon:before {
    content: \'\\2605\';
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    font: normal 16px/1 \'dashicons\';
    vertical-align: top;
}

默认情况下，Dashicon在每个编辑页面上都处于活动状态，但将Dashicon添加到Dependes样式表中，它也包括在内。

助手

请参见this plugin 要找到合适的字体，请参阅WordPress后端中要包含的方法和示例。

TinyMCE和WordPress 3.9是我这边关于这个话题的小小提示。WP 3.9的下一版本将TinyMCE 4.0*包含在一个新的API中，而Tuts教程并不是在本主题中寻找解决方案的最佳资源。请参阅以下两个链接，并使用WP 3.9-beta检查您当前的开发情况。

Trac Ticket 24067
Migration guide from 3.x
TinyMCE Fiddle
TinyMCE API 4.0
Default TinyMCE Plugins in WP Core
TinyMCE Fonts, include in Core, use default Buttons

源示例，3.0对4.0

  tinyMCE.onAddEditor.add(function(mgr, ed) {
    var editor = $(\'#\' + ed.editorId + \'.atjs\');
    if (editor.length == 1) {
      ed.onInit.add(function(ed, l) {
        $(ed.contentDocument.activeElement).atwho({settings go here});
      });
    }
  });

tinymce.init({
  selector: "#mce",
  init_instance_callback: function(editor) {
    $(editor.contentDocument.activeElement).atwho(at_config);
  }
});

SO网友:Nabil Kadimi

一个简单的解决方案是像这样使用Base64编码的SVG图像

ed.addButton(\'dropcap\', {
    ...
    \'image\'      => \'data:image/svg+xml;base64,{{BASE64}}\',
    ...
}

在哪里{{BASE}} 是使用Base64编码的SVG图像。

我使用这些预安装的Linux命令从Github下载SVG，并对其进行编码（以twitter图标为例）：

#!/usr/bin/env bash
icon=twitter
svg64=$(wget -O- -nv https://raw.githubusercontent.com/WordPress/dashicons/master/svg/$icon.svg | base64 -w 0) > /dev/null 2>&1 
echo $svg64

输出：

PD94bWwgdmVyc2lvb[...]Cg==

结束

小码农CODE

如何将新的仪表盘图标用于定制TinyMCE按钮？

助手

源示例，3.0对4.0

相关推荐

TinyMCE：将按钮从第二行移动到顶行