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 =)
aLeXandRE 
20 de agosto de 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.
20 de agosto de 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?
20 de agosto de 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.
20 de agosto de 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
13 de setembro de 2010 às 15:20
Adoraria ter uma licença do CKfinder
7 de fevereiro de 2012 às 18:29
Whoah this blog is wonderful i love studying your posts. Stay up the great paintings! You realize, many persons are hunting round for this info, you could help them greatly.