Uma das minhas atualizações favoritas no WordPress 3.9 foi tornar o núcleo TinyMCE versão 4.0. O novo TinyMCE parece mais limpo (realmente combina com o painel do WP) e tem algumas funcionalidades adicionadas muito boas. Muitos dos meus temas e plugins antigos tiveram que ser atualizados para funcionar com o novo TinyMCE, então passei algum tempo vasculhando a API e descobrindo algumas coisas legais. Abaixo, darei alguns exemplos de como você pode estender a funcionalidade do TinyMCE. Não vou orientá-lo em todas as etapas ou o que o código significa exatamente (isso é destinado a desenvolvedores), mas fornecerei o código exato que você pode copiar/colar em seu tema ou plugin e depois ajustar de acordo.
Adicionando tamanho da fonte e seleções de família de fontes
Por padrão, as fontes personalizadas e os tamanhos das fontes não são adicionados ao editor TinyMCE. A função abaixo adicionará esses dois menus suspensos à extrema esquerda do editor na segunda linha. Simplesmente mude onde diz ‘mce_buttons_2’ se você quiser em uma linha diferente (ex: use ‘mce_buttons_3’ para a 3ª linha).
// Enable font size & font family selects in the editor
if ( ! function_exists( ‘wpex_mce_buttons’ ) ) {
function wpex_mce_buttons( $buttons ) {
array_unshift( $buttons, ‘fontselect’ ); // Add Font Select
array_unshift( $buttons, ‘fontsizeselect’ ); // Add Font Size Select
return $buttons;
}
}
add_filter( ‘mce_buttons_2’, ‘wpex_mce_buttons’ );
Adicionando tamanhos de fonte personalizados
Por padrão, os tamanhos das fontes são definidos para valores pt, o que nem sempre é o ideal. Eu prefiro usar valores de pixel (12px, 13px, 14px, 16px..etc) e fornecer mais opções para maior flexibilidade. A função abaixo irá alterar as opções de tamanho de fonte padrão no seletor suspenso.
// Customize mce editor font sizes
if ( ! function_exists( ‘wpex_mce_text_sizes’ ) ) {
function wpex_mce_text_sizes( $initArray ){
$initArray[‘fontsize_formats’] = “9px 10px 12px 13px 14px 16px 18px 21px 24px 28px 32px 36px”;
return $initArray;
}
}
add_filter( ‘tiny_mce_before_init’, ‘wpex_mce_text_sizes’ );
Adicionando fontes personalizadas
As opções de fonte padrão no seletor de família de fontes são todas fontes “seguras para a Web” por padrão, mas e se você quiser adicionar mais fontes ao seletor? Talvez algumas fontes do Google? Vamos ver que é muito fácil dar uma olhada no exemplo abaixo.
// Add custom Fonts to the Fonts list
if ( ! function_exists( ‘wpex_mce_google_fonts_array’ ) ) {
function wpex_mce_google_fonts_array( $initArray ) {
$initArray[‘font_formats’] = ‘Lato=Lato;Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats’;
return $initArray;
}
}
add_filter( ‘tiny_mce_before_init’, ‘wpex_mce_google_fonts_array’ );
Observe como eu adicionei “Lato” à lista no código acima? É simples assim! No meu tema Total WordPress, eu realmente percorro qualquer fonte personalizada usada no site, conforme definido no painel do tema, e as adiciono à caixa de seleção para que também estejam disponíveis durante a edição de suas postagens / páginas (sweet). Mas o código APENAS adiciona a família de fontes ao menu suspenso, ele não carregará magicamente o script para que, quando você alterar seu texto no editor, possa realmente ver a fonte personalizada aplicada a ele… É isso que o código abaixo faz!
// Add Google Scripts for use with the editor
if ( ! function_exists( ‘wpex_mce_google_fonts_styles’ ) ) {
function wpex_mce_google_fonts_styles() {
$font_url = ‘http://fonts.googleapis.com/css?family=Lato:300,400,700’;
add_editor_style( str_replace( ‘,’, ‘%2C’, $font_url ) );
}
}
add_action( ‘init’, ‘wpex_mce_google_fonts_styles’ );
Ative o menu suspenso Formatos (estilos) e adicione novos estilos
Lembre-se do menu suspenso “Estilos” no WP 3.8? Isso foi muito legal! Você pode usá-lo para adicionar algumas classes legais para serem usadas no editor de postagem (eu uso no WPExplorer na verdade para botões, extensões coloridas, caixas etc.). No WP 3.9, você ainda pode adicionar estilos, no entanto, ele foi renomeado no novo TinyMCE 4.0 para “Formats” para funcionar um pouco diferente. Abaixo está um exemplo de como habilitar o menu suspenso Formatos e também adicionar alguns novos itens a ele.
Ative o menu suspenso Formatos
Na verdade, isso é feito da mesma maneira antes do WP 3.9, mas estou compartilhando caso você não saiba como fazê-lo.
// Add Formats Dropdown Menu To MCE
if ( ! function_exists( ‘wpex_style_select’ ) ) {
function wpex_style_select( $buttons ) {
array_push( $buttons, ‘styleselect’ );
return $buttons;
}
}
add_filter( ‘mce_buttons’, ‘wpex_style_select’ );
Adicionar novos itens aos formatos
Adicionar novos itens é super fácil. Observe como eu adicionei “$settings[‘style_formats_merge’] = true;” ao código abaixo, isso garante que suas edições sejam adicionadas ao menu suspenso de formatos junto com quaisquer outros – não sobrescreva a coisa toda (talvez outros plugins também queiram usá-lo).
// Add new styles to the TinyMCE “formats” menu dropdown
if ( ! function_exists( ‘wpex_styles_dropdown’ ) ) {
function wpex_styles_dropdown( $settings ) {
// Create array of new styles
$new_styles = array(
array(
‘title’ => __( ‘Custom Styles’, ‘wpex’ ),
‘items’ => array(
array(
‘title’ => __(‘Theme Button’,’wpex’),
‘selector’ => ‘a’,
‘classes’ => ‘theme-button’
),
array(
‘title’ => __(‘Highlight’,’wpex’),
‘inline’ => ‘span’,
‘classes’ => ‘text-highlight’,
),
),
),
);
// Merge old & new styles
$settings[‘style_formats_merge’] = true;
// Add new styles
$settings[‘style_formats’] = json_encode( $new_styles );
// Return New Settings
return $settings;
}
}
add_filter( ‘tiny_mce_before_init’, ‘wpex_styles_dropdown’ );
Adicionando um botão MCE simples
Adicionar um novo botão ao editor TinyMCE é especialmente útil para códigos de acesso, porque como usuário você não precisa se lembrar de nenhum código de acesso, basta clicar em um botão e inseri-lo. Eu não estou dizendo para adicionar centenas de botões ao TinyMCE para todos os seus códigos de acesso (eu odeio quando os desenvolvedores fazem isso, é uma prática tão ruim e parece horrível), mas se você adicionar 1 ou alguns, eu deixo passar Se você deseja adicionar um monte, então você deve criar um submenu conforme explicado na seção a seguir.
Código PHP – Declare o novo plugin MCE no WP
Este código irá declarar seu novo plug-in MCE, certifique-se de alterar a localização do arquivo javascript “mce-button.js” para corresponder à localização do seu arquivo (para o qual também fornecerei o código na próxima subseção) como obviamente renomeie o prefixo “meu” para algo mais exclusivo!
// Hooks your functions into the correct filters
function my_add_mce_button() {
// check user permissions
if ( !current_user_can( ‘edit_posts’ ) && !current_user_can( ‘edit_pages’ ) ) {
return;
}
// check if WYSIWYG is enabled
if ( ‘true’ == get_user_option( ‘rich_editing’ ) ) {
add_filter( ‘mce_external_plugins’, ‘my_add_tinymce_plugin’ );
add_filter( ‘mce_buttons’, ‘my_register_mce_button’ );
}
}
add_action(‘admin_head’, ‘my_add_mce_button’);
// Declare script for new button
function my_add_tinymce_plugin( $plugin_array ) {
$plugin_array[‘my_mce_button’] = get_template_directory_uri() .’/js/mce-button.js’;
return $plugin_array;
}
// Register new button in the editor
function my_register_mce_button( $buttons ) {
array_push( $buttons, ‘my_mce_button’ );
return $buttons;
}
Código JS – Adicione o botão ao MCE
Este código js vai no arquivo js registrado no trecho acima na função “symple_shortcodes_add_tinymce_plugin”. Isso deve adicionar um novo botão de texto que diz “Novo botão” em seu editor e, quando clicado, inserirá o texto “WPExplorer.com é incrível!” (claro).
(function() {
tinymce.PluginManager.add(‘my_mce_button’, function( editor, url ) {
editor.addButton(‘my_mce_button’, {
text: ‘New Button’,
icon: false,
onclick: function() {
editor.insertContent(‘WPExplorer.com is awesome!’);
}
});
});
})();
Adicionar um ícone personalizado ao seu novo botão MCE
Acima eu mostrei a você como adicionar um novo botão que será exibido como “New Button” no editor, isso é um pouco chato…Então o código alterado mostrará como adicionar seu próprio ícone personalizado.
Carregar uma folha de estilo com seu CSS
Use esta função para carregar uma nova folha de estilo para uso em seu painel de administração – alguns plugins/temas podem já estar adicionando uma folha de estilo, então se o seu tema/plugin estiver fazendo isso, pule isso e apenas adicione seu CSS personalizado e ajuste o js (mostrado abaixo) .
function my_shortcodes_mce_css() {
wp_enqueue_style(‘symple_shortcodes-tc’, plugins_url(‘/css/my-mce-style.css’, __FILE__) );
}
add_action( ‘admin_enqueue_scripts’, ‘my_shortcodes_mce_css’ );
Seu CSS personalizado
Este é o CSS para adicionar a folha de estilo carregada anteriormente.
i.my-mce-icon {
background-image: url(‘YOUR ICON URL’);
}
Ajuste seu Javascript
Agora basta ajustar o javascript que você adicionou anteriormente para remover o parâmetro de texto e, em vez de definir o ícone como falso, dê a ele um nome de classe personalizado.
(function() {
tinymce.PluginManager.add(‘my_mce_button’, function( editor, url ) {
editor.addButton( ‘my_mce_button’, {
icon: ‘my-mce-icon’,
onclick: function() {
editor.insertContent(‘WPExplorer.com is awesome!’);
}
});
});
})();
Adicionando um botão com submenu
Anteriormente, mencionei que adicionar uma tonelada de novos ícones à barra do TinyMCE é uma má ideia (e é), então confira o código abaixo para ver como você pode editar o javascript para exibir um submenu para seu botão personalizado. Se você quiser vê-lo em ação, confira meu vídeo de códigos de acesso simples .
(function() {
tinymce.PluginManager.add(‘my_mce_button’, function( editor, url ) {
editor.addButton( ‘my_mce_button’, {
text: ‘Sample Dropdown’,
icon: false,
type: ‘menubutton’,
menu: [
{
text: ‘Item 1’,
menu: [
{
text: ‘Sub Item 1’,
onclick: function() {
editor.insertContent(‘WPExplorer.com is awesome!’);
}
},
{
text: ‘Sub Item 2’,
onclick: function() {
editor.insertContent(‘WPExplorer.com is awesome!’);
}
}
]
},
{
text: ‘Item 2’,
menu: [
{
text: ‘Sub Item 1’,
onclick: function() {
editor.insertContent(‘WPExplorer.com is awesome!’);
}
},
{
text: ‘Sub Item 2’,
onclick: function() {
editor.insertContent(‘WPExplorer.com is awesome!’);
}
}
]
}
]
});
});
})();
Adicionando uma janela pop-up ao seu botão ao clicar
No exemplo acima, você pode notar que cada botão simplesmente insere o texto “WPExplorer.com é incrível!” o que é legal, mas que tal criar uma janela pop-up onde o usuário possa alterar o que está sendo inserido no texto? Agora isso seria doce! E é algo que adicionei à versão 1.6 do meu Symple Shortcodes, tornando o plugin muito mais fácil de usar.
(function() {
tinymce.PluginManager.add(‘my_mce_button’, function( editor, url ) {
editor.addButton( ‘my_mce_button’, {
text: ‘Sample Dropdown’,
icon: false,
type: ‘menubutton’,
menu: [
{
text: ‘Item 1’,
menu: [
{
text: ‘Pop-Up’,
onclick: function() {
editor.windowManager.open( {
title: ‘Insert Random Shortcode’,
body: [
{
type: ‘textbox’,
name: ‘textboxName’,
label: ‘Text Box’,
value: ’30’
},
{
type: ‘textbox’,
name: ‘multilineName’,
label: ‘Multiline Text Box’,
value: ‘You can say a lot of stuff in here’,
multiline: true,
minWidth: 300,
minHeight: 100
},
{
type: ‘listbox’,
name: ‘listboxName’,
label: ‘List Box’,
‘values’: [
{text: ‘Option 1’, value: ‘1’},
{text: ‘Option 2’, value: ‘2’},
{text: ‘Option 3’, value: ‘3’}
]
}
],
onsubmit: function( e ) {
editor.insertContent( ‘[random_shortcode textbox=”‘ + e.data.textboxName + ‘” multiline=”‘ + e.data.multilineName + ‘” listbox=”‘ + e.data.listboxName + ‘”]’);
}
});
}
}
]
}
]
});
});
})();
Isso é legal… e agora?
Boa pergunta! Agora é hora de você fazer esses ajustes incríveis e criar algo épico ou atualizar seus plugins/temas para serem compatíveis com o novo TinyMCE no WordPress 3.9. Deixe-me saber o que você achou nos comentários abaixo!