Exemplo bem simples de utilização do openWYSIWYG
Precisei criar um pequeno programa na área administrativa de um site para que o usuário/administrador pudesse inserir conteúdos de texto, algo simples como informações de eventos e outras coisas do genêro, mas não dava para apenas criar um textarea onde ele pudesse digitar o que quisesse, era preciso texto formatado e figuras.
A solução foi utilizar um editor em HTML (html+js) onde é simulado um editor de texto com uma gama muito grande de opções como cores, tabelas, links, imagens e etc…
Testei alguns deles e realmente são surpreendentes, alguns possuem opções de estilos como por ex: office 2003 e 2007, estilos simples e até customizados.
Testei o OpenWySiwyg, TinyMCE, FCKeditor e Free RichText Editor, ao final dos testes confesso que os que tinham as melhores aparências e estilos não eram os melhores, ao menos para o que eu precisava (algo simples, eficiente e se possível rápido). Minha escolha foi o OpenWySiwyg e o por motivos simples:
1 – O código JavaScript de fácil (muito fácil) compreensão
2 – Facilidade enorme de personalizar.
3 – Extrema simplicidade para traduzir para nosso idioma.
4 – Rápido para carregar as imagens do editor (testes on-line).
5 – O estilo básico dele é muito bonito não havendo necessidade de styles adicionais.
6 – É grátis !!!
O único ponto fraco que encontrei no openWYSIWYG em relação ao que eu precisava foi a paleta de cores que é exibida em pop diferente dos demais que exibem em um (provavelmente div) elemento HTML . Posteriormente tentarei alterar esse trecho do código e se houver algum sucesso nisso, postarei aqui!
Então vamos começar baixando o openwysiwyg:
http://www.openwebware.com/products/openwysiwyg/
Aproveite e veja a demo em:
http://www.openwebware.com/products/openwysiwyg/demo.shtml
Bem, agora descompacte o arquivo e perceba que a estrutura dos diretórios (na versão que baixei) é assim:
- icons (diretório)
- popups (diretório)
- styles (diretório)
- wysiwyg.js (arquivo)
Você verá que existe (claro) um arquivo html de exemplo teste-o antes de continuar.
O arquivo index.html
<html>
<head>
<title>Teste</title>
<script type=”text/javascript” src=”wysiwyg.js“></script>
<body>
<form name=”formedit” method=”post” action=”gravar.php“>
<textarea id=”test1” name=”test1“></textarea>
<input type=”submit” value=”gravar“>
</form>
<script type=”text/javascript”>generate_wysiwyg(‘test1′);</script>
</body>
</html>
Arquivo gravar.php
<?
#conexao com banco de dados
$con = @pg_connect(“dados para conexao com banco”)
or die (“<p>Erro ao conectar-se ao banco.</p>”);
if(isset($_POST['test1'])){
#recupera o valor vindo do form
$texto = $_POST['test1'];
#inserindo os dados na tabela
$query = @pg_query(“insert into paginas values (nextval(‘pagina_seq’),’”.$texto.”‘)”);
if($query){
echo “<p>gravado com sucesso!</p>”;
}
else{
echo “<p>Erro ao gravar!</p>”;
}
}
?>
Na aplicação que utilizei eu troquei o método do formulário de POST para GET e criei uma função JS para autosalvar o documento. Utilizei requisições xmlHttp (ajax) que recupera o valor do textarea a cada 1 minuto (método setInterval do JS) e faz um update no registro do banco, não disponibilizei aqui pq era algo muito específico e eu precisaria alterar muita coisa, acreditei ser mais fácil mostrar o caminho e vocês trilharem ele.
Minha intenção neste post não é ensinar classes PHP ou identação de código, pelo menos não nesse Post. Quero dizer que estou apenas lhe falando que existe a ferramenta e que ela é muito útil se você pensar em um CMS ou qualquer aplicação que possibilite o usuário inserir conteúdo com imagens e formatação.
Agora, o que você pode fazer ?
- Você pode criar uma classe com métodos para gravar, ler, editar e apagar…
Ex: de uma Classe
Class Documentos{
public $texto;
public $pagina;
function __construct(){
}
function inserirPagina(){
#instrucoes para inserir no bd
}
function lerPagina($idPagina){
#instrucoes para ler um dado registro
}
function editarPagina($idPagina){
#instrucoes para atualizar um registro no bd
}
function deletarPagina($idPagina){
#instrucoes para remover um registro no bd
}
}
Dicas:
Se você quiser mudar o nome dos botões e controles do editor openwysiwyg, altere no arquivo wysiwyg.js após a linha 129 a terceira coluna descrita como “buttonTitle“.
Para utilizar com Ajax, você notará que não consegue recuperar o valor do textarea através de métodos convencionais como document.nomeFormulario.nomeTextarea.value, isso ocorre pq quando estamos escrevendo no campo do editor que é um textarea o valor é mantido em outro campo, para atualizar o valor do textarea no caso do ex. acima chama-se test1 você precisará utilizar um método javascript que está no arquivo wysiwyg.js, o método chama-se updateTextArea() . Para isso você deve passar o nome do seu textarea no nosso caso ficaria assim updateTextArea(“test1″).
