6

Estou montando um sistema de Base de conhecimento e estou usando o CKEditor para editar os textos, mas eu gostaria de poder fazer UPLOAD de imagens dentro do texto.

Eu estou usando o PHP com MYSQL e a parte de texto já está toda funcionando.

Como posso fazer upload de imagens dentro do CKEditor?

3
  • Com o summernote você é capaz de colar a imagem direto no HTML e ele converte a imagem em um Base64 Commented 21/09/2016 às 19:21
  • Agradeço a ajuda de todos! Consegui resolver o problema seguindo o procedimento em Link Youtube. Commented 24/09/2016 às 21:08
  • @IgorSantana considere marcar como correta a resposta que melhor responde o seu problema, ou então responder a sua própria pergunta explicando os passos descritos no vídeo que te ajudou.
    – rodorgas
    Commented 25/09/2016 às 2:08

4 Respostas 4

9

Você tem duas opções para isso. Você pode utilizar algum plugin do ckeditor pronto para fazer o upload, como já foi dito, temos o CKFider, KCFinder, Image Upload, Image Upload and Browser, dentre muitos outros.

Agora, se quiser elaborar o seu plugin ou fazer algo similar, pode verificar o Developer Guid do CKEditor, que ele tem tudo o que é necessário para entender o funcionamento.

Mas adiantando, esses plugins apenas abrem uma janela (geralmente chamada de servidor) onde contém todas as imagens. Isso geralmente é uma URL que retorna as imagens de um diretório específico (local ou não). Após ter as imagens, basta clicar na imagem selecionada (se for fazer o upload, a imagem será jogada neste diretório) para a sua seleção. Com isso, o CKEditor apenas adiciona o caminho até a imagem no código.

Mas, se quiser utilizar um plugin pronto, irei explicar como configurar o File Browser.

  • Primeiro passo: Baixe o plugin popup e o File Browser.
  • Segundo passo: Coloque os dois na pasta plugins do CKEditor.
  • Terceiro passo: Adicione os plugins no arquivo config.js, desta forma:

    config.extraPlugins = 'popup';
    config.extraPlugins = 'filebrowser';
    
  • Quarto passo: Adicione a URL onde fará o upload da imagem no arquivo config.js.

    config.filebrowserImageUploadUrl = '/ckeditor/UploadImage';

Para funcionar, esse caminho deve conter um método para receber uma imagem, salvar na pasta desejada e retornar o caminho, como este abaixo que foi retirado do fórum do CKEditor.:

if(isset($_FILES['upload'])){
  // ------ Process your file upload code -------
   $filen = $_FILES['upload']['tmp_name'];
   $con_images = "uploaded/".$_FILES['upload']['name'];
   move_uploaded_file($filen, $con_images );
   $url = $con_images;

   $funcNum = $_GET['CKEditorFuncNum'] ;
   // Optional: instance name (might be used to load a specific configuration file or anything else).
   $CKEditor = $_GET['CKEditor'] ;
   // Optional: might be used to provide localized messages.
   $langCode = $_GET['langCode'] ;

   // Usually you will only assign something here if the file could not be uploaded.
   $message = '';
   echo "<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction($funcNum, '$url', '$message');</script>";
}

Feito isso, o seu arquivo config.js deve conter esses dados:

CKEDITOR.editorConfig = function( config ) {
    config.extraPlugins = 'popup';
    config.extraPlugins = 'filebrowser';
    config.filebrowserImageUploadUrl = '/ckeditor/UploadImage';
};

Com isso, ao abrir o dialog de imagem, terá a seguinte opção de upload:

inserir a descrição da imagem aqui

Verifique o método em PHP para ver não contém nenhum erro, pois eu não consegui testar e ele pode ser feito de N formas diferentes.

1
  • Obrigado, meu amigo!!! Commented 24/09/2016 às 21:08
3

Você pode usar o KCFinder. Ele pode ser integrado com o CKEditor e funciona bem. No site oficial tem vários tutoriais.

1
2

Existe um plugin do CKE chamado Upload Image, da uma olhada na documentação dele e instala no seu projeto, ele resolve tudo de upload de imagens.

2

Agradeço a ajuda de todos! Consegui resolver o problema fazendo o seguinte:

1 - Baixei o CKEDITOR e o KCFinder e os descompactei na pasta raiz do meu site;
2 - Criei um formulário na index.php (Note que chamei o class="ckeditor" no formulario)

<textarea class="ckeditor" name="documento_conteudo"></textarea>  

3 - Inclui o Script e o CSS no head da página:

<script src="ckeditor/ckeditor.js"></script>  

4 - Após isso, coloquei a pasta do KCFinder dentro da pasta CKEDITOR, ficando assim a estrutura:

..ckeditor/.
..ckeditor/kcfinder/.

5 - Abrir o arquivo 'ckeditor/config.js' e incluir o código de integração do KCFINDER, o arquivo deve ficar assim:

/**
 * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see LICENSE.md or http://ckeditor.com/license
 */

CKEDITOR.editorConfig = function( config ) {
    // Define changes to default configuration here. For example:
    // config.language = 'fr';
    // config.uiColor = '#004d66';
        config.filebrowserBrowseUrl = 'ckeditor/kcfinder/browse.php?opener=ckeditor&type=files';
   config.filebrowserImageBrowseUrl = 'ckeditor/kcfinder/browse.php?opener=ckeditor&type=images';
   config.filebrowserFlashBrowseUrl = 'ckeditor/kcfinder/browse.php?opener=ckeditor&type=flash';
   config.filebrowserUploadUrl = 'ckeditor/kcfinder/upload.php?opener=ckeditor&type=files';
   config.filebrowserImageUploadUrl = 'ckeditor/kcfinder/upload.php?opener=ckeditor&type=images';
   config.filebrowserFlashUploadUrl = 'ckeditor/kcfinder/upload.php?opener=ckeditor&type=flash';
   };  

6 - Após, vamos configurar a permissão para listar a pasta de imagens, em "ckeditor/kcfinder/conf/config.php":

Alterando o valor do campo 'disabled' => true, para 'disabled' => false,

Pronto, funcionou o upload de arquivo na edição do CKEDITOR!

PS: O Tutorial que eu segui foi o contido neste vídeo aqui: YOUTUBE

Obrigado a todos, e espero ter ajudado!

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .