WordPress 3.9+ TinyMCE 4 Tweaks: Adicionando estilos, botões, fontes, menus suspensos e pop-ups

Uma das minhas atualizações favoritas no WordPress 3.9 foi criar o núcleo da versão 4.0 do TinyMCE. O novo TinyMCE parece mais limpo (realmente combina com o painel do WP) e possui algumas funcionalidades adicionadas muito boas. Muitos dos meus temas e plugins antigos precisavam ser atualizados para funcionar com o novo TinyMCE, então passei algum tempo pesquisando a API e descobrir 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 aos desenvolvedores), mas fornecerá o código exato que você pode copiar / colar no seu tema ou plug-in e depois ajustá-lo de acordo.


Adicionando tamanho da fonte e família de fontes seleciona

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 à esquerda do editor na segunda linha. Simplesmente altere o local onde está escrito ‘mce_buttons_2’ se desejar em uma linha diferente (por exemplo: use ‘mce_buttons_3’ para a terceira linha).

// Ativar tamanho da fonte e família de fontes selecionada no editor
if (! function_exists ('wpex_mce_buttons')) {
função wpex_mce_buttons (botões $) {
array_unshift (botões $, 'seleção de fontes'); // Adicionar seleção de fonte
array_unshift (botões $, 'fontsizeselect'); // Adicionar tamanho da fonte Selecionar
retornar botões $;
}
}
add_filter ('mce_buttons_2', 'wpex_mce_buttons');

Adicionando tamanhos de fonte personalizados

Por padrão, os tamanhos das fontes são definidos como valores pt, o que nem sempre é ideal. Prefiro usar valores de pixel (12px, 13px, 14px, 16px..etc) e fornecer mais opções para maior flexibilidade. A função abaixo alterará as opções padrão de tamanho da fonte no seletor suspenso.

// Personalizar tamanhos de fonte do editor de mce
if (! function_exists ('wpex_mce_text_sizes')) {
função 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? É muito fácil dar uma olhada no exemplo abaixo.

// Adicionar fontes personalizadas à lista de fontes
if (! function_exists ('wpex_mce_google_fonts_array')) {
função wpex_mce_google_fonts_array ($ initArray) {
$ initArray ['font_formats'] = 'Lato = Lato; Andale Mono = andale mono, vezes; Arial = arial, helvetica, sans-serif; Arial Black = arial preto, vanguarda; Book Antiqua = livro antiqua, palatino; Comic Sans MS = comic sans ms, sans-serif; Courier New = courier new, courier; Georgia = geórgia, palatino; Helvética = helvética; Impacto = impacto, chicago; Símbolo = símbolo; Tahoma = tahoma, arial, helvetica, sans-serif; Terminal = terminal, monaco; Times New Roman = times new roman, times; Trebuchet MS = trebuchet ms, genebra; Verdana = verdana, genebra; 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, na verdade, percorro todas as fontes personalizadas usadas no site, conforme definidas no painel de temas, e as adiciono à caixa de seleção para que elas também estejam disponíveis durante a edição de suas postagens / páginas (doce). Mas o código APENAS anuncia a família de fontes no menu suspenso e não carrega magicamente o script. Assim, quando você altera o texto no editor, pode realmente ver a fonte personalizada aplicada a ele … É o que o código abaixo faz!

// Adicione scripts do Google para uso com o editor
if (! function_exists ('wpex_mce_google_fonts_styles')) {
função 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');

Ativar o menu suspenso Formatos (estilos) e Adicionar novos estilos

Lembra da lista suspensa “Estilos” no WP 3.8? Isso foi muito legal! Você pode usá-lo para adicionar algumas classes interessantes a serem usadas no editor de postagem (eu o uso no WPExplorer, na verdade, para botões, vãos coloridos, caixas … etc). No WP 3.9, você ainda pode adicionar estilos; no entanto, ele foi renomeado no novo TinyMCE 4.0 para “Formatos”, para que funcione um pouco diferente. Abaixo está um exemplo de como ativar o menu suspenso Formatos e também adicionar novos itens a ele.

Menu suspenso Formatos WordPress TInyMCE

Ativar o menu suspenso Formatos

Na verdade, isso é feito da mesma maneira antes do WP 3.9, mas estou compartilhando, caso você não sabia como fazê-lo.

// Menu suspenso Adicionar formatos ao MCE
if (! function_exists ('wpex_style_select')) {
função wpex_style_select (botões $) {
array_push (botões $, 'seleção de estilos');
retornar botões $;
}
}
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;” para o código abaixo, isso garante que suas edições sejam adicionadas ao menu suspenso de formatos, além de outras – não substitua a coisa toda (talvez outros plug-ins também façam uso dela).

// Adicione novos estilos ao menu suspenso "formatos" do TinyMCE
if (! function_exists ('wpex_styles_dropdown')) {
função wpex_styles_dropdown ($ settings) {

// Crie uma matriz de novos estilos
$ new_styles = array (
matriz (
'title' => __ ('Estilos personalizados', 'wpex'),
'items' => array (
matriz (
'title' => __ ('Botão do tema', 'wpex'),
'seletor' => 'a',
'classes' => 'botão do tema'
),
matriz (
'title' => __ ('Destaque', 'wpex'),
'inline' => 'extensão',
'classes' => 'destaque do texto',
),
),
),
);

// Mesclar estilos antigos e novos
$ settings ['style_formats_merge'] = verdadeiro;

// Adicionar novos estilos
$ settings ['style_formats'] = json_encode ($ new_styles);

// Retornar novas configurações
retornar $ configurações;

}
}
add_filter ('tiny_mce_before_init', 'wpex_styles_dropdown');

Adicionando um botão simples do MCE

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 ele será inserido. 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 muito ruim e parece horrível), mas se você adicionar 1 ou alguns, deixarei passar. deseja adicionar um monte, você deve criar um submenu como explicado na seção a seguir.

Botão Novo do WordPress MCE

Código PHP – Declare o novo plugin MCE no WP

Este código declarará que o seu novo plug-in MCE não altera a localização do arquivo javascript “mce-button.js” para corresponder à localização do seu arquivo (para o qual fornecerei o código também na próxima subseção) como, obviamente, renomeie o prefixo “my” para algo mais exclusivo!

// Conecta suas funções aos filtros corretos
função my_add_mce_button () {
// verifique as permissões do usuário
if (! current_user_can ('edit_posts') &&! current_user_can ('edit_pages')) {
Retorna;
}
// verifique se o WYSIWYG está ativado
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');

// Declarar script para o novo botão
função my_add_tinymce_plugin ($ plugin_array) {
$ plugin_array ['my_mce_button'] = get_template_directory_uri (). '/ js / mce-button.js';
retornar $ plugin_array;
}

// Registrar novo botão no editor
função my_register_mce_button (botões $) {
array_push (botões $, 'my_mce_button');
retornar botões $;
}

Código JS – Adicione o botão ao MCE

Esse código js entra no arquivo js registrado no snippet acima na função “symple_shortcodes_add_tinymce_plugin”. Isso deve adicionar um novo botão de texto que diz “Novo botão” ao seu editor e, quando clicado, ele inserirá o texto “WPExplorer.com is awesome!” (claro).

(function () {
tinymce.PluginManager.add ('my_mce_button', função (editor, url) {
editor.addButton ('my_mce_button', {
texto: 'Novo botão',
ícone: false,
onclick: function () {
editor.insertContent ('WPExplorer.com é incrível!');
}
});
});
}) ();

Adicione um ícone personalizado ao seu novo botão MCE

Acima, mostrei como adicionar um novo botão que será exibido como “Novo botão” no editor, isso é um pouco manco … Portanto, o código alterado mostrará como adicionar seu próprio ícone personalizado.

Carregue 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 já podem estar adicionando uma folha de estilo. Se seu tema / plugin estiver fazendo isso, pule isso e adicione seu CSS personalizado e ajuste os js (mostrado abaixo).

função 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.

ícone i.my-mce {
background-image: url ('URL DO SEU ÍCONE');
}

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 false, dê um nome de classe personalizado.

(function () {
tinymce.PluginManager.add ('my_mce_button', função (editor, url) {
editor.addButton ('my_mce_button', {
ícone: 'my-mce-icon',
onclick: function () {
editor.insertContent ('WPExplorer.com é incrível!');
}
});
});
}) ();

Adicionando um botão ao submenu

Submenu Botão MCE

Mencionei anteriormente que adicionar uma tonelada de novos ícones à barra do TinyMCE é uma má ideia (e é); portanto, verifique o código abaixo para ver como você pode editar o javascript para exibir um submenu para o 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', função (editor, url) {
editor.addButton ('my_mce_button', {
texto: 'Exemplo de lista suspensa',
ícone: false,
tipo: 'menubutton',
cardápio: [
{
texto: "Item 1",
cardápio: [
{
texto: "Subitem 1",
onclick: function () {
editor.insertContent ('WPExplorer.com é incrível!');
}
},
{
texto: "Subitem 2",
onclick: function () {
editor.insertContent ('WPExplorer.com é incrível!');
}
}
]
},
{
texto: "Item 2",
cardápio: [
{
texto: "Subitem 1",
onclick: function () {
editor.insertContent ('WPExplorer.com é incrível!');
}
},
{
texto: "Subitem 2",
onclick: function () {
editor.insertContent ('WPExplorer.com é incrível!');
}
}
]
}
]
});
});
}) ();

Adicionando uma janela pop-up ao seu botão ao clicar

No exemplo acima, você pode perceber que cada botão simplesmente insere o texto “WPExplorer.com is awesome!” o que é legal, mas que tal criar uma janela pop-up em que um usuário possa alterar o que está sendo inserido no texto? Agora isso seria doce! E é algo que eu adicionei à versão 1.6 dos meus códigos de acesso simples, tornando o plug-in muito mais fácil de usar.

Janela pop-up do WordPress MCE

(function () {
tinymce.PluginManager.add ('my_mce_button', função (editor, url) {
editor.addButton ('my_mce_button', {
texto: 'Exemplo de lista suspensa',
ícone: false,
tipo: 'menubutton',
cardápio: [
{
texto: "Item 1",
cardápio: [
{
texto: 'Pop-Up',
onclick: function () {
editor.windowManager.open ({
title: 'Inserir código curto aleatório',
corpo: [
{
tipo: 'caixa de texto',
nome: 'textboxName',
label: 'Caixa de texto',
valor: '30'
},
{
tipo: 'caixa de texto',
nome: 'multilineName',
label: 'Caixa de texto multilinha',
value: 'Você pode dizer muitas coisas aqui',
multiline: true,
minWidth: 300,
minHeight: 100
},
{
tipo: 'caixa de listagem',
nome: 'listboxName',
label: 'Caixa de listagem',
'values': [
{texto: 'Opção 1', valor: '1'},
{texto: 'Opção 2', valor: '2'},
{texto: 'Opção 3', valor: '3'}
]
}
],
onsubmit: função (e) {
editor.insertContent ('[random_shortcode textbox = "' + e.data.textboxName + '" multiline = "' + e.data.multilineName + '" listbox = "' + e.data.listboxName + '"]');
}
});
}
}
]
}
]
});
});
}) ();

Isso é legal … Agora o que?

Boa pergunta! Agora é hora de você fazer esses ajustes impressionantes e criar algo épico ou atualizar seus plugins / temas para ser compatível com o novo TinyMCE no WordPress 3.9. Deixe-me saber o que você criar nos comentários abaixo!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map