Usando WP-Syntax com o Editor Visual

Todo mundo que utiliza o WordPress.org para pôr seu blog no ar conhece o seu famoso Editor Visual. Também conhecido como editor WYSIWYG (What You See Is What You Get), esse editor tem a responsabilidade de fornecer meios práticos para que o usuário escreva seu artigo ou página, definindo e visualizando sua formatação (essa é a parte do What You See), sem que seja necessário saber como funciona o HTML por trás disso. Além disso, esse Editor deve garantir que a aparência (formatação) do texto, quando o mesmo for publicado, seja a mesma de quando o usuário o escreveu (essa é a parte do Is What You Get).

O exemplo mais claro disso é o Microsoft Word. Nele o usuário é capaz de editar documentos visualizando-os na tela da mesma forma em que eles ficarão quando forem impressos.

Quem faz essa proeza acontecer no WordPress.org é o TinyMCE, um editor WYSIWYG escrito em JavaScript, que já vem embutido com o nosso gerenciador de blogs. Além de fazer todo esse trabalho de Editor Visual, o TinyMCE também verifica o código HTML, procurando por eventuais erros (que a gente possa ter inserido quando editou diretamente o código), deixando tudo dentro dos padrões, como era de se esperar.

Mas é aí que está o problema: muitas vezes queremos adicionar algumas funcionalidades como executar um script PHP ou destacar trechos de códigos-fonte nos nossos artigos, e o TinyMCE simplesmente “se mete” e bagunça tudo.

Um exemplo disso é quando utilizamos o plugin WP-Syntax. Esse é um plugin muito famoso (se não o mais famoso) para destacar códigos-fonte em artigos do WordPress.org. Ele usa a tag <pre> para distinguir o que é código para ele destacar. Por exemplo, se inseríssemos esse código diretamente no HTML do artigo:

<pre lang="php" line="1" escaped="true">
<?php
    echo "Hello World";
?>
</pre>

Teríamos esse resultado quando o mesmo fosse publicado (supondo que o WP-Syntax esteja instalado):

<br />
<?php<br />
    echo "Hello World";<br />
?><br />

O problema é que o WP-Syntax adiciona atributos que não fazem parte do padrão HTML de atributos para a tag <pre>, como por exemplo o atributo “line” utilizado no exemplo acima. Aí, quando o TinyMCE encontra esse atributo “fora do padrão”, ele simplesmente o remove, deixando o código-fonte com a formatação errada.

E aí, como resolver?

Segundo o site do WP-Syntax, na parte de FAQ, ele sugere que a gente deva parar de usar o Editor Visual. Não, não é o que faremos. Vamos simplesmente dizer ao TinyMCE que, a partir de agora, a tag <pre> tem sim atributos chamados “line”, “escaped”, etc.

Para isso, devemos editar um arquivo do WordPress.org, então muita atenção pra não fazer besteira. E, como não podia faltar: eu não me responsabilizo por quaisquer danos causados pelo uso dessas dicas ou programas. Use-os ao seu próprio risco.

Então, vamos começar.

  1. Localize a pasta de instalação do seu WordPress.org
  2. Encontre o arquivo /wp-admin/includes/post.php
  3. Crie uma cópia de backup deste arquivo (por exemplo, post.php.backup )
  4. Edite o post.php
  5. Localize, próximo à linha 1276, as configurações do TinyMCE. O código deve se parecer com isso:
    	// TinyMCE init settings
    	$initArray = array (
    		'mode' => 'none',
    		'onpageload' => 'switchEditors.edInit',
    		'width' => '100%',
  6. Adicione a seguinte configuração ao final do array:
    'extended_valid_elements' => 'pre[escaped|line|align|class|dir<ltr?rtl|id|lang|onclick|ondblclick|onkeydown|onkeypress|onkeyup|onmousedown|onmousemove|onmouseout|onmouseover|onmouseup|style|title|width]'
  7. O código deverá ficar assim no final:
    		'verify_html' => true,
    		'extended_valid_elements' => 'pre[escaped|line|align|class|dir<ltr?rtl|id|lang|onclick|ondblclick|onkeydown|onkeypress|onkeyup|onmousedown|onmousemove|onmouseout|onmouseover|onmouseup|style|title|width]'
    	);
  8. Salve o arquivo post.php

Pronto! Agora é só testar o seu WP-Syntax trabalhando junto com o Editor Visual sem problemas. Um coisa legal pra se fazer é sempre colar o código pelo Editor Visual, assim o código já é transformado em “entidades HTML”, o que garante compatibilidade com a maioria dos navegadores na hora de exibir, além de te livrar de alguns possíveis problemas mais tarde.

Você pode notar que o que fizemos foi adicionar um “elemento válido”, ou seja, adicionamos um elemento chamado “pre” (substituimos, é verdade, pois já existia um elemento “pre”), que possui vários atributos: os que já eram parte do padrão e os novos “[escaped|line”. Podemos utilizar essa mesma dica para adicionar qualquer outra tag, ou qualquer outro atributo que possamos precisar, e o TinyMCE não vai mais implicar com elas. Mais do que isso, ele agora vai sempre verificar se nossas novas tags estão corretas.

Se você quiser ler mais sobre o assunto, todas as configurações do TinyMCE estão disponíveis nesse wiki.

Para artigos futuros, vou tentar mostrar como fazer algo semelhante para poder adicionar códigos em PHP no seu artigo sem ter problemas com o Editor Visual, utilizando o plugin php-exec, e algumas outras configurações do TinyMCE. Até lá.

ATUALIZAÇÃO:

Pessoal, eu até fiz um esquema para fazer o PHP funcionar direito com o Editor Visual. Apenas criei a tag <php>, acrescentando-a ao TinyMCE. Depois fui no php-exec e modifiquei-o para trocar a tag <php> por <?php e </php> por ?>.

No entanto, deixei de usar o WP-Syntax e comecei a usar o SyntaxHighlighter, que utiliza a short-tag , com a qual o TinyMCE não se mete. Além disso, mudei totalmente o site, inclusive todo o wordpress, e resolvi que iria desabilitar o editor visual, ao invés de ficar adaptando meus artigos a ele. Portanto, vou mantar o artigo aqui, mas nem pretendo dar continuidade a ideia.

E aconselho a quem for inserir códigos PHP no artigo, que desabilitem o editor visual, pelo menos para esse artigo. Eu, sinceramente, achei muito melhor. E tem gente que concorda.

Sobre maverick