Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Videres

[Resolvido] CKEditor + AJAX

Recommended Posts

RESOLVIDO!!! ^~

 

Criei um tutorial simples de todo o processo que utilizei junto com o William q me deu uma força, espero q ajude outros com a mesma duvida. =]

 

Então:

 

1- Importando os plugins

 

Na página inicial (index.php) será onde os plugins serão importados:

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

 

 

2- Criando form com a tag textarea

 

<form class="formEditor" name=" formEditor " method="post" action="endereco.php">

<p class="textEditor">
<textarea  class="textArea_editor"   rows="30" cols="120"  name="editor_1" id="editor_1" > 
Testando texto
</textarea>
</p>

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

</form>

 

 

3- Criando a função do CKEditor na página ajax.js:

 

.....
function startEditor(){


   CKEDITOR.editor.prototype.destroy('editor_1');

  /*removendo a opcao de redimensionar a caixa do editor dinamicamente. (Como padrao ela vem TRUE)*/
   CKEDITOR.config.resize_enabled =  false; 	


  /*Nessa parte indico, que onde estiver o ID = “editor_1” irá aparecer a barra de ferramentas  do CKEditor*/ 

  CKEDITOR.replace( 'editor_1',{
	/*Poderia definer altura  e largura por aqui*/
	/*height:'300',
	width:'700',*/
	/*Personalizando a minha barra de ferramenta*/			
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"],
	],

});

}

 

 

 

4- Inicializando a função do CKEditor dentro da pag do ajax.js através da pag Instrucao.js (script q utilizei para montar minhas paginas carregadas com ajax):

 

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

               startEditor(); //carregando função do CKEditor

	extraiScript(texto);


       }

	//xmlRequest.send( null );
}

……………………………

 

5- Personalizando a aparência do EDITOR (CSS):

 

/*Id “PAI” – Altera todos os valores do CKEditor */
#cke_editor_1{ 
width:830px;
height:500px;
background-color:#FFFF00;


}

/*Class  do Editor central, onde se encontra as ferramentas e textos  */
#corpo .cke_editor{

width:680px;
margin:0;
background:#FFFFFF;



}

/*class do plano de fundo do Editor */
.cke_skin_kama {
   background-color: #141414 !important;
width:650px;
height:400px;
   position:relative;
   color: #ffffff !important;
}

/*.....................:: E outras class q personalizam o EDITOR::................. */
.cke_contents  {
background-color: #FFF !important;
width: 1200px;
height: 200px !important;
margin-left:-40px;

 position:relative;
}

.Cke_contents iframe {
background-color: #00F !important;
width: 400px !important;

  position:relative;
}

.cke_wrapper
{
height: 400px !important;
background-color: #0F3 !important;
 position:relative;
}

 

 

 

_________________________________________

 

Bom Galera é isso.

Resolvi postar o processo q utilizei para construi, pq notei a dificuldade n só minha + de muitas outras pessoas q n conseguiram uma resposta para solucionar esse problema de personalizar o CKEditor em paginas carregas com ajax.

 

Essa foi a forma q consegui graças a ajuda de William e minhas pesquisas na WEB.

 

Como vcs vao poder notar, expliquei da forma q entendi, talvez n tenha sido da melhor maneira, ou do jeito mais correto... Mas ta ai! =]

 

Abraço e BOM PROVEITO! \o_

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.