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 tem 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ê precisar fazer upload de um arquivo de imagem ou som a partir do seu computador, você poderá usar os botões do Arquivos de Mídia, acima do editor. A ferramenta tentará criar uma 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 tiver selecionado as opções pretendidas, clique em "Enviar Para Editor" e a imagem ou arquivo irá aparecer no post em edição. Se estiver inserindo um vídeo, existem opções adicionais na caixa de diálogo "Mídia" que pode ser aberta a partir da segunda linha da barra de ferramentas.
HTML no editor visual
Qualquer código HTML digitado diretamente no editor visual é apresentado como texto quando o post é visualizado. O que você vê, é o que irá obter. Para incluir elementos de HTML que não podem ser gerados com os botões da barra de ferramentas, digite-os manualmente no editor de HTML. São exemplos tabelas e <código>. Para fazer isso, clique na aba HTML e edite o código. A seguir, volte para o modo Visual. Se o código for válido e compreendido pelo editor, você o verá apresentado imediatamente.
Colando no Editor Visual
Quando você cola conteúdo copiado de outro site, os resultados podem ser inconsistentes e dependem muito do seu navegador e da página de origem. O editor tenta corrigir o HTML inválido que foi colado, mas, para garantir os melhores resultados, tente usar o editor de HTML ou um dos dois botões de colar que se encontram na segunda linha da barra de ferramentas. Como alternativa, tente colar um parágrafo por vez. Na maioria dos navegadores, para selecionar um parágrafo, basta clicar três vezes nele.
Para colar conteúdo de outros aplicativos, como Word ou Excel, o melhor é usar o botão Colar do Word na segunda linha da barra de ferramentas ou no modo HTML.
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 |
|---|---|---|---|
| b | Negrito | i | Itálico |
| 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 |
| g | Tela inteira | t | Inserir a tag Mais |
| p | Inserir tag de quebra de página | h | Ajuda |
| e | Mudar para o modo HTML | ||
| Largura do Editor no modo de escrever 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.
