Editor de Texto openwysiwyg +3ST Versão e +3ST Manual de Usuário ÍNDICE

Transcrição

1 Editor de Texto openwysiwyg +3ST Versão e +3ST Manual de Usuário Este Manual apresenta instruções para a instalação e utilização do Editor de Texto para Web, customizado pela 3ST tomando por base o editor openwysiwyg desenvolvido pela openwebware. Está divido nas seguintes sessões 1. Instalação 2. Utilização dos Recursos 3. Solução de Problemas Informações adicionais podem ser obtidas no site da 3ST Consultoria e Serviços na sessão de Download deste software. ÍNDICE 1. Instalação 1. Componentes do software 2. Incluindo os componentes do software no site 3. Preparando o ambiente de processamento Configuração 4. Preparando o ambiente de processamento Instalação 5. Desinstalando o software 2. Utilização dos Recursos 1. Conhecendo o editor e seus recursos 2. Formatando textos selecionados 3. Formatando parágrafos 4. Criando e editando tabelas 5. Criando e editando Divisões 6. Adicionando e alterando imagens 7. Adicionando e alterando hyperlinks 8. Importando textos de outros editores 9. Utilizando arquivos de estilo (css) 10. Editando o Código HTML 11. Aumentando o Tamanho da Área do Editor 12. Salvando o documento editado 13. Carregando um documento no Editor 3. Solução de Problemas 1. Diferenças entre os navegadores 2. Linhas que não são excluídas 3. Editor no Formato Básico não tem Botão Salvar 4. Duração das Sessões 5. Divisões com distorções no IE 6. Editor de imagens não apresenta navegador de imagens 7. Lista de Estilos não contem as regras 8. Hyperlink não abre o conteúdo desejado 9. Estilos não são aplicados ao texto selecionado 10. Selecionando Objetos nos diferentes Navegadores ST Consultoria e Serviços Página 1 De 28

2 Instalação Componentes do Software O Editor openwysiwyg +3ST é composto de arquivos html e scritpts na linguagem java. Ao descompactar o software será criada uma pasta com o nome wysiwyg que contem todos os componentes necessários, divididos em pastas: popups contém arquivos html que constituem caixas de diálogo para o editor. Os popups são utilizados basicamente para: Criação e edição de tabelas e divisões Inclusão de imagens Criação de hyperlinks Coloração do texto Coloração do fundo Licença de uso scripts contém os arquivos java com o código que constitui o editor. Esses arquivos têm as seguintes aplicações: wysiwyg-3stenvironment.js Implementa a configuração desta versão wysiwyg-3stimplementacao.js Contém as funções principais desta versão wysiwyg-colors.js Define o grid de cores para coloração de textos e de fundo wysiwyg-popup.js Controla o funcionamento das caixas de diálogo wysiwyg-settings Contém a configuração base do ambiente de processamento wysiwyg.css É o arquivo de estilo do editor wysiwyg.js É o programa principal do Editor wysiwyg_images Contém as imagens utilizadas pelo editor Na Raiz da pasta principal, wysiwyg, exitem três arquivos que fazem parte do sistema Um arquivo com a extensão.pi É um arquivo de controle de download do software Dois arquivos com a extensão.pdf São os arquivos do Manual, um em português outro em Inglês Instalação - Incluindo os componentes do software no site A instalação do editor openwysiwyg +3ST é bastante simples. Basta copiar a pasta wysiwyg para a Raiz do web-site e alterar algumas variáveis nos arquivos de configuração. Veja Preparando o ambiente de processamento Configuração Página 2 De 28

3 Instalação Preparando o ambiente de processamento Configuração do Editor Para o correto funcionamento do editor são necessárias algumas alterações na configuração do software. A configuração dos seguintes itens deve ser feita. No arquivo wysiwyg\wysiwyg-3stenvironment.js as variáveis a seguir devem ser atualizadas para o seu ambiente de processamento: var vslogoimage var csslocation var vsmainimagedirectory var vsmainimagepath = "../../#path to your logo image#"; = "#path to your cssfiles#"; = "../../#images directory path#"; = "#images directory name#"; vslogoimage Deve conter o endereço relativo para um arquivo de imagem que seja o LOGO que você quer usar em sua implementação. Ex.../../App_Themes/3ST/imagens/3ST-Logo.gif CssLocation Deve conter o endereço relativo para o diretório onde estão seus arquivos de estilo. Ex. App_Themes/3ST/ vsmainimagedirectory Deve conter o endereço relativo para o diretório de ser acessadas pelo editor, para uso do editor. Ex.../../imagens imagens que poderão vsmainimagepath Deve apontar para o mesmo diretório da variável anterior. Entretanto, deve referir-se ao primeiro nível dessa pasta. Ex. Imagens No mesmo arquivo existe um outro conjunto de variáveis que também precisam refletir o seu ambiente de instalação do editor: var cssforie var cssforie8 var cssforfirefox var cssforopera var cssforsafari var cssforgoogle var cssdefault = "#css file name for IE#"; = "#css file name for IE8#"; = "#css file name for Firefox#"; = "#css file name for Opera#"; = "#css file name for Safari#"; = "#css file name for Google Chrome#"; = "#css file name for a Default css File#"; Cada uma dessas variáveis deve conter o nome do Arquivo de Estilo correspondente ao Navegador indicado pelo nome da variável. Por exemplo, para o Internet Explorer 7, indique o nome do arquivo de estilo usado. Para a variável cssdefault, indique o nome do arquivo que deve ser usado para quaisquer outros Navegadores. Se você utiliza apenas um arquivo de estilo, repita o mesmo nome de arquivo para cada uma das variáveis. Página 3 De 28

4 Instalação Preparando o ambiente de processamento Instalação do Editor Após a configuração do software é preciso instalá-lo em uma página web que venha a disponibilizar o editor openwysiwyg +3ST. Esta página deve ter as seguintes características: Componentes Para funcionar corretamente e prover meios de comunicação entre o código Java Script do Editor e o Código da página onde o Editor está instalado, os seguintes controles HTML devem existir: 1. TEXTAREA Deve ter o nome rconteudotext. É o componente onde o editor será criado 2. INPUT Deve ter o nome envlang e ser invisível. É o componente que define o idioma em que o editor será operado. Deve ser inicializada na carga da página com 'P' para ter mensagens em Português ou 'E' para ter mensagens em Inglês 3. INPUT Deve ter o nome texttosave e ser invisível. É o componente onde o Editor disponibilizará o texto editado para ser salvo. É deste componente que sua página dever recuperar o texto editado e providenciar que seja salvo 4. INPUT Deve ter o nome vsworkingarea e ser invisível. É uma área de trabalho do editor que deve ser carregada com o mesmo conteúdo do texttosave 5. INPUT Deve ter o nome ruleslist e ser invisível. Este campo deve ser inicializado com os nomes das regras de estilo que serão disponibilizadas para o Editor. Deve ser uma string com os nomes das regras separados por ponto-e-vírgula 6. INPUT Deve ter o nome btsavedused e ser invisível. Este controle será atualizado pelo Editor para TRUE ou FALSE indicando se o Editor pressionou o botão salvar. Se TRUE, o conteúdo do componente texttosave conterá o conteúdo a ser salvo. Veja item 3. acima 7. INPUT Deve ter o nome imagelist e ser invisível. Este controle deve ser inicializado na carga da página com a lista de diretórios e imagens que serão disponibilizadas para o Editor 8. INPUT Deve ter o nome ideditorstatus e ser invisível. É par uso do Editor Instalação dos Arquivos de Código A página que hospedar o Editor precisa fazer referência aos arquivos de código que constituem o Editor. As seguintes linhas de código devem ser acrescentadas à página HTML ou ASPNET: <%-- ATTENTION - Maintain the Referencing Sequence Below --%> <script type="text/javascript" src="wysiwyg/scripts/wysiwyg-3stimplementation.js"></script> <script type="text/javascript" src="wysiwyg/scripts/wysiwyg-3stenvironment.js"></script> <script type="text/javascript" src="wysiwyg/scripts/wysiwyg.js"></script> <script type="text/javascript" src="wysiwyg/scripts/wysiwyg-settings.js"></script> <%-- ATTENTION - Replace 'ctl00_cphmaster_rconteudotext' by your TextArea component name --%> <script type="text/javascript"> WYSIWYG.attach('ctl00_CPHMaster_rConteudoTEXT', full); </script> NOTAS O termo ct100_cphmaster_rconteudotext refere-se à TEXTAREA da página que hospedará o Editor. ct100_cphmaster_ é um prefixo adicionado pelo ambiente.net e deve ser eliminado se a implementação não for.net ou substituído pelo prefixo que a instalação.net atribuir ao controle rconteudotext. O termo full refere-se ao modo de operação. Full habilita todos os controles. Small habilita os componentes básicos. Veja DEMO do software na área de downloads do site da 3ST. Página 4 De 28

5 Instalação Desinstalando O software não precisa de processo de desinstalação. Para eliminá-lo basta excluir a pasta wysiwyg do do website onde estiver instalado. Utilização dos Recursos Conhecendo o Editor e Seus Recursos O Editor openwysiwyg +3ST tem recursos para formatação de palavras, sentenças ou parágrafos completos, assim como um Editor de Texto. Essas ferramentas permitem: Definir a Fonte Formatar a Fonte definindo características como tamanho, densidade, inclinação, sublinhar, cor da fonte e cor do fundo. Formatar parágrafos quanto ao alinhamento e posicionamento Definir listas numeradas ou marcadas Aplicar estilos Outros recursos de edição permitem a aplicação de componentes organizadores do texto na página, tais como: Criar e editar Tabelas Criar e editar Divisões Incluir imagens e definir suas propriedades de tamanho e posicionamento Incluir Hyperlinks Ferramentas auxiliares ao processo de edição, permitem: Desfazer e Refazer Copiar, Cortar e Colar textos e componentes Limpar o texto de qualquer formatação Exibir e editar o Código HTML Prever o conteúdo em um Navegador Aumentar o tamanho da janela de edição Imprimir o conteúdo Página 5 De 28

6 Utilização dos Recursos Formatando textos selecionados Na barra de ferramentas os quatro primeiros botões da barra de ferramentas permitem a formatação de propriedades da fonte utilizada, como Bold, Itálico, Sublinhado e Tachado. Os dois botões seguintes permitem a definição de propriedades de cor, da Frente e do Fundo. Quando um desses dois botões é usado, a seguinte Caixa de Diálogo é mostrada: Os dois botões permitem formatar o posicionamento vertical do texto na linha. Abaixo da linha Sub-escrito ou acima da linha Sobre-escrito. Nesses dois casos acima, por pressionar os botões uma vez, as propriedades são iniciadas e todo text digitado terá essas propriedades. Por pressionar os botões uma segunda vez, as propriedades são desligadas. Você pode combinar propriedades por pressonar varios botões iniciando várias propriedades. Utilizando as caixas de escolha você pode escolher a Fonte, Tamanhos e tipos de Cabeçalho com a utilização das caixas de escolha para Fontes, Tamanhos e Cabeçalhos. Note que a Fonte e o Tamanho do texto onde o cursor estiver posicionado são apresentados nas Caixas de Escolha correspondentes. Se você mover o cursor para um texto com outra propriedades as informações serão atualizadas nas Caixas de Escolha. Com as ferramentas é possível Cortar, Copiar e Colar textos. O último botão permite a limpeza do texto. Com sua utilização todas as propriedades e formatos do texto são removidos. O botão age sobre todo o conteúdo sendo editado. Utilizando os botões que podem ser desfeitas é de 50. você pode desfazer alterações e refazê-las. O limite de alterações Página 6 De 28

7 Utilização dos Recursos Formatando textos selecionados Basicamente existem dois conjuntos de ferramentas para a formatação de parágrafos. Para o alinhamento dos parágrafos, as ferramentas esquerda, centralizar ou alinhar à direita os parágrafos. permitem justificar, alinhar à O segundo conjunto de ferramentas permite: Os dois primeiros botões geram listas, marcadas ou numeradas. Esta é uma lista marcada com dois itens Item dois 1. Esta lista está numerada e tem dois itens 2. Item dois Os dois últimos botões permitem que o texto do parágrafo ou linha seja indentado ou revertido. Linha Indentada Linha Indentada Revertida Página 7 De 28

8 Utilização dos Recursos Criando e Editando Tabelas A caixa de diálogo abaixo permite a definição de Tabelas ou de Divisões. Neste tópico abordaremos TABELAS e descreveremos apenas a parte superior da caixa de diálogo. Os campos na caixa de diálogo permitem definir: A quantidade e linhas. O valor default é 2 A quantidade de colunas. O valor default é 2 As margens D(ireita), E(squerda), B(ase), T(opo). Os números devem ser separados por vírgula e os quatro são necessários. A medida é definida em pixels e definem as margens externas da tabela. O valor default é 2,2,2,2 Padding D(ireita), E(squerda), B(ase), T(opo). Os números devem ser separados por vírgula e os quatro são necessários. A medida é definida em pixels e definem as margens internas da tabela. O valor default é 2,2,2,2 Espessura da borda. Deve ser definida em valor numérico que representa pixels. O valor 0 (zero) indica que a borda não será visível. O valor default é zero Estilo da Borda. Uma caixa de escolha apresenta valores que definem o estilo da borda, podendo ser solid (linha sólida), double (linha dupla), dotted (linha pontilhada), dashed (linha tracejada), etc. O valor default é none (nenhuma) Juntar a Borda. Força as bordas a se juntarem. Não haverá espaço entre as células Cor da Borda. Define a cor da borda, conforme definido nos campos Espessura da Borda e Estilo da Borda. Se a espessura for ZERO ou o Estilo for Nenhum (nome) a cor da borda não terá efeito. O botão Escolha abre uma Caixa de Diálogo de Cores Cor do Fundo. Define a cor do fundo de cada célula. O botão Escolha abre uma Caixa de Diálogo de Cores Alinhamento Vertical. Define como o conteúdo de cada célula será alinhado. Topo, centro, base. O valor default é top (topo) Alinhamento Horizontal. Define como o conteúdo de cada célula será alinhado. Esquerda, direita ou centro. O valor default é left (esquerda) Página 8 De 28

9 Comprimento. Define o comprimento total da Tabela. O valor default é 300 em pixels. A caixa de escolha ao lado permite definir a medida em pixels ou em percentual. Informações Importantes sobre o uso de tabelas: Todas as células terão as mesmas propriedades definidas e terão simetria nas linhas e colunas. Essas propriedades, quando editadas e alteradas, serão aplicadas a todas as células da tabela. Quando a borda é definida como não visível, espessura = 0 e estilo = none, o Editor, para efeito de visualização e edição acrescentará linhas pontilhadas, que são removidas quando o documento é salvo. Desta forma não aparecerão quando apresentada na página. Sem Bordas Com Bordas Para editar uma Tabela é necessário selecionar a tabela (veja tópico Solução de Problemas Diferenças entre Navegadores). Uma vez selecionada, as propriedades da tabela serão apresentadas na Caixa de Diálogo de edição de Tabelas. Os valores alterados serão aplicados à tabela já existente. Para editar a tabela selecionada utilize o botão para edição de tabelas O comprimento de cada coluna será aumentado à medida que conteúdo de texto seja adicionado. O comprimento da tabela, no entanto, permanecerá o definido A altura de cada linha será, também, aumentado em relação ao conteúdo digitado Para inserir imagens basta posicionar o cursor na célula desejada e usar a Caixa de Diálogo de Imagens Uma tabela pode ser copiada e incluída em outra parte do conteúdo ou em outro conteúdo editado após a cópia. Para copiar uma tabela é necessário selecioná-la (veja tópico Solução de Problemas Diferenças entre Navegadores) e utilizar Ctrl + C ou pressionar o botão Copiar Para colar uma tabela já copiada, basta posicionar o cursor no ponto de inserção desejado e utilizar Ctrl + V ou pressionar o botão Colar Quaisquer outras propriedades podem ser aplicadas ao texto dentro das células de uma tabela. Basta selecionar o texto e utilizar a propriedade desejada. Veja tópicos Formatando Textos ou Formatando Parágrafos Página 9 De 28

10 Utilização dos Recursos Criando e Editando Divisões A caixa de diálogo abaixo permite a definição de Tabelas ou de Divisões. Neste tópico abordaremos DIVISÕES e descreveremos toda a caixa de diálogo. Os campos na caixa de diálogo permitem definir: Parte Superior da Caixa de Diálogo A quantidade e linhas. O valor default é 2 A quantidade de colunas. O valor default é 2 As margens D(ireita), E(squerda), B(ase), T(opo). Os números devem ser separados por vírgula e os quatro são necessários. A medida é definida em pixels e definem as margens externas da tabela. O valor default é 2,2,2,2 Padding D(ireita), E(squerda), B(ase), T(opo). Os números devem ser separados por vírgula e os quatro são necessários. A medida é definida em pixels e definem as margens internas da tabela. O valor default é 2,2,2,2 Espessura da borda. Deve ser definida em valor numérico que representa pixels. O valor 0 (zero) indica que a borda não será visível. O valor default é zero Estilo da Borda. Uma caixa de escolha apresenta valores que definem o estilo da borda, podendo ser solid (linha sólida), double (linha dupla), dotted (linha pontilhada), dashed (linha tracejada), etc. O valor default é none (nenhuma) Juntar a Borda. Não tem efeito sobre a definição das divisões Cor da Borda. Define a cor da borda, conforme definido nos campos Espessura da Borda e Estilo da Borda. Se a espessura for ZERO ou o Estilo for Nenhum (nome) a cor da borda não terá efeito. O botão Escolha abre uma Caixa de Diálogo de Cores Cor do Fundo. Define a cor do fundo de cada célula. O botão Escolha abre uma Caixa de Diálogo de Cores Alinhamento Vertical. Define como o conteúdo de cada célula será alinhado. Topo, centro, base. O valor default é top (topo) Alinhamento Horizontal. Define como o conteúdo de cada célula será alinhado. Esquerda, Página 10 De 28

11 direita ou centro. O valor default é left (esquerda) Comprimento. Define o comprimento total da Tabela. O valor default é 300 em pixels. A caixa de escolha ao lado permite definir a medida em pixels ou em percentual. Parte Inferior da Caixa de Diálogo Box Usar Divisão. Precisa ser marcado para que um conjunto de divisões ou uma divisão seja criado em lugar de uma Tabela Altura por DIV. Define a altura de cada divisão. É definida em pixels ou em percentual Flutuar à. Define o posicionamento da(s) divisão(ões) sendo criadas. As possibilidades são: Flutuar à esquerda Flutuar à direita Sem a propriedade Flutuar. Permitir Texto Formatado. Se esta opção for escolhida, o editor criará uma única divisão com o controle HTML PRE. Este controle permite que o texto dentro da divisão assuma as características que o usuário desejar e os padrões HTML não serão aplicados. Pode ser usado para a digitação de códigos de programas ou outro texto com formatação exclusiva Toda Divisão PRE será definida para a fonte Courier New Permitir Barras de Rolagem. Se esta opção for marcada, o tamanho da célula não será ajustado ao texto digitado. Sempre que o text ultrapassar o tamanho definido da célula, uma barra de rolagem será adicionada à divisão Informações Importantes sobre o uso de Divisões: Todas as células são definidas com as mesmas propriedades definidas e terão simetria nas linhas e colunas. Diferente das tabelas, no entanto, cada célula pode ser, posteriormente, editada separadamente e as propriedades de cada célula definidas conforme a necessidade. As linhas e colunas definidas para um conjunto de divisões sempre serão criadas dentro de uma divisão maior. Quando a borda é definida como não visível, espessura = 0 e estilo = none, o Editor, para efeito de visualização e edição acrescentará linhas pontilhadas, que são removidas quando o documento é salvo. Desta forma não aparecerão quando apresentada na página. Sem Bordas Com Bordas Para editar uma Divisão é necessário selecionar a célula a ser alterada (veja tópico Solução de Problemas Diferenças entre Navegadores). Uma vez selecionada, as propriedades da divisão serão apresentadas na Caixa de Diálogo de edição de Tabelas. Os valores alterados serão aplicados à tabela já existente. Para editar a célula selecionada utilize o botão para edição de tabelas e divisões O comprimento de cada coluna não será aumentado à medida que conteúdo de texto seja adicionado A altura de cada célula será aumentado em relação ao conteúdo digitado, a menos que a propriedade Permitir Barras de Rolagem tenha sido escolhida Para inserir imagens basta posicionar o cursor na célula desejada e usar a Caixa de Diálogo de Imagens Página 11 De 28

12 Um conjunto de divisões ou uma divisão pode ser copiado e incluído em outra parte do conteúdo ou em outro conteúdo editado após a cópia. Para copiar uma divisão é necessário selecioná-la (veja tópico Solução de Problemas Diferenças entre Navegadores) e utilizar Ctrl + C ou pressionar o botão Copiar Para colar uma tabela já copiada, basta posicionar o cursor no ponto de inserção desejado e utilizar Ctrl + V ou pressionar o botão Colar Quaisquer outras propriedades podem ser aplicadas ao texto dentro das células de uma tabela. Basta selecionar o texto e utilizar a propriedade desejada. Veja tópicos Formatando Textos ou Formatando Parágrafos Página 12 De 28

13 Utilização dos Recursos Adicionando e Alterando Imagens A caixa de diálogo abaixo permite a escolha de imagens ou componentes Flash para inclusão no texto bem como a edição das propriedades de imagens já incluídas no texto. Os campos da Caixa de Diálogo permitem: URL da Imagem. Neste campo se define a URL para a imagem. A URL pode ser qualquer endereço WEB válido, dentro ou fora do próprio website. É possível listar as imagens que estejam em um Diretório (ou pasta) dentro do website onde o Editor está instalado. A lista de pastas que contém as imagens deve ser passada, na inicialização da página, como uma string contendo as pastas e arquivos separados por ponto-e-vírgula: Exemplo Pasta Nível 01 Pasta Nível 02 Pasta Nível 03 Arquivo 1 Nível 03 Arquivo 2 Nível 03 Arquivo 1 Nível 02 Arquivo 2 Nível 02 Arquivo 1 Nível 01 Arquivo 2 Nível 01 Arquivo 1 Nível 00 Neste Caso a String deve ser composta: Pasta Nível 01/; Pasta Nível 01/Pasta Nível02/;Pasta Nível 01/Pasta Nível 02/Pasta Nível 03/;Pasta Nível 01/Pasta Nível 02/Pasta Nível 03/Arquivo 1 Nível 03;Pasta Nível 01/Pasta Nível 02/Pasta Nível 03/Arquivo 2 Nível 03;Pasta Nível 01/Pasta Nível 02/Arquivo 1 Nível 02;Pasta Nível 01/Pasta Nível 02/Arquivo 2 Nível 02; Pasta Nível 01/Arquivo 1 Nível 01;Pasta Nível 01/Arquivo 2 Nível 01; Arquivo 1 Nível 00 Página 13 De 28

14 Para facilitar a visualização, veja a string quebrada em linhas: Pasta Nível 01/; Pasta Nível 01/Pasta Nível02/; Pasta Nível 01/Pasta Nível 02/Pasta Nível 03/; Pasta Nível 01/Pasta Nível 02/Pasta Nível 03/Arquivo 1 Nível 03; Pasta Nível 01/Pasta Nível 02/Pasta Nível 03/Arquivo 2 Nível 03; Pasta Nível 01/Pasta Nível 02/Arquivo 1 Nível 02; Pasta Nível 01/Pasta Nível 02/Arquivo 2 Nível 02; Pasta Nível 01/Arquivo 1 Nível 01; Pasta Nível 01/Arquivo 2 Nível 01; Arquivo 1 Nível 00 Botão Procurar. Abre a Caixa de Diálogo para escolha de imagem que resida em uma pasta no website onde o editor estiver instalado. O botão somente será visível se a string de pastas e arquivos (veja item anterior) for fornecida. A caixa apresenta uma lista de pastas e arquivos do lado esquerdo e uma área à direita para visualização das imagens. Como num navegador, clicando-se sobre as pastas seus conteúdos se tornarão visíveis ou serão fechados se já estiverem visíveis. O botão Selecionar fecha essa caixa de Diálogo e retorna a URL da imagem selecionada O botão Cancelar simplesmente fecha a caixa de Diálogo Na Caixa de Diálogo Principal, o campo Texto Alternativo é para a definição de um texto que será apresentado caso a recuperação da imagem falhe O Box Flash, se marcado indica que a imagem a ser incluída será um componente Flash Na parte inferior da Caixa de Diálogo, temos as seguintes informações: Comprimento. Define o comprimento desejado para a imagem. O valor default é auto, indicando que o comprimento será o da imagem no seu formato original Altura. Define a altura desejada para a imagem. O valor default é auto, indicando que a altura será a da imagem no seu formato original Página 14 De 28

15 Borda. Pode ser definida uma borda em pixels. O valor default é ZERO, sem borda Alinhamento. Uma caixa de escolha permite as opções padrão HTML de posicionamento da imagem: Not Set Left Right TexttTop AbsMiddle Baseline AbsBottom Bottom Middle Top Espaçamento Horizontal. Para definição em pixels do afastamento horizontal da esquerda para a direita. Pode ser usado para afinar o posicionamento da imagem Espaçamento Vertical. Para definição, em pixels, do afastamento vertical de cima para baixo. Pode ser usado para afinar o posicionamento da imagem O Botão Enviar encerra o diálogo e inclui a imagem no texto, a partir da posição do cursor O Botão Cancelar simplesmente encerra o diálogo Informações Importantes sobre o uso de imagens: A String com a lista de pastas e arquivos disponíveis no website deve ser criada na inicialização da pagina e guardada na variável imagelist. Veja Preparando o ambiente de processamento/instalação do Editor, item 6 Se a string de pastas e imagens estiver mal formada, as pastas e arquivos não serão apresentados corretamente As imagens do website a serem disponibilizadas para o editor devem existir em uma estrutura de pastas dentro do website. O Editor não oferece recursos de upload. O Editor não faz nenhuma consistência quanto à origem e tamanho da imagem sendo inserida no texto. Compete a quem implementar o editor se preocupar com limitações neste respeito Página 15 De 28

16 Utilização dos Recursos - Adicionando e alterando hyperlinks Para definir um Hyperlink é necessário que um texto ou imagem esteja selecionado. Com o objeto do Hyperlink selecionado, utiliza-se o botão de edição de Hyperlinks para abrir uma Caixa de Diálogo. A Caixa de Diálogo abaixo será apresentada. URL. É o campo para definição do endereço de destino no Hyperlink. Pode ser um endereço externo ou um endereço relativo, interno no website onde o Editor está instalado. Objetivo. Define como o link será aberto. Pode ser escolhido na Caixa de Escolha à direita, que tem as opções HTML: blank Será aberto numa nova janela self Será aberto na frameset que tiver o foco parent Será aberto no primeiro frameset acima do atual top Será aberto na mesma janela sem considerar framesets no target Não será definida a propriedade Target custom Para livre definição de um nome de destino. Neste caso, o objetivo deve ser digitado Estilo. Para definição de um estilo para formatação do Hyperlink. O estilo deve ser informado no padrão HTML de definição de estilos Classe. Um nome de Classe do Arquivo de Estilo CSS que estiver ativo Nome. Não utilizado nesta versão Informações Importantes sobre o uso de imagens: O Editor não faz nenhuma consistência quanto destino do hyperlink. Compete a quem implementar o editor se preocupar com limitações neste respeito Página 16 De 28

17 Utilização dos Recursos - Importando textos de outros editores Textos digitados e compostos em outros editores podem ser copiados e colados na área de texto do Editor openwysiwyg +3ST. Entretanto, o texto colado terá herdado propriedades definidas pelo editor, como Microsoft Word, BROffice, etc. Essas propriedades são expressas em caracteres de controle que não atendem aos padrões HTML. O Editor openwysiwyg +3ST oferece um recurso que elimina todos os caracteres de controle desses textos importados. Para utilizá-lo basta pressionar o botão Nota Importante O recurso eliminará todos os caracteres de controle. O texto estará sem nenhuma formatação. Por exemplo, se um texto composto já tiver formatação do editor, e parte de um texto importado for colado, ao usar esse botão, todas as propriedades definidas pelo Editor openwysiwyg +3ST também serão eliminadas. Será necessário aplicar as propriedades novamente. Utilização dos Recursos Utilizando arquivos de estilo (css) Listando as Regras para Uso O Editor openwysiwyg +3ST oferece a possibilidade de utilização de Regras de Estilo existentes no arquivo de Estilo (css) ativo, utilizado pelo website onde o Editor estiver instalado. As regras que serão apresentadas na Caixa de Escolha é devem ser definidas pelo programa em Asp.Net ou outro programa que seja executado no servidor do website. O campo ruleslist (veja tópico Instalação Preparando o ambiente de processamento) deve conter a lista de regras separadas por ponto-e-vírgula. Deve ser inicializada pelo programa, seja em Asp.Net ou outro programa, que seja executado no servidor do website. Um arquivo de estilos pode ter muitas regras que não devem ser disponibilizadas para o editor. Por esse motivo, a implementação do Editor openwysiwyg +3ST prevê que o usuário decida que regras podem ser utilizadas. Por exemplo, somente seriam listadas regras que estejam relacionadas com a formatação de parágrafos, listas e outras regras que definam a formatação padrão do website. Os nomes das regras devem ser exatamente como estão definidos no arquivo de estilos (CSS). As regras podem ter nomes significativos e podem ser duplicadas com nomes diferentes para atender a dois idiomas, por exemplo. Página 17 De 28

18 Aplicando as Regras no Editor As regras disponíveis podem ser aplicadas a parágrafos ou a partes selecionadas do texto. Existem restrições em alguns Navegadores quanto a aplicar as regras a uma parte selecionada. Veja Tópico Diferenças entre os Navegadores. Selecione o Texto ou posicione o cursor no parágrafo ao qual uma regra de estilo será aplicada. Com o texto selecionado, selecione a regra na Caixa de Escolha de Estilos A regra selecionada será aplicada à seleção. O estilo aplicado ao texto onde o cursor estiver posicionado será apresentado na Caixa de Escolha de Estilos. OU Quando uma regra é aplicada a um parágrafo, novos parágrafos, criados com o uso da tecla Enter, herdarão o estilo do parágrafo anterior. Assim, se ao primeiro parágrafo for aplicada uma regra de estilo, todos os demais parágrafos terão o mesmo estilo. Página 18 De 28

19 Utilização dos Recursos Editando o Código HTML Para acessar o Código HTML gerado pelo Editor openwysiwyg +3ST é preciso pressionar o botão O editor entrará no modo HTML e apresentará todo o código HTML gerado para o conteúdo. Se você for usuário experiente em codificação HTML, pode usar esse recurso para refinar a formatação, com recursos que o Editor não contempla. Quando utilizado o botão o editor o substitui por outro botão que permite que o Editor seja novamente apresentado no Modo Texto. Informações Importantes sobre o uso do Modo HTML: As alterações feitas diretamente no código HTML podem não ser editáveis no modo Texto. Por exemplo, algumas propriedades atribuídas a Tabelas ou Divisões podem não ser entendidas pelo Editor e as Caixas de Diálogo correspondentes. Neste caso, o retorno ou correção deve ser feita no modo HTML Enquanto no modo HTML nenhuma das funções de formatação e edição não funcionam e uma mensagem indicando isso será apresentada. O único botão ativo será o que permite o retorno ao modo Texto Utilização dos Recursos Aumentando o Tamanho da Área do Editor A janela do Editor, no modo completo, pode ser usada em dois tamanhos diferentes. O botão aumenta ou diminui o tamanho da janela. A definição dos dois tamanhos possíveis para o editor está no arquivo wysiwyg-settings.js localizado na pasta wysiwyg/scripts no ambiente onde o website que utiliza o Editor está instalado. Esses valores podem ser alterados utilizando-se um Editor de Texto comum. Os valores originais, desta distribuição são: Para a opção FULL full.width = "690px"; full.height = "380px"; full.maxwidth = "690"; full.maxheight = "533px"; Para a opção SMALL small.width = "646px"; small.height = "300px"; Os tamanhos máximos não são usados na opção SMALL Página 19 De 28

20 Utilização dos Recursos Salvando Documento Editado O Editor openwysiwyg +3ST apresenta o botão que permite solicitar que o Conteúdo seja Salvo. Como o Editor é totalmente em Javascript não foram desenvolvidos processos de atualização do conteúdo editado. O processo de salvamento portanto deve ser conduzido pelo programa que gerencia a página do Editor, seja em Asp.Net ou outro programa que seja executado no servidor do website. Quando o botão salvar é utilizado, duas variáveis na página (veja tópico Instalação Preparando o ambiente de processamento) são atualizadas. texttosave btsavedused - Conterá o conteúdo editado. Indicará com TRUE que foi solicitado salvar Utilizando esses dois campos seu programa de gerenciamento da página pode proceder com a inclusão ou atualização do conteúdo onde for apropriado. Utilização dos Recursos Carregando um documento no Editor Uma vez que o Editor 3ST+ wysiwyg é desenvolvido em Javascript, a carga de conteúdo deve ser efetuada pelo programa em Asp.Net ou outra programa que seja executado no servidor do website. Conforme explicado no tópico Instalação Preparando o ambiente de processamento, as variáveis abaixo devem ser atualizadas com o conteúdo a ser editado: vsworkingarea Deve ser atualizada com o conteúdo HTML a ser editado. rconteudotext - Deve ser atualizada, também, com o conteúdo HTML a ser editado. Página 20 De 28