Noções básicas de edição visual
A edição visual de texto, também denominada WYSIWYG (What You See Is What You Get, literalmente Aquilo que você vê é aquilo que você obtém, significa que o texto é formatado à medida que o usuário o escreve. O editor cria o código HTML em segundo plano enquanto o usuário se concentra na escrita. Estilos de texto, links e imagens aparecem aproximadamente como irão aparecer na Internet.
O WordPress inclui um Editor visual de HTML que funciona bem nos principais navegadores atuais. No entanto, editar HTML não é o mesmo que digitar texto. Cada página da web possui dois componentes principais: a estrutura, que corresponde ao código HTML e é criada pelo editor à medida que você escreve, e o design, determinado pelo tema do WordPress que está ativo no momento e pelo respectivo arquivo style.css. O WordPress cria o XHTML 1.0 válido, ou seja, inserir várias quebras de linha (tags BR) depois de um parágrafo não produz espaço em branco adicional na página. As tags BR são removidas como inválidas pelas funções internas de correção de HTML.
Neste editor a maior parte das teclas de atalho funciona como em qualquer outro editor de texto. Por exemplo: Shift+Enter insere uma quebra de linha, Ctrl+C = copiar, Ctrl+X = cortar, Ctrl+Z = desfazer, Ctrl+Y = refazer, Ctrl+A = selecionar tudo etc. (no Mac, use a tecla Command em vez de Ctrl). Na aba Teclas de atalho, veja todos os atalhos disponíveis.
Se você não gostar do modo como o editor visual funciona, desative-o no submenu Seu perfil, na opção Usuários do menu de administração.
Edição visual avançada
Imagens e anexos
Na barra de ferramentas do editor, existe um botão para inserir imagens já hospedadas em algum lugar na Internet. Se souber o URL de uma imagem, clique nesse botão para inserir o URL na caixa apresentada.
Se você precisa enviar uma imagem ou outro arquivo de mídia de seu computador, use o botão Biblioteca de Mídia, acima do editor. A Biblioteca de Mídia tentará criar uma cópia em miniatura para cada imagem enviada. Para inserir a imagem enviada no post, clique primeiro na miniatura para que seja apresentado um menu de opções. Quando você tiver selecionado as opções pretendidas, clique em "Inserir no Post" e a imagem ou arquivo irá aparecer no post que você está editando.
HTML no Editor Visual
Qualquer HTML digitado diretamente no editor vai aparecer como texto quando a publicação for vista. O que você vê é o que obtém. Se quiser incluir elementos HTML que não podem ser gerados com os botões da barra de ferramentas, você deve digitá-los diretamente no editor de texto. Exemplos disso são tabelas e <código>. Para fazer isso, clique na aba de texto e edite o código, então retorne para o modo visual. Se o código for válido e tiver sido entendido pelo editor, você deverá vê-lo imediatamente.
Colando no Editor Visual
Ao colar conteúdo de uma outra página da web os resultados podem ser inconsistentes e dependem de seu navegador e da página da web de onde você está colando. O editor tenta corrigir qualquer código HTML incorreto que tenha sido colado, mas para melhores resultados tente utilizar a aba Texto ou um dos botões de colar que estão na segunda linha. Alternativamente, tente colar parágrafo por parágrafo. Na maior parte dos navegadores, para selecionar um parágrafo de cada vez, faça um clique triplo nele.
Colar conteúdo de uma outra aplicação, como Word ou Excel, funciona melhor com o botão Colar do Word, na segunda linha, ou em modo texto.
Escrevendo à velocidade máxima
Em vez de usar o mouse para clicar na barra de ferramentas, use as teclas de atalho. Em Windows e Linux use Ctrl + letra. Em Macintosh use Command + letra.
| Letra | Ação | Letra | Ação |
|---|---|---|---|
| c | Copiar | v | Colar |
| a | Selecionar tudo | x | Cortar |
| z | Desfazer | y | Refazer |
| b | Negrito | i | Itálico |
| u | Sublinhado | 1 | Cabeçalho 1 |
| 2 | Cabeçalho 2 | 3 | Cabeçalho 3 |
| 4 | Cabeçalho 4 | 5 | Cabeçalho 5 |
| 6 | Cabeçalho 6 | 9 | Endereço |
Os seguintes atalhos usam teclas de acesso diferentes: Alt + Shift + letra.
| Letra | Ação | Letra | Ação |
|---|---|---|---|
| n | Verificar ortografia | l | Alinhar à esquerda |
| j | Justificar texto | c | Centralizar |
| d | Riscado | r | Alinhar à direita |
| u | • Lista | a | Inserir link |
| o | 1. Lista | s | Remover link |
| q | Citar | m | Inserir imagem |
| w | Modo de escrita sem distrações | t | Inserir a tag Mais |
| p | Inserir tag de quebra de página | h | Ajuda |
Largura do editor no Modo de Escrita sem Distrações:
| Alt +Ctrl + | Mais Largo | Alt -Ctrl - | Mais Estreito |
|---|---|---|---|
| Alt 0Ctrl 0 | Largura padrão |
Sobre o TinyMCE
Versão: ()
TinyMCE é uma plataforma independente, baseada em web. Um editor Javascript, HTML e WYSIWYG lançado como Código-aberto, sobre a licença LGPL por Moxiecode Systems AB. Tem a capacidade de converter campos de texto HTML ou outros campos em instâncias de editor.
Copyright © 2003-2011, Moxiecode Systems AB, Todos os direitos reservados.
Para mais informações sobre este software, visite o site do TinyMCE.
