salvar e atualizar html e visualizar html

[androide]

Pessoal boa tarde, sou eu novamente.

Estou tentando salvar o conteudo do meu editor web que fiz em javascript, utilizei execcomand para "salvar como", até ai tudo bem, só que na hora de atualizar da erro, queria uma forma de salvar e atualizar num diretório padrão sem aparecer a janela de salvar como, o usuário inseri o nome da arte no imput text e depois clica em salvar ele salva num diretório padrão, exemplo. c:\\document\artes\[variavel].html

Outra coisa, quero fazer um botão para visualizar e editar o html dentro do iframe, como faço isso? :huh:

Segue o codigo do editor com o botão salvar e o iframe.

<input type="button" value="Salvar" onclick="salvar()"/> <?echo " "; ?>
	</br>
		<center>
		<iframe id="editor" frameborder="0" src="./ferramentas/editor.html" style=" border:1px solid; width: 510px; height: 350px"></iframe>
		</center>
	</td>

Segue o codigo javascript

function salvar()
{
    window.document.getElementById('editor').contentWindow.document.execCommand('SaveAs');
}

desde já agradeço sua atenção

[Rafael Laurindo]

Você quer fazer isso apenas utilizando javascript, ou poderia ser usando o PHP também? No último caso, você teria que estar com o Apache rodando em sua máquina. EU posso te ajudar em ambos, mas preciso saber qual você precisa.

Editado Dezembro 15, 2009 por Rafael Laurindo

[androide]

Você quer fazer isso apenas utilizando javascript, ou poderia ser usando o PHP também? No último caso, você teria que estar com o Apache rodando em sua máquina. EU posso te ajudar em ambos, mas preciso saber qual você precisa.

Melhor em javascript, pois todo o editor é em javascript, olhei nos tutoriais desse site e achei um codigo para visualizar o html da pagina que é o "window.location..."

só que não deu certo, aparece que a pagina não existe...

Qualquer dica que você possa dar Rafael será de grande ajuda.

Valeu

[Rafael Laurindo]

Meu camarada, eu to cassando pra fazer isso só em js, sei como pode fazer em PHP. Quanto ao location, a sintaxe é window.[local].location.href = arquivo

Deixa eu te explicar uma coisa. Eu sei porque aparece que o arquivo não existe, porque você ta colocando todo o endereco, sendo que não precisa. Por exemplo, se você tem o apache rodando em sua máquina, e o SO é Linux, pode ser que o diretório padrão do apache seja o /var/www, logo, se você der o comando localhost no navegador aparecerá tudo que contem nesse diretório. Portanto, se o arquivo que você quer chamar se encontra no diretório /var/www/teste para chamar esse arquivo seria assim window.self.location.href = /teste/arquivo.ext

Onde self significa no mesmo local e ext a extensão do arquivo. O self pode ser mudado, para um nome de um frame por exemplo, isso fará com que o arquivo seja aberto no frame que você definiu, funcionará do mesmo jeito. Mas como você pode ver esse comando é só para você redirecionar páginas.

Se tiver um server rodando em sua máquina me fale.

Editado Dezembro 15, 2009 por Rafael Laurindo

[androide]

Meu camarada, eu to cassando pra fazer isso só em js, sei como pode fazer em PHP. Quanto ao location, a sintaxe é window.[local].location.href = arquivo

Deixa eu te explicar uma coisa. Eu sei porque aparece que o arquivo não existe, porque você ta colocando todo o endereco, sendo que não precisa. Por exemplo, se você tem o apache rodando em sua máquina, e o SO é Linux, pode ser que o diretório padrão do apache seja o /var/www, logo, se você der o comando localhost no navegador aparecerá tudo que contem nesse diretório. Portanto, se o arquivo que você quer chamar se encontra no diretório /var/www/teste para chamar esse arquivo seria assim window.self.location.href = /teste/arquivo.ext

Onde self significa no mesmo local e ext a extensão do arquivo. O self pode ser mudado, para um nome de um frame por exemplo, isso fará com que o arquivo seja aberto no frame que você definiu, funcionará do mesmo jeito. Mas como você pode ver esse comando é só para você redirecionar páginas.

Se tiver um server rodando em sua máquina me fale.

sim tenho, utilizo wamp5, deixa eu ver se compreendi: como quero que o html apareça no iframe, então eu criu um botão ou um link

<input type="button" value="html" onclick="html_p()"/>

onde minha função htnl_p() terá os seguintes parametros:

function htnl_p(){
window.editor.location.href = /exercicios/editor_and/ferramentas/editor.html
}

pode ser dessa forma? :huh: se sim, esse comando me possibilita editar o html? :huh: tipo clicar no botão ou link, exibi o html, faz a alteração, clica novamente, exibi o resultado.

no caso de ser tudo em javascript seria o mais viável, mas para não te atrapalhar pode ser em php mesmo, eu tento adequar ao código. :rolleyes:

Editado Dezembro 15, 2009 por fercosmig
add tag's :: fercosmig

[Rafael Laurindo]

Sim, mas coloque aspas simples depois do "="

function htnl_p(){
window.editor.location.href = '/exercicios/editor_and/ferramentas/editor.html'
}

, eu ainda só não entendi uma coisa. Você quer editar o HTML e salva-lo editado, certo? O comando que te passei só vai abrir o seu arquivo "editor.html" no frame desejado. E é por isso que estou vendo como abrir um arquivo simples de texto em js bem como grava-lo.

Editado Dezembro 16, 2009 por Rafael Laurindo

[androide]

Fiz um teste, digitei um texto no editor e cliquei no botão e me retornou um documento em branco, se não estou enganado aquilo que eu edito está no id="editor"

do iframe e não no html editor.html, acho que esse comando tenta ir até o editor.html e retorna seu conteudo para o iframe, como o conteudo está em branco (só possui as tags <html><head> e <body>) ele retorna branco visto o que eu digitei está na variavel e não no editor.html. :blink: E ele não retornou o codigo fonte e sim o conteudo da pagina normal, fiz outro teste direcionando para editor_html.php que é o editor em si e ele rotornou o conteudo sem ser o codigo fonte.

Será que usando innerHTML resolve esse problema? já que ele exibe resultados em string sem atualizar a pagina? só não sei usá-lo nessa situação :wacko:

segue o codigo do editor

<input type="button" value="html" onclick="html_p()"/><?echo " "; ?>
    

    </br>
        <center>
        <iframe id="editor" frameborder="0" src="./ferramentas/editor.html" style=" border:1px solid; width: 510px; height: 350px"></iframe>
        </center>
    </td>

e do script

function html_p(){

window.editor.location.href = "/exercicios/editor_and/ferramentas/editor.html"

}

[Rafael Laurindo]

Mas era isso que eu tava tentando te explicar, ele exibe a página e não o código. Tenho uma notícia ruim e uma boa para lhe dar. A boa é que é possível fazer isso com o PHP, a ruim é que não é possível fazer com js, já pesquisei e ta confirmado. Quanto ao innerHTML ele insere um texto sim, nesse caso você vai fazer assim:

var elemento = document.getElementById(id_do_elemento)
elemento.innerHTML = 'seu texto';
//ou
elemento.value = 'seu texto';

Mas antes de escrever você tem que ler, e para ler é PHP, não tem outro jeito, eu garanto.

Editado Dezembro 15, 2009 por Rafael Laurindo

[androide]

Mas era isso que eu tava tentando te explicar, ele exibe a página e não o código. Tenho uma notícia ruim e uma boa para lhe dar. A boa é que é possível fazer isso com o PHP, a ruim é que não é possível fazer com js, já pesquisei e ta confirmado. Quanto ao innerHTML ele insere um texto sim, nesse caso você vai fazer assim:

var elemento = document.getElementById(id_do_elemento)
elemento.innerHTML = 'seu texto';

Mas antes de escrever você tem que ler, e para ler é PHP, não tem outro jeito, eu garanto.

Cara valeu mas como eu sou novato em javascript ainda não entendi. :wacko:

O elemento é a variavel criada para receber o conteudo da minha pagina, e o que coloco no "seu texto"?

estive pesquisando e descobri isso

window.editor.location ="view-source:"+ window.editor.location

só que tem algo de errado pois ele tenta procurar uma dll do ie, um tipo de protocolo e não faz nada só fica lendo

[Rafael Laurindo]

Esqueci de te falar isso, se você ta usando o IE e somente ele, tem como ler o código de um arquivo bem como edita-lo usando js, olhe isso.

http://www.experts-exchange.com/Web/Web_La...Q_20837002.html

http://www.activewidgets.com/javascript.fo...-text-file.html

[androide]

Beleza, valeu!!!

Só que eu não entendi o codigo, e como posso utilizá-lo no meu editor para visualizar o code.

Pelo que vi ele cria um objeto "Scripting.FileSystemObject"

e um arquivo de texto no diretório C

s = fso.CreateFolder("C:\\test.txt", true);
depois inseri um texto e valida
 s.writeline("This is a test");
    s.Close();
  }
 catch(err){
   var strErr = 'Error:';
   strErr += '\nNumber:' + err.number;
   strErr += '\nDescription:' + err.description;
   document.write(strErr);
  }
  
  }

fiz um teste e pra mim retornou erro!!!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE></TITLE>
<META content="text/html; charset=windows-1252" http-equiv=Content-Type>
<META name=GENERATOR content="MSHTML 8.00.6001.18828">
<script type="text/javascript">
function WriteToFile() {
  try {
    var fso, s;
    fso = new ActiveXObject("Scripting.FileSystemObject");
    s = fso.CreateFolder("C:\\test.txt", true);
    s.writeline("This is a test");
    s.Close();
  }
 catch(err){
   var strErr = 'Error:';
   strErr += '\nNumber:' + err.number;
   strErr += '\nDescription:' + err.description;
   document.write(strErr);
  }
  
  }
</script>

</HEAD>
<BODY bgColor=#666666>

<a href="#" onclick="WriteToFile()">Clique aqui</a>
<P><FONT color=#33ff66>adçflakdçfakçdflkaçdlfkaçdlfa</FONT></P>
<P><FONT color=#33ff66>açlfkçaldfkçaldkfaçldfkç</FONT></P></BODY></HTML>

se caso for mais fácil em php fazer essas mudanças, por favor me diga como, pois andamos e andamos e voltamos por começo.

[Rafael Laurindo]

Rs, eu vo te dizer como sim, espera só eu terminar de programar o script de exemplo aqui porque eu to indo pra faculdade, mais tarde eu volto, se eu n te entregar hj eu te entrego amanhã, pode deixar que eu n vo t deixar na mão n. Um abraço. E quanto ao código anterior postado, eu n poderei ajudar porque eu uso o Linux e n existe IE para o Linux.

Editado Dezembro 15, 2009 por Rafael Laurindo

[androide]

Rs, eu vo te dizer como sim, espera só eu terminar de programar o script de exemplo aqui porque eu to indo pra faculdade, mais tarde eu volto, se eu n te entregar hj eu te entrego amanhã, pode deixar que eu n vo t deixar na mão n. Um abraço. E quanto ao código anterior postado, eu n poderei ajudar porque eu uso o Linux e n existe IE para o Linux.

Valeu amigo :rolleyes:

também estou pesquisando outras formas de salvar, atualizar o html e visualizar e atualizar o codigo fonte.

[androide]

esqueceram de mim!!! :o

[Rafael Laurindo]

Não esqueci n, eu to terminando de programar ainda, você n tem noção como foi meio complicado véio. Ta quase pronto, ta dando um errinho aki.

Editado Dezembro 17, 2009 por Rafael Laurindo

[androide]

Ok desculpe-me pela agitação!

É verdade, eu pesquisando, mais me deu dor de cabeça do que nunca!!!

No php tem um comando chamado fopen que consegue abrir infinidades de documentos desde txt até o próprio php, e filiado com o comando htmlspecialchars que consegue mostrar o codigo fonte da pagina aberta, até ai legal, mas pesquisando sobre como abrir este documento no iframe, se acha pouca coisa relacionada, uma dessas pesquisas que me chamou a atenção foi poder abrir um documento txt no iframe desta forma:

<iframe rsc="c:\document.txt"></iframe>

mas se eu fizer isso matará todas as funções dos outros botões como colocar em negrito, sublinhado, itálico, cor, tipo, tamanho da fonte e etc.

só se tiver um cheito de colocar uma condiciona "se" dentro do rsc, tipo:

<iframe rsc='<?php if (o click do botão for true){ então camhino do Texto}else{caminho do html} ?>'>

é mais ou menos isso mais acho que vai ficar mais complicado ainda do que você está fazendo.

Editado Dezembro 17, 2009 por androide

[Rafael Laurindo]

Exato, por isso eu to tentando fazer exatamente o que você falou mas num objeto tipo textarea do HTML. E vou conseguir, pode crer, falta só gravar, porque eu já faço ele ser aberto no textarea, só to pegando um modo de pegar do textarea e salvar novamente nesse arquivo, sacou. TO tentando usar o Ajax, pois n quero que a página seja redirecionada, entende, aew vai ficar mais dinâmica, de outro jeito eu já fiz, se você quiser te mando. Eu gostei da sua idéia, gostei mesmo, por isso pesquisei bastante.

[androide]

Valeu cara, pode crer que quando chegaros a um veredicto final, esse tópico será o mais visitado de todos, pois algo desse tipo é dificil de encontrar por ai!!

muito obrigado pela força. ;)

Mais uma coisa, 1:17 da manhã!!!! não dorme não!!!!rsrsrsrs!!!! :lol: :lol: :lol:

[Rafael Laurindo]

Véio, essa é a hora que eu estudo, pois é a hora que tenho mais paz sacou? ;) To estudando ajax por causa da sua idéia, e aplicarei no meu projeto final da faculdade.

Editado Dezembro 21, 2009 por Rafael Laurindo

[androide]

Rafael,

Como você já tem uma boa parte do script quase pronto, me passe o que você tem e eu vou já testando e tentando te ajudar daqui... :blush:

[Rafael Laurindo]

Você sabe mexer um pouco com o PHP, ajuda. Eu usei dois scripts php, um é uma classe, o outro é para controlar essa classe, a classe é como se fosse uma lib(library - biblioteca).

fileIndex.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Web Eclipse - version 1.0</title>
</head>
<body>
<form name="forma" method="POST" onsubmit=""><!-- action='fileIndex.php' -->
	<!--colocar o nome do arquivo com o diretório-->
<center>
	<input type="text" name="txtFile" /><br/><br/>
	<textarea cols='117' rows='29' name='txtCode' id='txtCode'/></textarea><br/>	
	<br/><input type="Button" name="btnCarregar" value="Carregar" onclick=""/>
	<input type="submit" name="btnSalvar" value="Salvar"/>	
</center>
	<!--
	-->
</form>
</body>
</html>

File.php

<?php

class File{
    public static $handle = NULL;
    
    public function createPointer($file){
        //abri o arquivo do servidor para leitura e cria o ponteiro
        self::$handle = fopen($file, "r+");
        //ao usar o o r+ é possível com um mesmo ponteiro ler e gravar um texto no arquivo?
        if (!self::$handle){
            echo " 
                <script type=text/javascript>
                    alert('Arquivo ou diretório não encontrado')                    
                </script>
            ";//window.self.location.href('');
        }
    }
    
    public function readFile($file){
        $this->createPointer($file);        
        return fread(self::$handle, 10000);
    }
    
    public function writeToFile($txt){
        //var_dump(self::$handle);
        //escreve no arquivo    
        fwrite (self::$handle, $txt);
        //fecha o ponteiro
        fclose (self::$handle);/**/
    }
}

fileIndex.php

<?php

require_once 'File.php';

//isso faz com que a classe não seja reinstanciada e consequentemente, reinicialize o ponteiro
if(!class_exists('File')){
    $file = new File();
}

if($_POST['btnSalvar'] != NULL){
    $file->writeToFile($_POST['txtCode']);
}
else if ($_POST['btnCarregar'] != NULL){
    $file->readFile($_POST['txtFile']);
    //$file->createHTML();
}

A idéia é, abrir o arquivo informado no campo de texto no textarea, sem dar refresh na página, sacou?

Editado Dezembro 21, 2009 por Rafael Laurindo

[androide]

Ok Rafael,

Obrigado pela ajuda, vou tentar por aqui, testando o que já fiz e incluindo o código que me passou.

qualquer coisa eu do um help.

[androide]

Rafael pegando a sua idéia do textarea, consegui exibir o codigo fonte pelo javascript!!!! :lol:

Utilizei o innerHTML para subistituir o iframe pelo textarea através do id de um div que inseri no codigo e dentro dele coloquei o iframe.

o codigo html ficou assim:

<input type="button" id="html" onclick="html()" value="html"/>
<?echo " "; ?>


	</br>
		<center>
		<div id="teste" style="color:#00FF00">
		<iframe id="editor" frameborder="0" src="./ferramentas/editor.html" style=" border:1px solid; width: 510px; height: 350px"></iframe>	
		</div>
		</center>

o codigo javascript ficou assim:

function html(){
conteudo = document.getElementsByTagName('iframe')[0];
document.getElementById('teste').innerHTML = "<TEXTAREA cols='60' rows='20' ID='editor'>" + conteudo.contentWindow.document.body.innerHTML; + "</TEXTAREA>";

}

Pelo javascript ficou mais fácil do que pelo php, o santo "innerHTML" altera o conteudo sem atualizar a pagina!!! ^_^

se digitar dentro do iframe sem colocar em negrito, italico, etc... ele não mostra as tags só o texto, mas se fizer alguma alteração no texto como fonte, estilo e cor ele mostra corretamente!!!

Só que ainda não estou satisfeito eu queria exibir o conteudo da página por inteiro :closedeyes:

Se tiver algum jeito pelo innerHTML mostrar todo o html não só do body será de grande ajuda :huh:

Agora só falta fazer com que ao clicar no botão novamente exibe o iframe denovo mais isso eu acho que resolvo.

Só falta a questão de salvar o conteudo. :rolleyes:

[androide]

Pessoal estou tentando fazer com que o botão html exiba o codigo fonte do html, e ao clicar novamente retorna para o iframe, segue o codigo que está dando erro:

function html(){
if(document.getElementsByTagName('iframe')!= null){
conteudo = document.getElementsByTagName('iframe')[0];
document.getElementById('teste').innerHTML = "<TEXTAREA cols='60' rows='20' ID='editor'>" + conteudo.contentWindow.document.body.innerHTML; + "</TEXTAREA>";
 }else{
conteudo = document.getElementsByTagName('TEXTAREA');
document.getElementById('teste').innerHTML = "<iframe id='editor' frameborder='0' src='./ferramentas/editor.html' style=' border:1px solid; width: 510px; height: 350px'></iframe>";

 }
}

se alguém puder me ajudar estarei agradecido, valeu!!!

[androide]

Pessoal cheguei nesse ponto:

var comparativo = 1;

function html(){

if (comparativo == 1){
comparativo = 2;
conteudo = document.getElementsByTagName('iframe')[0];
document.getElementById('teste').innerHTML = "<TEXTAREA cols='60' rows='20' ID='editor_html'>" + conteudo.contentWindow.document.body.innerHTML; + "</TEXTAREA>";
}else{
comparativo = 1;



document.getElementById('teste').innerHTML = "<iframe id='editor' frameborder='0' src='java script:'"+ atribuir(); + "'' style=' border:1px solid; width: 510px; height: 350px'></iframe>";
}
}

function atribuir(){

html = "<html><head></head><body>"+ editor_html.value; +"</body></html>";
document.write(html);

}

Só que quando clico no botão novamente ele retorna o valor do textarea certo, só que atualiza a pagina toda!!! :huh:

E aparece essa "informação Linha: 172

Erro: Permissão negada" no meu navegador.

Editado Dezembro 22, 2009 por Jonathan Queiroz
Adicionar tag's (Jonathan)

[Rafael Laurindo]

Meu amigão, o document.write sempre o redicionará para outra página, pois ele insere um texto no final do seu arquivo HTML. Deixa eu te perguntar, você descobriu como extrair o código fonte de alguma forma?

Editado Dezembro 23, 2009 por Rafael Laurindo