[Resolvido] CKEditor + AJAX

Videres · Novembro 6, 2012

Alguém sabe me dizer o por que de, quando carrego minha pagina em ajax que possui um formulario, não consigo exibir a barra de ferramenta do CKEditor na tag textarea?

Exemplo1:

Estou chamando os plugins dessa maneira:

<script  type="text/javascript" src="ckeditor.js"></script>

E chamando na tag textArea da seguinte forma:

<textarea class="ckeditor"  rows="30" cols="120" name="editor1" id="editor1"  >Teste teste teste</textarea>

Exemplo2:

Também testei assim:

<script  type="text/javascript" src="ckeditor.js"></script>

<script  type="text/javascript" src="adapters/jquery.js"></script>

Assim até funciona, mas...

Por algum motivo a barra de ferramentas aparece toda desconfigurada como exibido abaixo:

Quando na verdade gostaria q exibisse dessa maneira:

Porém, como vcs podem notar a formatação da pagina fica ruim, pq abri a pagina diretamente, sem ser por ajax.

Se alguém puder me dar uma LUZ, pra que a barra de ferramenta possa ser exibida com a pag carregada com ajax, sem que eu precise ter q mudar a estrutura do meu projeto, pra criar paginas dinâmicas com php, fico muito agradecido!

*Lembrando que no primeiro exemplo, n consigo exibir a barra de ferramentas

Vlws

William Bruno · Novembro 6, 2012

como você faz o seu ajax ?

Videres · Novembro 6, 2012

como você faz o seu ajax ?

Dessa maneira:

ajax.js

/**
*
* Objeto literal Ajax. Documentacao completa disponivel em: 
* http://code.google.com/p/jscomponentes/wiki/Ajax
*
* Ajax.js
* http://jscomponentes.googlecode.com/svn/trunk/Ajax/js/Ajax/Ajax.js
* @author: Edy Segura - edy@segura.pro.br
*
*/



function GetXMLHttp() {
if(window.XMLHttpRequest){
               return new XMLHttpRequest();
       }else if(window.ActiveXObject){

               var prefixes = ["MSXML2", "Microsoft", "MSXML", "MSXML3"];
               for(var i = 0; i < prefixes.length; i++){
                       try     {
                               return new ActiveXObject(prefixes[i] + ".XMLHTTP");
                       } catch (e) {}
               }

       }

}



var xmlRequest = GetXMLHttp();
if (CKEDITOR.instances.rodape_user){
delete CKEDITOR.instances.rodape_user;
CKEDITOR.replace( 'rodape_user',{ height:'100'} );
} else{
CKEDITOR.replace( 'rodape_user',{ height:'100'} );
}

instrucao.js

function extraiScript(texto){
       // inicializa o inicio ><

var ini = 0;
// loop enquanto achar um script
while (ini!=-1){
		// procura uma tag de script

		ini = texto.indexOf('<script', ini);
		// se encontrar
		if (ini >=0){

				// define o inicio para depois do fechamento dessa tag
				ini = texto.indexOf('>', ini) + 1;
				// procura o final do script
				var fim = texto.indexOf('</script>', ini);
				// extrai apenas o script
				codigo = texto.substring(ini,fim);
				// executa o script
				eval(codigo);
		}
}

}


function abrirPag(valor){
       var url = valor;

       xmlRequest.open("GET",url,true);
	//alert("TESTANDO ENDERECO abrirPag-> "+url);
	xmlRequest.onreadystatechange = mudancaEstado;
       xmlRequest.send(null);


	//window.location = "index_v2.php#"+ url;
       return url;

}

function mudancaEstado(){
      	if (xmlRequest.readyState == 4){
		texto=unescape(xmlRequest.responseText.replace(/\+/g," "));
		//alert("MudancaoEstado TEXTO ->"+xmlRequest.responseText);
       	document.getElementById("corpo").innerHTML = xmlRequest.responseText;
		//newTag();
		extraiScript(texto);


       }

	xmlRequest.send( null );
}


function id( el ){
       return document.getElementById( el );
}

function pega_arq( url2 ){

var file = url2.split('#');

//alert("TESTANDO ENDERECO-> "+location.href);
return ( file[1] ) ? file[1] : 'php/home.php';
}

Pronto, acredito que você vá s familiarizar muito com esse codigo, uma boa parte dele foi baseado em teus exemplos.

S puder me dar uma força fico muito agradecido William.

Vlws \o..

William Bruno · Novembro 6, 2012

legal Videres.

Cara, faz o seguinte.

Esse trecho vai virar uma função:

function startEditor(){
       if (CKEDITOR.instances.rodape_user){
               delete CKEDITOR.instances.rodape_user;
               CKEDITOR.replace( 'rodape_user',{ height:'100'} );
       } else{
               CKEDITOR.replace( 'rodape_user',{ height:'100'} );
       }
}

e aqui que é onde você insere o retorno do ajax, você vai chamar tb o editor:

document.getElementById("corpo").innerHTML = xmlRequest.responseText;
startEditor();//invocando o editor

Veja se funciona agora.

Videres · Novembro 6, 2012

Fiz como tu sugeriu William, mas n funfou.

Deixa te mostrar o codigo, pra você ver se fiz alguma coisa de errado:

Inseri a função como você sugeriu no codigo ajax:

--> function startEditor(){
       if (CKEDITOR.instances.rodape_user){
               delete CKEDITOR.instances.rodape_user;
               CKEDITOR.replace( 'rodape_user',{ height:'100'} );
       } else{
               CKEDITOR.replace( 'rodape_user',{ height:'100'} );
       }
}

Inseri a chamada da função startEditor();

function mudancaEstado(){
      	if (xmlRequest.readyState == 4){
		texto=unescape(xmlRequest.responseText.replace(/\+/g," "));
		//alert("MudancaoEstado TEXTO ->"+xmlRequest.responseText);
       	document.getElementById("corpo").innerHTML = xmlRequest.responseText;

                  -->startEditor();
		//newTag();
		extraiScript(texto);


       }

	xmlRequest.send( null );
}

Deixa te mostrar o codigo da pag do form também:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <link rel="icon" href="images/favicon.ico" type="image/x-icon" />
   <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   <title>EAD - Educação a Distância</title>
   <link href="../../../css/estilo.css" rel="stylesheet" type="text/css" />
	<script  type="text/javascript" src="ckeditor.js"></script>



</head>

<body>

<div id="contentBloc">



       <div id="titleBloc_lay2">Notícias</div>

       <div id="ptSupBloc">
           <img class="pt_SupEsquerda" src="imagens_v2_site/caixa_content_page/bloc_pt_sup_esq.png" />
           <img class="pt_Cima" src="imagens_v2_site/caixa_content_page/bloc_pt_cima.png" />
           <img class="pt_SupDireita" src="imagens_v2_site/caixa_content_page/bloc_pt_sup_dir.png" />
       </div>   

       <div id="ptCentBloc">

           <h3 class='titleNot'><img src='imagens_v2_site/marcadorSubTitulo.png' /> Licenciatura em Pedagogia</h3>
           </p>

           <form id="formNot" name="formNot" method="post" action"php/Cursos/lic_pedagogia/realiza_editar_cursoPedag.php"   >

               <fieldset>








                   <label for="nome" id="campoTitulo" ><br /> Título 1:</label>
                   <input type="text" name="nome" id="nome"  size="80" maxlength="200" value=""/>



                   <p>
                       <label for="editor1" id="campoTexto" ><br />Texto:</label>

                       <textarea class="ckeditor"  rows="30" cols="120" name="editor1" id="editor1"  >TESTATeste teste teste hau hau hau hau</textarea>

                  </p>



               </fieldset>

                       <input type="submit" name="enviar" id="enviar" value="Atualizar" class="btnNot" />

           </form>



       </div>
       <div id="ptInfBloc">
           <img class="pt_InfEsquerda" src="imagens_v2_site/caixa_content_page/bloc_pt_inf_esq.png" />
           <img class="pt_Baixo" src="imagens_v2_site/caixa_content_page/bloc_pt_baixo.png" />
           <img class="pt_InfDireita" src="imagens_v2_site/caixa_content_page/bloc_pt_inf_dir.png" /> 
       </div>

   </div>

</body>

</html>

Ver oq tu acha*

brigadão pela ajuda!

William Bruno · Novembro 6, 2012

ok, faz o seguinte agora.

Pega essa tag script:

e coloca na página que já tá carregada. Eu não confio e nem indico esses "extraiScript".

Acompanhe o console de erros Ctrl+Shift+J no Firefox, e me diga se teve algum erro lá qndo você carregou por ajax a página do form(caso o editor não aparecer)

Videres · Novembro 7, 2012

ok, faz o seguinte agora.

Pega essa tag script:

<script type="text/javascript" src="ckeditor.js"></script>

e coloca na página que já tá carregada. Eu não confio e nem indico esses "extraiScript".

Acompanhe o console de erros Ctrl+Shift+J no Firefox, e me diga se teve algum erro lá qndo você carregou por ajax a página do form(caso o editor não aparecer)

Eae William,

Ontem n deu para responder...

Em relação ao Script, já tinha inserido na pag index.php principal, coloquei nessa pagina pra testar mesmo.

Fiz oq tu me sugeriu no fireFOx e realmente apareceram 3 erros referente ao plugin saca só:

Mensagem ERRO 1:

Erro: ReferenceError: CKEDITOR is not defined
Arquivo-fonte: http://localhost/siteTeste/Scripts/ajax.js
Linha: 31

cod:

30 function startEditor(){
31        if (CKEDITOR.instances.rodape_user){
32               delete CKEDITOR.instances.rodape_user;
33               CKEDITOR.replace( 'rodape_user',{ height:'100'} );
34        } else{
35                CKEDITOR.replace( 'rodape_user',{ height:'100'} );
36        }
37 }

Mensagem ERRO 2 (*Obs.: Esse erro aparece 2x):

Hora: 07/11/2012 08:28:08
Erro: NS_ERROR_NOT_INITIALIZED: Component not initialized
Arquivo-fonte: http://localhost/siteTeste/Scripts/instrucao.js
Linha: 69

Cod:

57 function mudancaEstado(){
58       	if (xmlRequest.readyState == 4){
59			texto=unescape(xmlRequest.responseText.replace(/\+/g," "));
60			//alert("MudancaoEstado TEXTO ->"+xmlRequest.responseText);
61        	document.getElementById("corpo").innerHTML = xmlRequest.responseText;
62			startEditor();
63			//newTag();
64			extraiScript(texto);
65			
66			
67       }
68		
69		xmlRequest.send( null );
70 }

Mensagem ERRO 3:

Hora: 07/11/2012 09:41:40
Erro: uncaught exception: [CKEDITOR.editor.replace] The element with id or name "rodape_user" was not found.

Vlws pela ajuda e dica do FireFox, tinha me esquecido desse recurso q ele oferece.. caso encontre algo posto aqui!

abraço

William Bruno · Novembro 7, 2012

uê, e quem é o elemento com id="rodape_user" ??

nesse html que você postou, não existe esse elemento.

Videres · Novembro 7, 2012

uê, e quem é o elemento com id="rodape_user" ??

nesse html que você postou, não existe esse elemento.

Tem RAZÃO!!

Coloquei o id="editor1" q s encontra na tag textarea, sendo q apresentou os mesmos 3 erros e + um monte de erros, porém agora exibe a barra de ferramenta do jeito q mostrei acima, desconfiguradas.

Ex.:

Novos Codigos de erros:

Erro1:

Hora: 07/11/2012 10:17:40
Erro: TypeError: $(".ckeditor").ckeditor is not a function
Arquivo-fonte: http://localhost/ead2012/Scripts/instrucao.js
Linha: 29

Erros diversos relacionados a esse codigo:

Hora: 07/11/2012 10:03:27
Alerta: Propriedade desconhecida “-moz-border-radius”.  Declaração ignorada.
Arquivo-fonte: http://localhost/siteTese/skins/kama/editor.css?t=C9A85WF
Linha: 6

Agora a bronca é no plugin, mas n entendo o pq ele ta ignorando todas as acoes do CSS das SKIN, ja ate importei o plugin na pagina inicial e n tive resultado.

Vlws vou dar uma olhada!

William Bruno · Novembro 7, 2012

sim, você tem q deixar todo o css e js do plugin na página inicial.

Como ficou o teu código agora ?

está disparando da forma que eu mostrei ? logo depois de incluir o ajax na página ?

Videres · Novembro 7, 2012

sim, você tem q deixar todo o css e js do plugin na página inicial.

Como ficou o teu código agora ?

está disparando da forma que eu mostrei ? logo depois de incluir o ajax na página ?

Agora os erros dispara da seguinte forma:

Hora: 07/11/2012 11:06:49
Alerta: Propriedade desconhecida “-moz-border-radius”.  Declaração ignorada.
Arquivo-fonte: http://localhost/ead2012/skins/kama/dialog.css
Linha: 19

Hora: 07/11/2012 11:06:49
Alerta: Propriedade desconhecida “-moz-border-radius-topleft”.  Declaração ignorada.
Arquivo-fonte: http://localhost/ead2012/skins/kama/dialog.css
Linha: 51

Hora: 07/11/2012 11:06:49
Alerta: Propriedade desconhecida “-moz-border-radius-topright”.  Declaração ignorada.
Arquivo-fonte: http://localhost/ead2012/skins/kama/dialog.css
Linha: 52

.....

Uma porrada de erro relacionado ao plugin.

Na minha pag index principal ja importei os plugins e css das skin:

import CSS

<link href="skins/kama/editor.css" type="text/css" rel="stylesheet" />
<link href="skins/kama/dialog.css" type="text/css" rel="stylesheet" />
<link href="skins/kama/templates.css" type="text/css" rel="stylesheet" />

import JS

<script  type="text/javascript" src="ckeditor.js"></script>
<script  type="text/javascript" src="adapters/jquery.js"></script>
<script  type="text/javascript" src="skins/kama/skin.js"></script>

Em seguida aprece os 3 erros dado a cima +1 :

Hora: 07/11/2012 11:06:49
Erro: ReferenceError: CKEDITOR is not defined
Arquivo-fonte: http://localhost/ead2012/Scripts/ajax.js
Linha: 31

Hora: 07/11/2012 11:06:49
Erro: NS_ERROR_NOT_INITIALIZED: Component not initialized
Arquivo-fonte: http://localhost/ead2012/Scripts/instrucao.js
Linha: 69

*Ess codigo ele dar 2 erros repetidos.

Hora: 07/11/2012 11:06:50
Erro: uncaught exception: [CKEDITOR.editor] The instance "editor1" already exists.

talvez eu n tenha entendido direito como funciona instancia, estou ate dando uma olhada.

Lembrando q a barra esta até sendo exibida + desconfigurada.

O codigo Ajax tentei colocar assim:

function startEditor(){
       if (CKEDITOR.instances.editor1){
               delete CKEDITOR.instances.editor1;
               CKEDITOR.replace( 'editor1',{

				height:'200',
				width:'400',
				toolbar :
				[
				['Undo','Redo'],
				['Find','Replace','-','SelectAll','RemoveFormat'],
				['Link', 'Unlink', 'Image'],
				'/',
				['FontSize', 'Bold', 'Italic','Underline'],
				['NumberedList','BulletedList','-','Blockquote'],
				['TextColor', '-', 'Smiley','SpecialChar', '-', 'Maximize']
				],

			});
       } else{


			CKEDITOR.replace( 'editor1',{

				height:'200',
				width:'400',
				toolbar :
				[
				['Undo','Redo'],
				['Find','Replace','-','SelectAll','RemoveFormat'],
				['Link', 'Unlink', 'Image'],
				'/',
				['FontSize', 'Bold', 'Italic','Underline'],
				['NumberedList','BulletedList','-','Blockquote'],
				['TextColor', '-', 'Smiley','SpecialChar', '-', 'Maximize']
				],

			});
       }
}

Eu n sei o pq dos erros das skin -> Declaracao ignorada

Que esta dando no inicio e depois desses 4 erros a cima.

Vou continuar dando uma olhada.

qualquer coisa posto aqui.. Vlws pela força!

William Bruno · Novembro 7, 2012

os erros de css você pode ignorar.

mas pq esse código duplicado ?

deixe apenas:

function startEditor(){
                              CKEDITOR.replace( 'editor1',{

                                       height:'200',
                                       width:'400',
                                       toolbar :
                                       [
                                       ['Undo','Redo'],
                                       ['Find','Replace','-','SelectAll','RemoveFormat'],
                                       ['Link', 'Unlink', 'Image'],
                                       '/',
                                       ['FontSize', 'Bold', 'Italic','Underline'],
                                       ['NumberedList','BulletedList','-','Blockquote'],
                                       ['TextColor', '-', 'Smiley','SpecialChar', '-', 'Maximize']
                                       ],

                               });
}

e só.

Videres · Novembro 7, 2012

Ainda continua dando esses 2 erros:

ess da 2x:

Hora: 07/11/2012 12:09:38
Erro: NS_ERROR_NOT_INITIALIZED: Component not initialized
Arquivo-fonte: http://localhost/ead2012/Scripts/instrucao.js
Linha: 69

Hora: 07/11/2012 12:09:38
Erro: uncaught exception: [CKEDITOR.editor] The instance "editor1" already exists.

Estou comecando a achar q esta faltando carregar algum plugin.

N entendo o pq desse ultimo erro...

Sera q a bronca esta relacionado a instancia?

Vou tentar dar uma olhada nisso.

Vlws

William Bruno · Novembro 7, 2012

você está instanciando o editor em mais algum outro lugar ? onde ?

Videres · Novembro 7, 2012

você está instanciando o editor em mais algum outro lugar ? onde ?

Ele só esta sendo chamado nessa parte do formulário mesmo:

<textarea class="ckeditor"  rows="30" cols="120" name="editor_1" id="editor_1"  >TESTATeste teste teste hau hau hau hau</textarea>

Ah! já ate tentei trocar - editor1 por editor_1 (mas da no mesmo)!

Qualquer novidade posto aqui.

Vlws mais uma vez pela paciência e ajuda.

William Bruno · Novembro 7, 2012

acho que entendi cara.

qndo você faz o ajax, ele instancia o editor. Ai faz outro ajax ele instancia novamente.

Vamos tentar uma coisa:

function startEditor(){
    CKEDITOR.editor.prototype.destroy('editor1');

    CKEDITOR.replace( 'editor1',{
//.. não muda daqui para frente

http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.html#.remove

Videres · Novembro 7, 2012

acho que entendi cara.

qndo você faz o ajax, ele instancia o editor. Ai faz outro ajax ele instancia novamente.

Vamos tentar uma coisa:
function startEditor(){
    CKEDITOR.editor.prototype.destroy('editor1');

    CKEDITOR.replace( 'editor1',{
//.. não muda daqui para frente
http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.html#.remove

Pronto, saca só:

function startEditor(){

	CKEDITOR.editor.prototype.destroy('editor_1');
               CKEDITOR.replace( 'editor_1',{

		height:'200',
		width:'400',
		toolbar :
		[
		["Bold","Italic","Underline","StrikeThrough","-","Undo","Redo","-","Cut", "Copy", "Paste", "PasteText", "PasteFromWord","Find","Replace","-",
"Outdent","Indent","NumberedList","BulletedList"],
		["-","JustifyLeft","JustifyCenter","JustifyRight","JustifyBlock"],
		["Image","Table","-","Link", "BGColor","Format","FontSize"],
		],

	});

}

Quando coloco dessa maneira ainda exibe os mesmos erros q te falei a cima..

Mas quando coloco dessa maneira:

function startEditor(){
       if (CKEDITOR.instances.editor_1){

			CKEDITOR.editor.prototype.destroy('editor_1');
               CKEDITOR.replace( 'editor_1',{

				height:'200',
				width:'400',
				toolbar :
				[
				   ["Bold","Italic","Underline","StrikeThrough","-","Undo","Redo","-","Cut", "Copy", "Paste", "PasteText", "PasteFromWord","Find","Replace","-",
"Outdent","Indent","NumberedList","BulletedList"],
				   ["-","JustifyLeft","JustifyCenter","JustifyRight","JustifyBlock"],
				   ["Image","Table","-","Link", "BGColor","Format","FontSize"],
				],

			});
       }
}

Ele já n da pau no AJAX, porém aparece 3 erros relacionados a instrucao.js dando pau na inicialização da funcao startEditor(); do ajax:

aprece esse erro 3x

Hora: 07/11/2012 13:59:45
Erro: NS_ERROR_NOT_INITIALIZED: Component not initialized
Arquivo-fonte: http://localhost/siteTeste/Scripts/instrucao.js
Linha: 69

O codigo da instrucao.js ta assim:

function mudancaEstado(){
      	if (xmlRequest.readyState == 4){
	texto=unescape(xmlRequest.responseText.replace(/\+/g," "));

       	document.getElementById("corpo").innerHTML = xmlRequest.responseText;

               startEditor();

	extraiScript(texto);


       }

xmlRequest.send( null );
}

Será q estou inicializando de forma errada?

Vou dar uma olhada aqui.

William Bruno · Novembro 7, 2012

esse send dentro do mudandaEstado tá perdido ai.

Comente essa linha.

                startEditor();

	extraiScript(texto);


       }

//xmlRequest.send( null );
}

Videres · Novembro 7, 2012

esse send dentro do mudandaEstado tá perdido ai.

Comente essa linha.
                startEditor();

	extraiScript(texto);


       }

//xmlRequest.send( null );
}

Removendo o xmlRequest.send(null) os erros somem realmente.

Os unicos erros q ficam sao aqueles referentes ao CSS -> Declaracao ignorada.

A bronca é q por algum motivo a barra ainda aparece desconfigurada na tela, n sei s é devido a esses erros do CSS ou se é pq esta faltando algum plugin a ser inserido?

Vou ver oq possa ser... qualquer coisa posto aqui.

Jaja vou ficar te devendo ate 1 rins. =P

Videres · Novembro 8, 2012

William saca só,

Nas minhas mexidas no código, resolvi inserir o editor dentro de um <iframe> fora do form.

E CONGRATULATION "FUNCIONOU" (com algumas falhas ainda)!

Dai resolvi colocar a tag <textarea> fora do form pra ver no q iria dar... E funcionou da mesma forma.

Olha:

Como você pode ver a unica bronca é esse retangulo cinzento atras q ainda n descobri como editar e alterar a posicao.. acabei criando um novo FORM e funfou do jeito q mostrei nessa imagem acima.

Mas ta chegando... caso consiga concluir posto aqui.

Cod:

<form id="form"  >

     <textarea   rows="30" cols="120"  name="editor_1" id="editor_1"  >TESTATeste teste teste hau hau hau hau</textarea>
     <input type="submit" name="enviar" id="enviar" value="Atualizar" class="btnNot" /> 

</form>

Arquivado

[Resolvido] CKEditor + AJAX

Recommended Posts

Videres 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Videres 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Videres 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Videres 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Videres 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Videres 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Videres 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Videres 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Videres 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Videres 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

Videres 3