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