Função

O editor de texto rico é um componente que nos permite escrever textos diretamente em uma página HTML, mas diferentemente da área de texto, o editor de texto rico permite realizar diversas formatações no texto, adicionar imagens, tabelas, links, fórmulas e equações matemáticas, realizar impressão do seu conteúdo, adicionar propriedades ao texto e outras funcionalidades.

O editor de texto rico converte a formatação do seu conteúdo em HTML e as imagens inseridas são convertidas para base64.

Figura 1.1 - Exemplo do componente rodando no browser

Funcionalidades

O Editor de texto rico possui diversas funcionalidades para o usuário que irá usar o seu sistema criado no Cronapp. Podemos dividir o editor em quatro partes: menus com todas as suas funcionalidades (item 1 da Figura 1.2), logo abaixo estão botões de atalho com as principais funcionalidades (2), área de edição do texto (3) e a barra de status inferior (4). Todas elas podem ser personalizadas na janela de opções do Editor.

Figura 1.2 - Partes do Editor de Texto Rico

Ícone	O que faz
	Propriedade do documento, possibilita o usuário adicionar título, palavras-chave, descrição e outras informações ao texto.
	Gera a impressão do conteúdo inserido no editor de texto rico.
	Abre uma janela exibindo o conteúdo para uma pré-visualização.
	Abre uma janela exibindo o código fonte do conteúdo, em HTML, gerado pelo editor.
	Abre uma janela para permitir a inserção de equações matemáticas de forma simplificada.
	Abre uma janela para permitir a inserção de fórmulas químicas de forma simplificada.

Tabela 1 - Descrições de algumas funcionalidades

Equações matemáticas e fórmulas químicas

Adicionar fórmulas químicas e equações matemáticas no editor de texto rico é muito simples, basta utilizar as funcionalidades "Inserir uma equação matemática" e "Inserir uma fórmula química". Ambas possuem diversos símbolos matemáticos e químicos para criar fórmulas (Figura 1.2), além de permitir que o usuário escreva/desenhe a fórmula que será interpretada pelo editor (Figura 1.3).

Figura 1.2 - Janela de inserção de fórmulas químicas

Figura 1.3 - O Editor permite escrever fórmulas matemáticas com o ponteiro do mouse

Se preferir, o usuário pode utilizar LaTex. Na figura 1.4 foi inserido " $$\psi=-\frac{1}{\varphi}$$ " e o editor reconhece a fórmula exibida. Veja mais detalhes em LaTex support.

Figura 1.4 - Usando LaTex para criar fórmulas matemáticas

Principais propriedades

Na tabela abaixo estão descritas as principais propriedades para o funcionamento básico do componente.

Opções

Permite personalizar ou ocultar diversas funcionalidades do editor rico para o usuário.

Figura 2.1 - Abas Geral e Barra de tarefa da janela Opções do Editor Rico

Aba Geral

Oculta algumas partes do Editor e estiliza (CSS) a área de edição do texto.

• Exibir barra de menu: desmarque para ocultar os menus, deixando somente os botões de atalhos. Algumas funcionalidades, como tabelas, são acessíveis somente pelo menu;

• Exibir barra de status: desmarque para ocultar a barra de status inferior. A barra informa em qual tag HTML o cursor de digitação está, o número de palavras do texto e permite o usuário ampliar a área de edição do texto.

• Estilo: é possível usar CSS para estilizar a área de edição do texto. Na Figura 1.2 a cor de fundo foi alterada usando “body{ background-color: gray}”.

Aba Barra de tarefas

Oculta alguma das funcionalidades do editor de texto rico, impedindo o usuário de acessar tanto pelos botões de atalho quanto pelo menu.

Cada checkbox dessa aba é responsável por exibir uma ou mais funcionalidades que o usuário poderá usar no editor, veja a lista abaixo:

• Tela inteira: maximiza o editor, ocupando toda a extensão da aba do navegador web;

• Página: propriedades do documento, novo documento, código fonte e quebra de página;

• Impressão: pré-visualizar e imprimir;

• Área de transferência: recortar, copiar e colar;

• Fazer / Desfazer: desfazer e refazer alterações no texto;

• Símbolos: caracteres especiais;

• Imagem embutida: fazer upload de imagens que são convertidas em base64 ao salvar no banco de dados;

• Fontes: parágrafo, fonte, tamanho da fonte, riscar, negrito, itálico, sublinhado e limpar formatação;

• Links: inserir/editar link, remover link e criar âncora;

• Parágrafos: alinhamento de texto (à esquerda, centralizar, à direita e justificar), lista ordenada e não ordenada, aumentar e diminuir recuo, aspas (blockquote) e linha horizontal;

• Fórmulas: abrir janela para criação de fórmulas matemáticas e químicas.

Ao desmarcar todas as funcionalidades, o editor exibe as funcionalidades encontradas em um editor de texto rico comum.

Figura 2.2 - Editor com todas as funcionalidades da Janela de Opções desmarcadas

Exemplo de utilização

Nessa parte será feito um mini tutorial para mostrar um exemplo de utilização desse componente. Assim, reproduza os seguintes passos abaixo:

1. Crie um projeto web;

2. Abra o diagrama de dados e crie uma classe (no exemplo foi criada a classe Email);

3. Adicione os atributos id, destinatário e conteúdo;

4. Por fim, gere a persistência (1) e o a visão (CRUD) (2) dessa classe (Figura 3.1);.

Image Modified

Figura 3.1 - Persistência e CRUD da classe

Substituição do componente texto

Abra o formulário email (Localização: Formulários/Web/Autenticado

), desagrupe e substitua o componente " Entrada de texto " do conteúdo do Conteúdo e substitua o campo input pelo componente "Editor de Texto Rico", como na Figura 3.2. Aparecerá a janela de Opções do Editor de Texto Rico, clique em OK.

Image Modified

Figura 3.2 - Arrastando o componente de texto rico

Vincular o componente com a classe

Agora é preciso vincular o componente editor Editor de texto rico Texto Rico com o campo "conteudo" da classe email. Selecione o componente (1) e na aba propriedades (2), clique na caixa de seleção do campo valor (3) e selecione Email.active.conteudo (4).Conteúdo da fonte de dados. Siga os passos abaixo:

Image Modified

Figura 3.3 - Vinculando o editor rico ao campo conteúdo

1. Selecione o componente Editor de Texto Rico; 
2. Clique na aba Propriedades;
3. No campo Valor, selecione Email.active.conteudo.

Testando o componente

Para acessar a página do CRUD criada, adicione um item (1) à barra de navegação do formulário home e selecione o formulário email.view.html email (2) no campo ação (Figura 3.4).

Figura 3.4 - Adicionando link para a página criada

Salve os arquivos alterados e rode a aplicação. Após abrir a aplicação, informe o login e senha "admin" e confirme para acessar a página home, clique no item adicionada na barra de navegação para ser direcionado a página que criada nesse mini tutorial.

Clique no botão "adicionar", adicione um destinatário e um conteúdo (Figura 3.5). Ao salvar, o conteúdo será renderizado na grade como na Figura 3.6.

Figura 3.5 - Inserindo conteúdo no editor de texto rico

Figura 3.6 - Exibição do conteúdo renderizado na grade