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 =)

About these ads

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

  1. 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.

    • 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?

      • 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.

  2. 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

  3. Adoraria ter uma licença do CKfinder

  4. 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.

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

Seguir

Obtenha todo post novo entregue na sua caixa de entrada.

%d blogueiros gostam disto: