Ir para o conteúdo. | Ir para a navegação

Ferramentas Pessoais
Acessar
Seções
Você está aqui: Página Inicial Conteúdo Conhecendo a Barra de Ferramentas Editor Visual

Conhecendo a Barra de Ferramentas Editor Visual

Introdução

A barra de ferramentas aparece acima do campo de edição de texto quando se escolhe a opçao Editar de uma página.

Lembrando que essa opção só aparece quando o usuário está logado e tem permissão para editar a referida página.

Ferramentas

Ícone básico pequeno novo Básico

Os itens mais básicos na barra de ferramentas são os seguintes:

Negrito

Representado por essa imagem este botão transforma o texto em negrito. Para isso, basta selecionar o texto e apertar no botão.

 

Salvar

Representado por essa imagem este botão salva o texto que está sendo editado sem sair do modo de edição.

 

Itálico

Representado por essa imagem esta botão transforma o texto em itálico. Para isso, basta selecionar o texto e apertar no botão.

 

Alinhamentos

É possível escolher 4 tipos de alinhamento para o texto. O botão da esquerda alinha o texto à esquerda. O botão do centro (lado esquerdo) centraliza o texto, o botão do centro (lado direito) alinha o texto à direita e o botão da direita justifica o texto.

Tabelas

Ícone básico pequeno novo Básico

Para inserir uma tabela no Plone, recomenda-se não copiar e colar uma tabela previamente feita em algum editor de texto.

Para se obter uma formatação satisfatória recomenda-se primeiramente clicar no botão "Inserir Tabela".



A seguir surgem algumas opções.

 

Na parte "Geral" temos:


1 - Classe da Tabela. Nessa opção escolhe-se a formatação, ou seja a aparência que a tabela terá:

Subdued Grid


Sem Borda


Lista Decorada


Lista Decorada com Borda

Lista Vertical Decorada

 

2 - Linhas e Colunas:

Nessa opção determina-se o número de linhas ou de colunas desejadas na tabela.

 

Na parte "Avançado" temos:

 

1 - Título da tabela:

Nessa opção, se selecionada, é possível acrescentar um título à  tabela.

 

Adicionar Tabela:

Clicando no botão "Inserir", a tabela é inserida no texto.

 

Editando a tabela

Após adicionada uma tabela é possível editá-la selecionando-a e clicando no botão "Inserir Tabela".

Você pode trocar a "Classe da Tabela", o alinhamento do texto da coluna atual e o número de linhas e colunas.

Listas

Ícone básico pequeno novo Básico

Existem dois tipos de listas em HTML, as listas ordenadas e as desordenadas.

1 - As listas ordenadas são listas numeradas, para habilitá-las no Plone selecione o texto que se quer transformar em lista.



Em seguida clique no botão "Lista Numerada". Note que os ítens da lista são determinados por parágrafos. Ou seja, é preciso dar "Enter" no teclado para que um elemento se transforme em um item.

Recomenda-se digitar todo o texto completo antes de clicar no botão de criar a lista, ou podem ocorrer alguns problemas de formatação.


2 - As listas desordenadas são aquelas cujos caracteres que separam os itens não são números, e sim pequenos símbolos.



A lista será criada.

Inserir Imagens

Ícone básico pequeno novo Básico

Para inserir uma imagem vá na página em cujo conteúdo pretende-se que a imagem apareça.

Clique com o cursor no espaço em que você quer que a imagem seja localizada.

Clique na opção "Inserir Imagem"



Siga os cinco passos abaixo destacados:

1 - Faça o upload da imagem que deseja adicionar,selecionando antes a pasta em que gostaria de colocá-la. (2).

2 - Ou, procure a imagem na pasta onde está localizada.

3 - Adicione uma descrição à imagem.

4 - Determine o tamanho da imagem.

5 - Insira a imagem.

 

Em seguida a imagem aparece no campo de Edição de Texto.



Criando Novos Estilos

ícone intermediário pequeno novo Intermediário

 

Os Estilos de Formatação são opções de visualização do texto que podem ser selecionados nessa caixa na barra de ferramentas do editor visual.

Adicionando Estilos 1

 

Essa caixa já traz alguns estilos prontos.

Porém, é possível criar seus próprios estilos seguindo os passos abaixo.

Atenção, só realize esse procedimento se você tiver conhecimentos de HTML e CSS.

 

Acima do cabeçalho selecione a opção "Configuração do Site"

 

Adi

 

O simplesmente digite na URL o texto

http://plone.ufrgs.br/nome_do_seu_site/plone_control_panel

Selecione a opção "Editor Visual"

Será aberta uma tela com várias opções de customização do editor visual. O último item é o "Estilos".

 

Adicionando Estilos 3

 

 

Aqui é possível visualizar os estilos já existentes listados. Cada um desses estilos estará ocupando uma linha com a seguinte sintaxe:

título|tag|classe

Exatamente como aparece acima, cada item da sintaxe é separado do outro por uma barra vertical (pipe).

O Título é nome do seu estilo, ou seja, o que aparece na caixa de opções de estilos na barra de ferramentas do editor. Como por exemplo, o estilo "Título".

A tag é o elemento HTML ligado ao estilo.

A Classe é optativa e se refere ao nome da classe que foi criada no arquivo .css na interface de gerência do zope.

Exemplo: Pretende-se criar um estilo com o Título Destaque. Nesse estilo se pretende alterar a tag p (parágrafo) com uma classe chamada classe-destaque. A sintaxe de criação será:

Destaque|p|classe-destaque

No arquivo ploneCustom.css, na interface de gerência do Zope cria-se a classe:

.classe-destaque{
font-weight: bold;
color: red;
border: 1px solid #333;
}

Assim, o novo estilo "Destaque" aparecerá na caixa de opções de estilos na barra de ferramentas do editor visual.