Ajuda4.x:Editores
From Joomla! Documentation
TinyMCE
O TinyMCE é o editor padrão para os usuários do site (front-end) e da administração (back-end). O editor permite aos usuários uma interface familiar para processamento de texto para ser usada ao editar o conteúdo.
O TinyMCE pode ser configurado com 3 conjuntos diferentes de botões na barra das ferramentas. Isso é definido no plug-in Editor - TinyMCE.
Barras de ferramentas
Predefinição simples
O conjunto 2 de barras das ferramentas fornece uma linha de botões conforme mostrado abaixo. O conjunto é atribuído por padrão ao grupo de usuários "Público".
- Os botões permitem que você torne o texto: negrito, sublinhado e ou tachado.
- Desfazer e refazer.
- Lista não ordenada, lista ordenada.
- Colar como texto: Muitas vezes, ao copiar e colar texto de outras fontes, como arquivos PDF, documentos de texto ou páginas da web, o texto selecionado contém informações de formatação que não são necessárias ou desejadas. O uso de "Colar como texto" removerá toda a formatação do texto.
Predefinição média
O conjunto 1 de barras de ferramentas fornece duas fileiras de botões, conforme mostrado abaixo. O conjunto é atribuído por padrão aos grupos para usuários "Gerentes" e "Registrados".
Esta opção fornece todos os mesmos botões documentados no conjunto 2 de barra de ferramentas acima. Além disso, as seguintes opções estão disponíveis:
Linha superior
- Conteúdo do S.G.C.: A lista suspensa fornece acesso aos links para um artigo, contato, campo, mídia, menu ou módulo.
-
Artigo: O exemplo mostra como criar facilmente um link para qualquer artigo no site atual.
- Coloque o cursor no ponto do artigo onde deseja que o título do artigo vinculado seja inserido.
- Acione o (clique no) botão "Artigo" para abrir a janela.
- Acione o (clique no) título para selecionar o artigo desejado na janela. Você pode usar a pesquisa e os filtros para ajudar a encontrar o artigo desejado.
- Um link com o título do artigo será inserido no local atual do cursor.
- Se necessário, você pode editar o texto do link.
- Título da página. Insira o título a ser mostrado para a nova página (por exemplo, "Página 2").
- Alias da tabela de conteúdo (índice). Campo opcional a ser mostrado na tabela de conteúdo (índice) desta página. Em um artigo de várias páginas, o Joomla! mostra uma "tabela de conteúdo (índice)" para a página que permite ao usuário selecionar qualquer página. Se este campo estiver em branco, o título da página será usado. Se desejar um título diferente na tabela de conteúdo (índice), insira-o aqui.
- Inserir quebra de página. Acione este (clique neste) botão para inserir a quebra de página com os campos inseridos. A quebra de página será mostrada como uma linha tracejada cinza ao longo do artigo. Observe que uma quebra de página não pode ser editada. Se você precisar alterar um campo na quebra de página, acione o (clique no) artigo logo após a quebra de página, pressione "Backspace" até que a quebra de página seja excluída e insira uma nova quebra de página com as informações desejadas.
- As configurações são definidas no plug-in Conteúdo - Quebra de página.
- Se um artigo tiver uma pausa "Ler mais ...", apenas o texto antes da pausa, chamado de texto da introdução, será mostrado inicialmente, juntamente com um link "Ler mais ...". Se o usuário acionar este (clicar neste) link, o artigo inteiro ou apenas a parte após o link "Ler mais ..." será mostrado. Isso depende das configurações dos parâmetros do texto da introdução para o artigo.
- A pausa "Ler mais ..." permite que você economize espaço nas páginas mostrando apenas o texto da introdução.
- Se você deseja inserir pausas para um artigo mostrado em uma disposição para artigo, use o botão "Quebra de página".
Quebra de página: Este botão permite inserir uma quebra de página dentro de um artigo. Uma quebra de página permite a navegação de página quando o artigo é mostrado em uma disposição. Isso é útil para artigos longos. Quando este botão é pressionado, uma janela é mostrada conforme mostrado abaixo:
Ler mais: Este botão insere uma pausa "Ler mais ..." no artigo. Isso é mostrado como uma linha pontilhada vermelha no artigo.
Os botões na lista suspensa relacionada ao conteúdo do S.G.M. podem ser desabilitados em Plug-ins - Editores-xtd.
- Os botões no canto superior esquerdo permitem que você torne o texto: itálico. Ao lado estão os botões para alinhar à esquerda, à direita, ao centro e completo.
- Formatos: Seleciona os formatos predefinidos para cabeçalhos, embutidos, blocos e assim por diante.
- Recuo (mover/recuar para a esquerda e para a direita).
- 3 pontos: Mostra a segunda linha da barra de ferramentas.
Segunda linha
- Inserir/editar link: Para inserir ou editar um link, selecione o texto vinculado e pressione este botão. Uma caixa de diálogo pop-up é mostrada, permitindo inserir detalhes relacionados ao link.
- Remover link: Para remover um link, realce o texto vinculado e pressione este botão.
- Âncora: Uma âncora é um marcador dentro de um artigo que permite vincular diretamente a esse ponto do artigo. Aprender mais.
- Código fonte: Um pop-up é aberto mostrando o código fonte em HTML, permitindo que você edite o código-fonte em HTML.
- Inserir uma linha horizontal: Para inserir uma linha horizontal, mova o cursor para o local desejado dentro do artigo e acione este (clique neste) botão.
- Tabela: Inserir nova tabela, Propriedades da linha da tabela, Propriedades da célula da tabela, Inserir linha antes, Inserir linha depois, Excluir linha, Inserir coluna antes, Inserir coluna depois, Excluir coluna, Dividir células da tabela mescladas, Mesclar células da tabela.
- Subscrito, sobrescrito, caractere especial.
- Pré-visualiza o texto em pop-up.
Predefinição avançada
O conjunto 0 da barra de ferramentas fornece as opções de edição mais extensas, conforme mostrado abaixo. O conjunto é atribuído por padrão aos grupos para usuários "Administradores", "Editores" e "Superusuários".
Esta opção fornece todos os mesmos botões documentados no conjunto 1 da barra de ferramentas acima. Além disso, as seguintes opções estão disponíveis.
Linha superior
- Blocos: Parágrafos, cabeçalhos, pré-formatados.
- Fontes: Seleciona a fonte desejada.
- Tamanho da fonte: Seleciona o tamanho da fonte desejada.
- Localizar e substituir.
- Inserir/editar imagem: Para inserir uma imagem, coloque o cursor no local desejado e acione (pressione) este botão. Uma caixa de diálogo pop-up será mostrada, permitindo que você insira a origem, a largura ou a altura e outras informações sobre a imagem.
Segunda linha
- Seleciona a cor do texto ou a cor do plano de fundo.
- Tela inteira.
- Emoticons.
- Inserir mídia: Para inserir mídia, coloque o cursor no local desejado e pressione este botão. Uma caixa de diálogo pop-up será mostrada, permitindo que você insira o tipo, o arquivo ou o URL e outras informações relacionadas à mídia.
- Direção da esquerda para a direita ou direção da direita para a esquerda: Esses botões permitem inserir ou alterar a direção do texto, por exemplo, para linguagens que são lidas da direita para a esquerda.
- Recortar, copiar, colar.
- Mostrar caracteres invisíveis (como finais de parágrafos).
- Mostrar blocos.
- Espaço inquebrável.
- Bloco de citação.
- Insert Template.
Terceira linha
- Imprime o texto do artigo.
- Inserir/editar amostra de código.
- Inserir data/hora.
- Limpar formatação.
Acessibilidade
O TinyMCE é compatível com leitores de tela como JAWS e NVDA. Você pode usá-lo efetivamente mesmo se não usar o mouse.
| Tarefa | PC | macOS |
|---|---|---|
| Focar/pular para a barra de menus | Alt+F9 | ⌥+F9 |
| Focar/pular para a barra de ferramentas | Alt+F10 | ⌥+F10 |
| Focar/pular para o caminho do elemento | Alt+F11 | ⌥+F11 |
| Fechar menu/submenu/diálogo | Esc | esc |
| Retorna à área de conteúdo do editor | Esc | esc |
| Navega para a esquerda/direita através do menu/barra de ferramentas | Tab e as teclas das setas | Tab e as teclas das setas |
Consulte para mais informações:
- TinyMCE - Acessibilidade
- Uma lista de atalhos para o teclado (pc, mac) dentro do corpo do editor.
CodeMirror
O "Editor - CodeMirror" foi projetado para facilitar a inserção do código HTML em um artigo ou descrição. O CodeMirror suporta realce de sintaxe e preenchimento automático, conforme mostrado nesta captura de tela.
- Os botões mostrados abaixo da janela de edição fornecem acesso ao link para qualquer item do site. Aprender mais.
- O CodeMirror oferece algumas das mesmas vantagens de usar o "Editor - Nenhum", mas torna um pouco mais fácil trabalhar com código em HTML bruto.
- A configuração é feita no plug-in Editor - CodeMirror.
Nenhum
Se "Editor - Nenhum" for selecionado para um usuário, um editor de texto simples será mostrado. Isso permite que você insira HTML bruta e não formatada. Você pode usar o botão "Visualizar" na barra das ferramentas para visualizar como a HTML será mostrada.
Observe que a opção 'Nenhum' pode ser útil se você estiver inserindo em 'boilerplate' ou HTML personalizada, por exemplo, para criar um link do PayPal. O TinyMCE reformata e remove automaticamente alguma HTML quando um arquivo é salvo. Isso pode fazer com que o HTML complexa não funcione corretamente.
Se isso acontecer, você pode alterar temporariamente o editor para "Nenhum" e criar o conteúdo desejado. Observe que, se você deseja editar este conteúdo no futuro, deve ter o cuidado de alterar seu editor para "Nenhum". Caso contrário, se você abrir e salvar o conteúdo com o TinyMCE, poderá perder sua HTML personalizada.
O plug-in "Editor - Nenhum" não possui configuração.