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”).
Eu tbm gostei mto dele, mas qdo usei ele não tinha suporte nativo para upload de imagem ao inseri-la no campo..
Mas realmente ele é mto leve.
Olá gostaria de saber como carrego um arquivo txt ou html no openWYSIWYG para edita-lo
Olá, você pode usar o fgets:
$handle = @fopen("/tmp/arquivode.txt", "r");
if ($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.
Como 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:imagesfoto.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.
até 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
Desculpe a demora na resposta….carnaval…sabe como é …
Entã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
Olá amigo, depois de muito tempo voltei para conferir o blog e essa matéria, já tive experiências fantásticas depois que conheci esse editor, dentre vários outros inclusive o CKEditor, o sucessor do FCKEditor, que também vale a pena conferir.
Obrigado pela ajuda e atenção, feliz 2010.
Rafael, eu não estou conseguindo capturar o texto formatado no editor e inserir de volta no BD, é quase o inverso do que o Eliseusb postou, tem como eu referenciar uma variavel de uma maneira simples?
Edson, não conheço uma forma mais simples que essa;
Talvez o nome esteja incorreto em um ou outro arquivo.
Verifique o name do textarea e no $_POST; Isso não tem como sair errado.
Qualquer coisa coloca seu código no pasteBin
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?
Será que seu código não está sendo influenciado pela folha de estilo do site ? Na hora que você exibe a informação cadastrada a mesma é formatada pela folha padrão do site ou estilização da página. Checa isso
Fiz 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…
Ola Roger, boa noite!
Se puder definir melhor o “zuando” daí tento te ajudar.
até logo,
Estou usando esse modelo para um blog, mas quando posto imagens elas aparecem com o erro:
o código para gravar na DB é o seguinte:
$form[‘conteudo’] = str_replace( ‘\r\n’, “\n”, DBEscape( trim( $_POST[‘conteudo’] ) ));
o código do textarea:
\”NOMEDAFOTO\”