Vamos falar do editor de texto do joomla e aprender um pouco de html?
fico espantado com a quantidade de questionamentos que recebo a respeito do JCE, que é um editor de texto para Joomla! como tantos outros existentes no repositório. O motivo do meu espanto? Em 07 (sete) anos de utilização do CMS mesmo na época do Mambo, nunca usei outro editor que não fosse o padrão do Joomla! Aliás, excelente editor de texto utilizado também, por exemplo no RAD FRAME que é um framework interno do Exército.
Me pergunto: será que o JCE é tão bom assim e vale o risco de utilizá-lo mesmo ele tendo sido invadido no passado? Ou será que a comunidade por não conhecer tags e atributos do html não está usando todos os recursos do Tiny e ela está levando a fama de ser ruim?
Mais preocupado em ajudar do que em entender, preparei um tutorial passo a passo de utilização do editor abordando um pouco de tags e atributos do html. O artigo é longo mas não desanime. Em breve publicarei uma vídeo-aula para ajudar a assimilar o conhecimento. Vamos lá?
O que são tags HTML?
Tags são rótulos usados para informar ao navegador como deve ser apresentado o website. Todas as tags têm o mesmo formato: começam com um sinal de menor "<" e acabam com um sinal de maior ">". Genericamente falando, existem dois tipos de tags - tags de abertura: e tags de fechamento: . A diferença entre elas é que na tag de fechamento existe um barra "/". Tudo que estiver contido entre uma tag de abertura e uma tag de fechamento será processado segundo o comando contido na tag.
Mas, como toda regra tem sua exceção, aqui no HTML a exceção é que para algumas tags a abertura e o fechamento se dá na mesma tag.
, ou normalmente tem o mesmo efeito. Contudo a maneira correta é usar minúsculas. Então, crie o hábito de escrever suas tags com minúsculas mesmo porque os templates do Joomla! usam XHTML. (*) fonte Internet
Guia de referência W3C
existe um guia de referência disponibilizado na web de forma gratuita. No FISL o mesmo foi distribuído impresso e tive oportunidade de conseguir o meu. Vale a pena ler e reler este importante documento, se você deseja desenvolver projetos web dentro das webstandards.
O editor TinyMCE
1) Configuração do Plugin
Por padrão o editor é instalado com a opção "black list" habilitada e vale a máxima quanto maior a segurança menor a funcionalidade. Por isso ele é tão feio e pobre de opções.
Para resolver o problema siga os seguintes passos no backend: Menu superior->Extensões->Administrar Plugins->Editor - TinyMCE ->Parâmetros do Plugin->Funcionalidades->mude de avançado para extended. Melhorou?
2) Formatação de texto e estilização de parágrafos
Vamos explorar a barra de ferramentas de formatação de textos e parágrafos:
Tag h1
Vamos explorar a segunda barra de ferramentas do editor:
fico espantado com a quantidade de questionamentos que recebo a respeito do JCE, que é um editor de texto para Joomla! como tantos outros existentes no repositório. O motivo do meu espanto? Em 07 (sete) anos de utilização do CMS mesmo na época do Mambo, nunca usei outro editor que não fosse o padrão do Joomla! Aliás, excelente editor de texto utilizado também, por exemplo no RAD FRAME que é um framework interno do Exército.
Me pergunto: será que o JCE é tão bom assim e vale o risco de utilizá-lo mesmo ele tendo sido invadido no passado? Ou será que a comunidade por não conhecer tags e atributos do html não está usando todos os recursos do Tiny e ela está levando a fama de ser ruim?
Mais preocupado em ajudar do que em entender, preparei um tutorial passo a passo de utilização do editor abordando um pouco de tags e atributos do html. O artigo é longo mas não desanime. Em breve publicarei uma vídeo-aula para ajudar a assimilar o conhecimento. Vamos lá?
O que são tags HTML?
Tags são rótulos usados para informar ao navegador como deve ser apresentado o website. Todas as tags têm o mesmo formato: começam com um sinal de menor "<" e acabam com um sinal de maior ">". Genericamente falando, existem dois tipos de tags - tags de abertura: e tags de fechamento: . A diferença entre elas é que na tag de fechamento existe um barra "/". Tudo que estiver contido entre uma tag de abertura e uma tag de fechamento será processado segundo o comando contido na tag.
Mas, como toda regra tem sua exceção, aqui no HTML a exceção é que para algumas tags a abertura e o fechamento se dá na mesma tag.
As tags devem ser escritas com letras maiúsculas ou minúsculas?
Para a maioria dos navegadores é indiferente se você usa maiúscula, minúscula ou mesmo uma mistura delas.Guia de referência W3C
existe um guia de referência disponibilizado na web de forma gratuita. No FISL o mesmo foi distribuído impresso e tive oportunidade de conseguir o meu. Vale a pena ler e reler este importante documento, se você deseja desenvolver projetos web dentro das webstandards.
O editor TinyMCE
- Configurando o plugin TinYMCE
- Formatação de texto e parágrafos
- Formatação de Parágrafos
- Ferramentas úteis (1)
- Ferramentas úteis (2)
- Inserindo um vídeo do youtube com o editor TinyMCE
- Ferramentas úteis (3)
- Inserindo uma layer dentro do artigo
1) Configuração do Plugin
Por padrão o editor é instalado com a opção "black list" habilitada e vale a máxima quanto maior a segurança menor a funcionalidade. Por isso ele é tão feio e pobre de opções.
Para resolver o problema siga os seguintes passos no backend: Menu superior->Extensões->Administrar Plugins->Editor - TinyMCE ->Parâmetros do Plugin->Funcionalidades->mude de avançado para extended. Melhorou?
2) Formatação de texto e estilização de parágrafos
Vamos explorar a barra de ferramentas de formatação de textos e parágrafos:
- B - Serve para "negritar" o texto, é a tag do html. Conhece?
- I - Serve para "deixar o texto em itálico", é a tag do html. Conhece?
- U - Serve para "sublinhar o texto".
- Sobrescrito - esta é legal e serve para citar texto em desuso. Ex: O terceiro uniforme do flamengo parece o Tabajara F.C
- Alinhamento a esquerda - este texto está alinhado a esquerda (*) este é o padrão segundo as webstandards.
- Alinhamento centralizado - este texto está centralizado.
- Alinhamento a direita - este texto está alinhado a direita.
- Alinhamento justificado - este texto está justificado.
- Styles - serão apresentados os estilos de seu template.
- Format - serão apresentados os estilos de formatação para endereço, parágrafo e textos pré-formatados. Vamos nos focar nas tags do html para título e subtítulo. Use sempre que possível os padrões segundo as webstandards.
- Font family - família das fontes para o texto. A folha de estilos do template determina o estilo padrão dos textos de seu website e é importante que você mantenha uma fonte única para os textos e respeite os padrões sugeridos no Guia de referência do W3C - Fontes Tipográficas.
- Font size - tamanho das fontes. Da mesma forma penso que você precisa dar uma olhada no Guia de referência do W3C - Fontes Tipográficas. (*) Atenção - se você deseja permitir que o usuário do website aumente ou diminua fonte, tipo o que fazemos no JB, use % ou as tags da família small para o seu texto.
Tag h1
eu sou o título de um texto com a tag h1
Tag h2eu sou um subtítulo com a tag h2
Tag h3eu sou um subtítulo com a tag h3
Tag h4eu sou um subtítulo com a tag h4
Tag h5eu sou um subtítulo com a tag h5
Tageu sou um subtítulo com a tag h6
(*) o estilo das tags foi herdado da folha de estilos do seu template.4) Ferramentas úteis (1)
Vamos explorar a segunda barra de ferramentas do editor:
- Binóculo - Possibilita a busca e substituição de uma palavra dentro do texto;
- A->B - Possibilita a busca e substituição de uma palavra dentro do texto;
- (
- ) - Cria uma lista não ordenada no artigo;
- (
- ) - Cria uma lista ordenada dentro do artigo;
- Outdent - você pode manter o texto sem indentação;
- indent - você pode indentar o texto ( a indentação é muito usada na programação para alinharmos o código).
- Undo (ctrl +z) - isso mesmo, ao clicar nesse ícone você voltará uma ação;
- Redo (ctrl +y) - ao clicar nesse ícone você avança uma ação. Estranho né?
- Corrente - Nesse ícone vamos inserir editar os links
- Corrente quebrada - Desabilita o link criado.
- Âncora - cria uma link tipo âncora dentro do artigo. O índice deste artigo e os links internos foram criados com âncoras.
- Inserir/Editar imagem - permite a inserção e edição de uma imagem a partir de uma url.
- Limpeza do código - serve para limpar o código.
- ? - Conheça o projeto TinyMCE
- Html - Edite o código html do artigo.
- Inserir data - cliquei nele ele colocou a data bem aqui:2010-08-11
- Inserir hora - cliquei no ícone e olha a hora aqui:15:34:42
- Selecionar cor do texto - Fiz o texto, cliquei no ícone e escolhi a cor laranja. Adoro laranja!
- Background color - Agora fui além e resolvi escrever laranja sobre um fundo preto. Foi só clicar no ícone
- Modo tela cheia - Se quiser trabalhar com o editor em tela cheia basta clicar nesse ícone.
- eu sou uma lista não ordenada;
- começo com a tag;
- sou preenchida com a tag;
- meu preenchimento termina com a tag;
- e minha lista termina com a tag;
- Você conhecia a lista não ordenada?
- Eu sou uma lista ordenada;
- começo com a tag;
- sou preenchida com a tag;
- meu preenchimento termina com a tag;
- e minha lista termina com a tag;
- Meus marcadores podem variar entre números romanos e arábicos;
- Você conhecia a lista ordenada?
1) Hiperlink para o portal Joomla! Brasília usando o atributo (target="_blank") - O portal será aberto em uma nova Janela do navegador.
2) Hiperlink para o portal Joomla! Brasília usando o atributo (target="_self") - O portal será aberto na mesma janela do navegador. (*)
3) Hiperlink para o portal Joomla! Brasília usando o atributo (target="_parent") - O portal será aberto em uma nova janela/frame do navegador.
(*) padrão recomendado pelas webstandards.
Exemplo de imagem inserida de outro website
1) Clique no ícone inserir/Editar imagem
2) A imagem inserida e editada - passe o mouse sobre a mesma. Gostou? Obra do editor de texto que você não quer usar.
5) Ferramentas úteis (2)
Depois de ficar impressionado com os efeitos na imagem vamos a próxima barra de utilidades do editor TinyMCE
- Inserir nova tabela - como o próprio nome indica, podemos inserir uma tabela dentro do artigo. Lembre-se que "tableless" significa menos tabelas e não que você deva abominar o uso das coitadinhas. Além disso, o uso de tabelas consta no Manual de referência - Seção Tabelas. Leia a seção e use tabelas de forma semântica.
- Propriedades das linhas da tabela - tag do html. Conhece?
- Propriedades das colunas da tabela - tag do html. Conhece?
- Inserir linha antes da linha atual - acrescentar uma tag antes da atual
- Inserir linha depois da linha atual - acrescentar uma tag depois da atual
- Deletar linha - deletar a linha inteira da tabela
- Inserir coluna antes da coluna atual - acrescentar uma tag antes da atual
- Inserir coluna depois da coluna atual - acrescentar uma tag depois da atual
- Deletar coluna - deletar a coluna inteira da tabela
- Unir as células da tabela - atributos (rowspan e colspan) conhece?
- Inserir linha horizontal - a tag
do html, a mesma que usamos quando clicamos no leia mais do editor TinyMCE - Remover formatação - remove a formatação aplicada no texto
- Subscrever - eu sou texto subscrito.
- Sobrescrever - eu sou um texto sobrescrito.
- Caracteres especiais - esse ícone é igual canivete suíço, fantástico. Ex: ©2010 Joomla! Brasília - 1° Grupo Regional de Usuários Joomla! do Brasil®
- Smiles - adoro esse ícone.
- Inserir vídeo - ícone campeão para inserir vídeos do youtube.
- Régua horizontal - insere uma régua horizontal. Ex:
- Direção do texto esquerda para a direita. Eu sou um texto left to right.
- Direção do texto direita para a esquerda. Eu sou um texto right to left.
7) Ferramentas úteis (3)
Finalmente chegamos a última barra do editor TinyMCE e se você ficou cansado(a) tendo em vista o tamanho do artigo, imagina este cidadão que testou uma a uma e digitou tudo para você. Temos uma má notícia, algumas funcionalidades não rolam no firefox.
- cortar - Permite que você corte um pedaço do texto. (*) não funciona no firefox. Tente ctrl+x
- copiar - Permite que você copie um pedaço do texto. (*) não funciona no firefox. Tente ctrl+c
- colar - Permite que você cole um pedaço do texto. (*) não funciona no firefoz. Tente ctrl+v
- colar em texto plano - copiou um artigo de algum lugar e quer colar dentro do editor TinyMCE? Clique nesse ícone e cole o texto copiado.
- colar do word - esse ícone é fantástico e pode dentre outras coisas evitar que seu website trave. Ex: você copia um artigo do word e cola dentro do editor TinyMCE. O que ocorre? Uma quantidade enorme de lixo será inserida no seu artigo podendo levar o seu website a problemas de visualização então: "Jamais copie e cole algo do word direto no editor", use esse ícone e será colado o texto plano. Sem perder a formatação e sem sujeira.
- Selecionar tudo - seleciona todo o texto.
- Inserir uma layer - permite que você insira uma div dentro do artigo, com várias opções de formatação.
- mover para frente - mover a layer para frente.
- mover para trás - mover a layer para trás.
- configuração de posicionamento da div.
- Editar a folha de estilos - edite o css do texto
- Citação - Eu sou um texto que recebeu uma citação. (*) a acessibilidade agradece
- Abreviação - Eu sou um texto que possui abreviação. (*) a acessibilidade agradece
- Acrônimo - Linux, Apache, Mysql e Php (*) a acessibilidade agradece e o acrônimo é LAMP
- Inserção -Inserindo o quê mesmo? (*) acessibilidade agradece
- Exclusão -
Excluindo o quê mesmo? O vasco campeão brasileiro? Nunca será! - Inserindo/Editando atributos - Para quê serve este troço? Faça o teste pois criamos vários eventos!
- Controlar visualmente os caracteres - Habilitar/Desabilitar
- Inserir espaço entre caracteres
- Inserir blockquote - este texto tem blockquote.
Exemplo de inserção de Layer
Olá eu sou um texto dentro de uma layer, ou div para os mais íntimos.Chegamos ao final do artigo e espero que tenha conseguido dismistificar o uso do editor TinyMCE que na minha opinião é o melhor editor de texto para o Joomla! Já vem nele, faz parte do núcleo e é gratuito.
Sucesso!!!
- (
3 comentários:
Olá boa noite, sou iniciante no joomla, e gostaria de uma ajuda se possível. Eu inclui uma tabela por esse editor, pré-visualizei, via próprio editor, e tudo bem... Só que quando mandei visualizar a página. A tabela ficou péssima , não colocou os espaços que eu havia colocado no editor. exemplo: Coluna1Coluna2Coluna3. Outra duvida é, como colocar espaço entre o artigo escrito e a tabela incluida, pois fica péssimo a tabela colada? Obrigado!
Leo, o próprio Tinimice tem um editor de tabelas, onde ele mostra as opções e tamanho, largura e espaçamento, só clicar com o botão direito na borda da tabela e ir no editor. Não esqueça que o tnymice também tem um pré-visualizador que é bem útil.
bOA NOITE tem com inserir indicador no tinymce?
Postar um comentário