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″).
10 Comentários até o momento
Deixe um comentário
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <pre> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
Eu tbm gostei mto dele, mas qdo usei ele não tinha suporte nativo para upload de imagem ao inseri-la no campo..
Comentário por Gustavo Junho 26, 2008 @ 11:54 amMas realmente ele é mto leve.
Olá gostaria de saber como carrego um arquivo txt ou html no openWYSIWYG para edita-lo
Comentário por João Janeiro 29, 2009 @ 10:36 amOlá, você pode usar o fgets:
$handle = @fopen("/tmp/arquivode.txt", "r");
Comentário por Rafael Clares Janeiro 29, 2009 @ 1:51 pmif ($handle) {
while (!feof($handle)) {
$buffer = fgets($handle, 4096);
echo $buffer;
}
fclose($handle);
}
Dê uma lida em:
http://br.php.net/fgets
abraços,
Óla testei o openWYSIWYG com a funcao mail() do php mais os email checam com erros quando coloco imagens junto com texto ou mais de uma imagem.
Comentário por andré Fevereiro 5, 2009 @ 6:53 pmComo posso resolver isso?
Vlw.
Ok,
André, a imagem que você coloca é uma imagem na internet ou de seu computador?
Para enviar por email o ideal é que seja uma imagem na internet, exemplo:
- img src=”http://clareslab.com.br/images/topo_logo.jpg”
Se for uma imagem de seu computador quando a pessoa abrir o email não verá a imagem, ex:
img src=”c:\images\foto.jpg” pois o caminho apontaria para o computador do usuário e nao o seu.
Qualquer coisa me avise ou mostre o código que está usando para envio.
Comentário por Rafael Clares Fevereiro 5, 2009 @ 10:48 pmaté mais,
Como recupero valor do banco de dados mysql para editar conteúdo no openwysiwyg ? Carregá-lo na textarea para cadastrar novo conteúdo consegui, mas pra editar informação, não consigo passar os dados do campo do mysql e recuperar no value da textarea que recebe a formatação do editor
Comentário por Eliseusb Fevereiro 22, 2009 @ 12:08 pmDesculpe a demora na resposta….carnaval…sabe como é …
Comentário por Rafael Clares Fevereiro 26, 2009 @ 3:52 pmEntão meu brother… realmente não fica no value do textarea até que a function updateTextArea(n)
do arquivo wysiwyg.js (na ultima linha) seja chamado. Então, você pode fazer a chamada a function no
botao salvar e depois submeter os dados… por ex:
updateTextArea(‘test1′)
agora o value possui o valor do editor , entao :
txt = document.forms[0].elements[0].value;
dai vc manda o valor da var txt por Post para o PHP.
Se não conseguir… me fala ae… abraços
Muito, muito bom o openWYSIWYG, aqui na minha maquina funcionou direitinho, gravou no banco, recuperei os dados editei…
Só tenho uma duvida, os atributos da tabela, não está funcionando, escolho um tipo de borda e nada. estou usando o IE 7.
Alguém mais teve este problema?
Comentário por Claudenir Julho 16, 2009 @ 12:04 pmFiz uns teste, de um html pronto que eu tenho, mas o mesmo está meio que “zuando” o código?? o que pode ser, eu queria um editor que fosse fiel algo código original, exemplo, uma pessoa cria tudo no Dreamweaver e joga o código no editor, gostaria que fica se da mesma forma, mas aqui esta quebrando, alguma sugestão, dicas…
Comentário por Roger Setembro 16, 2009 @ 8:25 pmOla Roger, boa noite!
Comentário por Rafael Clares Setembro 16, 2009 @ 11:01 pmSe puder definir melhor o “zuando” daí tento te ajudar.
até logo,