Usando o editor TinyMCE no WordPress [Guia]

Embora eles não saibam o seu nome, todos que usam o WordPress estão familiarizados com o Editor TinyMCE. É o editor que você usa quando cria ou edita seu conteúdo - aquele com os botões para criar texto em negrito, títulos, alinhamento de texto e assim por diante. Isso é o que vamos dar uma olhada neste post, e eu vou te mostrar como você pode adicionar funcionalidade e como você pode usá-lo em seus plugins.

O editor é construído em um sistema Javascript independente de plataforma chamado TinyMCE que é usado em vários projetos na Web. Tem uma ótima API que o WordPress permite que você toque para criar seus próprios botões e adicioná-lo a outros locais dentro do WordPress.

Adicionando Botões Disponíveis

O WordPress usa algumas opções disponíveis no TinyMCE para desabilitar determinados botões - como regras sobrescritas, subscritas e horizontais - para limpar a interface. Eles podem ser adicionados de volta sem muito barulho.

O primeiro passo é criar um plugin. Dê uma olhada no codex do WordPress sobre como fazer isso. Resumindo, você pode criar uma pasta chamada 'my-mce-plugin' na pasta wp-content / plugins. Crie um arquivo com o mesmo nome, com uma extensão PHP: my-mce-plugin.php.

Dentro desse arquivo, cole o seguinte:

  
Uma vez feito isso, você deve ser capaz de selecionar este plugin no WordPress e ativá-lo. Todo o código a partir de agora pode ser colado dentro deste arquivo.
 
Então, de volta para habilitando alguns botões internos, mas ocultos. Aqui está o código que nos permite ativar os 3 botões que mencionei:
 
 add_filter ('mce_buttons_2', 'my_tinymce_buttons'); function my_tinymce_buttons ($ buttons) $ buttons [] = 'sobrescrito'; $ buttons [] = 'subscrito'; $ botões [] = hr; return $ botões;  
 
 
 
Para saber quais botões podem ser adicionados e como são chamados, dê uma olhada na lista encontrada na documentação do TinyMCE para controles.
 
Criando nossos próprios botões
 
Que tal criar nossos próprios botões do zero? Muitos sites usam Prism para realce de código, que usa uma abordagem muito semântica para marcar segmentos de código. Você tem que embrulhar seu código dentro  e 
 tags, algo assim:
 
$ variable = 'value'
 
Vamos criar um botão que faça isso por nós!
 
Este é um processo de três etapas. Você precisará adicionar um botão, carregar um arquivo javascript e realmente escrever o conteúdo do arquivo Javascript. Vamos começar!
 
Adicionando o botão e carregando o arquivo Javascript é bastante simples, aqui está o código que eu usei para fazê-lo:
 
 add_filter ('mce_buttons', 'pre_code_add_button'); função pre_code_add_button ($ buttons) $ buttons [] = 'pre_code_button'; return $ botões;  add_filter ('mce_external_plugins', 'pre_code_add_javascript'); função pre_code_add_javascript ($ plugin_array) $ plugin_array ['pre_code_button'] = get_template_directory_uri (). '/tinymce-plugin.js'; return $ plugin_array;  
 
Quando eu vejo tutoriais sobre isso eu freqüentemente vejo 2 problemas.
 
Eles negligenciam mencionar que o nome do botão adicionado na função pre_code_add_button () deve ser o mesmo que a chave para a variável $ plugin_array na função pre_code_add_javascript (). Nós também precisaremos use a mesma string em nosso Javascript mais tarde.
 
Alguns tutoriais também use um gancho admin_head adicional para embrulhar tudo. Embora isso funcione, isso não é necessário e, como o Codex não o utiliza, provavelmente deve ser evitado.
 
O próximo passo é escrever um pouco de Javascript para implementar nossa funcionalidade. Aqui está o que eu usei para obter o 
 e  tags saem todas de uma vez.
 
 (function () tinymce.PluginManager.add ('pre_code_button', função (editor, url) editor.addButton ('pre_code_button', texto: 'Prism', ícone: false, onclick: function () var selecionado = tinyMCE.activeEditor.selection.getContent (); var content = '
'+ selecionado +'
'; editor.insertContent (content + "\ n"); ); ); ) (); 
 
A maior parte disso é ditada pela forma como um plugin TinyMCE deve ser codificado, você pode encontrar algumas informações sobre isso na documentação do TinyMCE. Por enquanto, tudo que você precisa saber é que o nome do seu botão (pre_code_button) deve ser usado nas linhas 2 e 3. O valor de "texto" na linha 4 será exibido se você não usar um ícone (vamos dar uma olhada na adição de ícones em um momento).
 
O método onclick determina o que esse botão faz quando é clicado. Eu quero usá-lo para embrulhar o texto selecionado dentro da estrutura HTML discutida anteriormente.
 
O texto selecionado pode ser obtido usando tinyMCE.activeEditor.selection.getContent (). Em seguida, envolvo os elementos ao redor e insiro-o, substituindo o conteúdo realçado pelo novo elemento. Eu também adicionei uma nova linha para que eu possa facilmente começar a escrever depois do elemento de código.
 
Se você quiser usar um ícone, sugiro selecionar um do conjunto Dashicons que vem com o WordPress. A Developer Reference tem uma ótima ferramenta para encontrar ícones e seu CSS / HTML / Glyph. Encontre o símbolo do código e observe o unicode abaixo dele: f475.
 
Nós precisaremos anexar uma folha de estilo ao nosso plugin e então adicionar um estilo simples para exibir nosso ícone. Primeiro, vamos adicionar nosso estilo ao WordPress:
 
 add_action ('admin_enqueue_scripts', 'pre_code_styles'); função pre_code_styles () wp_enqueue_style ('pre_code_button', plugins_url ('/style.css', __FILE__));  
 
Volte para o Javascript e ao lado do ícone na função addButton, substitua “falso” com uma aula que você gostaria que o seu botão tivesse - eu usei pre_code_button.
 
Agora crie o arquivo style.css no diretório do seu plugin e adicione o seguinte CSS:
 
 i.mce-i-pre_code_button: before font-family: dashicons; conteúdo: "\ f475";  
 
 
 
Note que o botão receberá o mce-i- [sua aula aqui] classe que você pode usar para segmentar e adicionar estilos. Especifique a fonte como doshicons e o conteúdo usando o valor unicode de anterior.
 
Usando o TinyMCE em outro lugar
 
Os plug-ins geralmente criam textareas para inserir texto mais longo, Não seria ótimo se pudéssemos usar o TinyMCE lá também? Claro que podemos, e é bem fácil. A função wp_editor () nos permite produzir um em qualquer lugar no admin, veja como fica:
 
wp_editor ($ initial_content, $ element_id, $ settings);
 
O primeiro parâmetro define o conteúdo inicial da caixa. Isso pode ser usado para carregar uma opção do banco de dados, por exemplo. O segundo parâmetro define o ID do elemento HTML. O terceiro parâmetro é uma matriz de configurações. Para ler sobre as configurações exatas que você pode usar, dê uma olhada na documentação do editor wp.
 
O cenário mais importante é o textarea_name. Isso preenche o atributo name do elemento textarea, permitindo que você salve os dados facilmente. Veja como meu editor parece quando usado em uma página de opções:
 
$ settings = array ('textarea_name' => 'buyer_bio');
 
wp_editor (get_option ('buyer_bio'), 'buyer_bio', $ settings);
 
Isso equivale a escrever o código a seguir, o que resultaria em uma área de texto simples:
 
<?php get_option( 'buyer_bio' ) ?>
 
Conclusão
 
O editor TinyMCE é uma maneira amigável de permitir aos usuários mais flexibilidade ao inserir conteúdo. Ele permite que aqueles que não querem formatar o seu conteúdo apenas digitem e terminem com ele, e aqueles que querem mexer com ele para gastar tanto tempo quanto eles precisarem..
 
Criar novos botões e funcionalidades pode ser feito de uma maneira muito modular, e nós apenas arranhamos a superfície das possibilidades. Se você conhece um plugin ou um caso de uso TinyMCE particularmente bom que tenha lhe ajudado muito, deixe-nos saber nos comentários abaixo!