Como usar o novo Dashicons para botões TinyMCE personalizados?

Estive seguindo um tutorial sobre o Tuts + (vinculado do WordPress Codex) sobre como interagir com o editor do TinyMCE para adicionar botões. Seguindo o código de exemplo nesse artigo, eu tenho um arquivo JS que adiciona os botões ao TinyMCE. O relevante snip de JS que adiciona o ícone é:

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

Agora, isso era bom, antes do WP 3.8, no entanto, uma vez que os Dashicons foram apresentados, parece desatualizado usar PNG estático para botões TinyMCE … Desde a 3.8, eu atualizei meus tipos de postagem personalizados para usar os Dashicons, mas estava me perguntando qual é a maneira correta de obter Botões TinyMCE usando Dashicons também? Há um guia útil de James Coster sobre como usar os Dashicons que podem ser relevantes (embora eu suponha que não há necessidade de fazer chamadas para enqueue os scripts Dashicons, já que eles já estarão carregados no back-end).

Solutions Collecting From Web of "Como usar o novo Dashicons para botões TinyMCE personalizados?"

Adicionar Dashicon

Todos os botões dentro do TinyMCE possuem uma class, também seu botão personalizado. Inclua (use wp_enqueue_style() uma folha de estilo com estilo com Dashicons, como o exemplo a seguir.

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

No padrão, o Dashicon está ativo em cada página de edição, mas adicione o dashicon à folha de estilos dependente e também foi incluída.

Ajudante

Veja este plugin para encontrar a fonte correta, como tos e exemplos para include dentro do WordPress back end.

TinyMCE e WordPress 3.9

Pequena sugestão do meu lado para desenvolver sobre este tópico. O próximo lançamento do WP 3.9 tem o TinyMCE 4.0 * incluído com uma nova API eo Tutsial Tuts não é o melhor recurso para encontrar soluções neste tópico. Veja os dois links a seguir e verifique o desenvolvimento atual com o WP 3.9-beta.

  • Ticket Tracator 24067
  • Guia de migration de 3.x
  • TinyMCE Fiddle
  • TinyMCE API 4.0
  • Plugins TinyMCE padrão no WP Core
  • Fontes TinyMCE, inclua no núcleo, use botões padrão

Exemplos de fonts, 3.0 versus 4.0

TinyMCE 3

  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 4

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

Para desenhar os icons usando os arquivos CSS do Dashicons que já estão carregados no painel do WP, é necessário adicionar algum CSS extra. No último beta do WordPress (3.9), o TinyMCE 4.0 é usado, por isso não tenho certeza de que isso funcionará em versões anteriores (no entanto, uma versão modificada pode ser adequada, ajustando as diferentes classs produzidas pelos botões TinyMCE anteriores). No WP 3.9 (e TinyMCE 4.0), os icons no editor são emitidos, por exemplo,

 

Existem 2 etapas, primeiro adicione uma function para enqueue uma folha de estilo personalizada no administrador do WP (que será usado para modelar os novos botões).

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

Então, em segundo lugar, seguindo o guia do James Koster sobre o uso de Dashicons, um simples seletor css de :before pode aplicar a sua class CSS de icons. No caso do exemplo na pergunta original, a class CSS seria mce-i-dropcap

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

Embora certifique-se também de remover a chamada para adicionar uma imagem na function JS ed.addButton original e o ícone da fonte será usado em vez disso

Observe que a function admin_enqueue_scripts será chamada em todas as páginas de administração, portanto, se a sua folha de estilo personalizada for grande, poderá diminuir os tempos de carregamento (embora não seja provável que uma folha de estilo minified com apenas definições de icons tenha um grande impacto nos tempos de carregamento).

Uma solução fácil é usar a imagem SVG codificada Base64 como essa

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

Onde {{BASE}} é a imagem SVG codificada com Base64.

Eu uso esses comandos Linux pré-instalados para baixar o SVG do Github abd codificá-lo (usando o ícone do twitter como exemplo):

 #!/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 

Saída:

 PD94bWwgdmVyc2lvb[...]Cg==