Editor de Texto Web com Gerenciador de Imagem

Vou mostrar como criar um editor de texto web que tenha gerenciador de imagem com upload.

Para isso vou utilizar o CKEditor e o CKFinder:
CKEditor, editor de texto para internet : baixar
CKFinder, gerenciador de arquivos (escolha a versão em PHP) : baixar

CKEditor tem sua versão básica OpenSource, já o CKFinder tem uma versão demo que fica à mostra uma mensagem, mas funciona normal.

1º Incluir os scripts para CKEditor e CKFinder

2º Criar um formulário com o textarea

Vou enviar este formulário por AJAX, pode ser por POST ou GET tanto faz. Mas por AJAX tem uma particularidade.
funcao.enviaFormAjax() pode ser qualquer função para enviar formulários por AJAX.

<html>
<head></head>
<script type='text/javascript' src='http://localhost/teste/ckeditor/ckeditor.js'></script>
<script type='text/javascript' src='http://localhost/teste/ckfinder/ckfinder.js'></script>
</pre>
<body>
<form onSubmit="funcao.enviaFormAjax()">
 <textarea id="idtextarea" name="idtextarea"></textarea>
 <input type="submit" id="idbotao" value="Enviar" />
</form>
</body>
</html>

3º Depois do formulário com o TEXTAREA deverá ter a criação do objeto para o CKEDITOR.

<script type='text/javascript'>
 /*
  Padronizar as configurações para o TEXTAREA que tenha o ID "idtextarea"
   */
 var editor = CKEDITOR.replace( 'idtextarea',
 {
/*Tipo do template */
 extraPlugins : 'uicolor',
/* Opção que irão aparecer no editor, aqui esta full,  poderá ser personalizado*/
 toolbar :
 [
 ['Source','-','Save','NewPage','Preview','-','Templates'],
 ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],
 ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
 ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],
 '/',
 ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
 ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
 ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
 ['Link','Unlink','Anchor'],
 ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
 '/',
 ['Styles','Format','Font','FontSize'],
 ['TextColor','BGColor'],
 ['Maximize', 'ShowBlocks','-','About']
 ],
 /* Habilita a opção para escolher uma imagem de um diretório do site*/
 filebrowserImageBrowseUrl : 'http://localhost/teste/ckfinder/ckfinder.html?Type=Images'

 });
 /* Vincula o CKFinder com o 'editor' referente ao CKEditor */
 CKFinder.SetupCKEditor( editor, 'http://localhost/teste/ckfinder/' );

 /* Esta função (utiliza PrototypeJS) serve para enviar os dados por AJAX
    As informações ficam apenas no CKEditor, assim eu passo o valor dele para o campo idtextarea e pode ser mandado sem problemas no FORM
*/
 Event.observe(window,'load',function(){
 Event.observe('idbotao','click',function(){
 $('idtextarea').value = CKEDITOR.instances.idtextarea.getData();
 },false);
 });
</script>

CKFinder irá abrir esta janelinha.

por padrão ele irá buscar as imagens do diretório
./ckfinder/userfiles/
Para mudar o diretório abra o arquivo
./ckfinder/config.php
e mude o valor das variaveis $baseUrl e $baseDir para o caminho de onde estará suas imagens.

Documentação para o CKEditor aqui.
Documentação para o CKFinder aqui.

Espero ter ajudado =)

Gostar disso:

Seja o primeiro a gostar disso post.

Esta entrada foi publicada em 31 31UTC março 31UTC 2010 às 15:10 e está arquivada como Ajax, JavaScript, PHP com as tags ckeditor, ckfinder, editor, web. Você pode acompanhar qualquer resposta para esta entrada através do feed RSS 2.0 Você pode deixar uma resposta, ou trackback do seu próprio site.

5 Respostas para “Editor de Texto Web com Gerenciador de Imagem”

Tiago Diz:
20 20UTC agosto 20UTC 2010 às 10:26

Como é que faço para ficar só com a barra de ferramentas e remover a área de texto. queria que a barra de ferramentas ficasse separada da área de texto. se me puder ajudar agradecia.
obrigado.

Responder
- alexandrems Diz:
  20 20UTC agosto 20UTC 2010 às 10:46
  
  Até onde sei, não tem nenhum função nativa do componente que faça isso.. Provavelmente você deverá dar uma olhada no código dele e achar onde ele cria a barra de ferramentas.
  Mas qual a sua intenção de usar somente a barra de ferramentas?
  
  Responder
  - Tiago Diz:
    20 20UTC agosto 20UTC 2010 às 10:50
    
    estou a fazer um projecto, tipo power point, e preciso que a barra de ferramentas esteja separada da caixa de texto. e n tou a conseguir achar onde ela é criada.
Tiago Diz:
20 20UTC agosto 20UTC 2010 às 11:50

já agora mais uma pergunta. como faço para limitar o ckeditor. não quero que ao movê-lo ele sai-a fora da área de trabalho.
obrigado

Responder
Geovani Diz:
13 13UTC setembro 13UTC 2010 às 15:20

Adoraria ter uma licença do CKfinder

Responder