gototopgototop

Vamos falar do editor de texto do joomla e aprender um pouco de html?

Escrito por 
Avalie este item
(1 Votar)

pessoalfico 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á?Cool

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.<COMANDO>, <comando> ou <CoMaNdo> 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. Configurando o plugin TinYMCE
  2. Formatação de texto e parágrafos
  3. Formatação de Parágrafos
  4. Ferramentas úteis (1)
  5. Ferramentas úteis (2)
  6. Inserindo um vídeo do youtube com o editor TinyMCE
  7. Ferramentas úteis (3)
  8. 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.

blacklist

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?Tongue out

editor tiny mce

2) Formatação de texto e estilização de parágrafos

barra superior

Vamos explorar a barra de ferramentas de formatação de textos e parágrafos:

  • B - Serve para "negritar" o texto, é a tag <strong> do html. Conhece?
  • I - Serve para "deixar o texto em itálico", é a tag <i> 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.

3) Formatação de Parágrafos

Tag <h1>

eu sou o título de um texto com a tag <h1>

Tag <h2>

eu sou um subtítulo com a tag <h2>

Tag <h3>

eu sou um subtítulo com a tag <h3>

Tag <h4>

eu sou um subtítulo com a tag <h4>

Tag <h5>

eu sou um subtítulo com a tag <h5>

Tag <h6>

eu 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)

barra superior

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;
  • (<ul>) - Cria uma lista não ordenada no artigo;
  • (<ol>) - 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-11Tongue out
  • 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.

Exemplo de lista não ordenada

  • eu sou uma lista não ordenada;
  • começo com a tag <ul>;
  • sou preenchida com a tag <li>;
  • meu preenchimento termina com a tag </li>;
  • e minha lista termina com a tag </ul>;
  • Você conhecia a lista não ordenada?

Exemplo de lista ordenada

  1. Eu sou uma lista ordenada;
  2. começo com a tag <ol>;
  3. sou preenchida com a tag <li>;
  4. meu preenchimento termina com a tag </li>;
  5. e minha lista termina com a tag </ol>;
  6. Meus marcadores podem variar entre números romanos e arábicos;
  7. Você conhecia a lista ordenada?

Exemplo de criação e edição de hiperlinks

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.Tongue out

Galera reunida no FISL 11

5) Ferramentas úteis (2)

post anterior

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 <td> do html. Conhece?
  • Propriedades das colunas da tabela - tag <tr> do html. Conhece?
  • Inserir linha antes da linha atual - acrescentar uma tag <td></td> antes da atual
  • Inserir linha depois da linha atual - acrescentar uma tag <td></td> depois da atual
  • Deletar linha - deletar a linha inteira da tabela
  • Inserir coluna antes da coluna atual - acrescentar uma tag <tr></tr> antes da atual
  • Inserir coluna depois da coluna atual - acrescentar uma tag <tr></tr> 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 <hr> 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. Cry Embarassed Foot in mouth Frown Innocent Undecided Tongue out
  • 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.

Exemplo de vídeo inserido a partir do ícone de Inserir vídeo

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.

barra psoterior

  • cortar - Permite que você corte um pedaço do texto. (*) não funciona no firefox. Tente ctrl+xTongue out
  • copiar - Permite que você copie um pedaço do texto. (*) não funciona no firefox. Tente ctrl+cTongue out
  • colar - Permite que você cole um pedaço do texto. (*) não funciona no firefoz. Tente ctrl+vTongue out
  • 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.Wink

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!!!

Ler 4734 vezes Última modificação em Segunda, 08 Novembro 2010 19:50
divulgue o artigo no orkut
Júlio Coutinho

Pós-graduando em Engenharia de Sistemas

Líder do Joomla! Brasília - JUG Planalto Central

User Registered Linux nr 52242

@cout45

+55.61.91619219

Website.: www.juliocoutinho.com.br

Your are currently browsing this site with Internet Explorer 6 (IE6).

Your current web browser must be updated to version 7 of Internet Explorer (IE7) to take advantage of all of template's capabilities.

Why should I upgrade to Internet Explorer 7? Microsoft has redesigned Internet Explorer from the ground up, with better security, new capabilities, and a whole new interface. Many changes resulted from the feedback of millions of users who tested prerelease versions of the new browser. The most compelling reason to upgrade is the improved security. The Internet of today is not the Internet of five years ago. There are dangers that simply didn't exist back in 2001, when Internet Explorer 6 was released to the world. Internet Explorer 7 makes surfing the web fundamentally safer by offering greater protection against viruses, spyware, and other online risks.

Get free downloads for Internet Explorer 7, including recommended updates as they become available. To download Internet Explorer 7 in the language of your choice, please visit the Internet Explorer 7 worldwide page.