Hello everybody,
I'm just here to share what I have done today, I've looked for it for a long time and I didn't find any free solution to this problem. The goal is to add an image with the image button more easily for the user, so they won't have to tap any URL in the box. So what I did is that I allowed the Upload tab and I used a bit of jQuery to automatically fill in the URL box...
Si firstly I have one question, am I allowed by the license to do that?
Secondly, I wanted to share my code to see if you have any sort of improvement or just if you want to use it.
<?php // Let's test if the file had been send if (isset($_FILES['upload']) AND $_FILES['upload']['error'] == 0) { // Let's test if the file is not too big, here I put 10mo but you can put lower if ($_FILES['upload']['size'] <= 10000000) { // Let's test if the extension is ok, if you want others, you just have to add them in the "$extensions_autorisees" array $infosfichier = pathinfo($_FILES['upload']['name']); $extension_upload = $infosfichier['extension']; $extensions_autorisees = array('jpg', 'jpeg', 'gif', 'png','JPG','PNG','JPEG'); if (in_array($extension_upload, $extensions_autorisees)) { // We can validate the file and store it move_uploaded_file($_FILES['upload']['tmp_name'], '../uploaded/' . basename($_FILES['upload']['name'])); echo "Well done! You can click on OK!"; ?> <script src="../scripts/jquery.js"></script> <script> parent.$('#cke_126_textInput').val('<?php echo 'http://localhost/MYSITE/uploaded/' . basename($_FILES['upload']['name']) . ''; ?>'); </script> <?php } } } ?>
The last script allows to replace the input of the url on the "image info" tab...
So this is the PHP code of the upload.php file, and to activate the upload tab I just put:
CKEDITOR.replace( 'editor1', { filebrowserUploadUrl: 'php/upload.php' });
Well, tell me what you think about if it's a good idea or a dumb or if the idea already exists or something, I would be happy :)
Bye!
EDIT: I just added a function to resize automatically the photo uploaded, this can be usefull if you want it to fit perfectly in the editor:
function redim($img,$extension_upload,$final_width) { if($extension_upload == 'jpg' OR $extension_upload =='JPG' OR $extension_upload == 'jpeg' OR $extension_upload == 'JPEG') { $source = imagecreatefromjpeg($img); } else if($extension_upload == 'png' OR $extension_upload == 'PNG') { $source = imagecreatefrompng($img); } else { return FALSE; } $ini_width = imagesx($source); $ini_height = imagesy($source); $final_height = $ini_height*$final_width/$ini_width; $final = imagecreatetruecolor($final_width,$final_height); if($final_width < $ini_width) { imagecopyresampled($final,$source,0,0,0,0,$final_width,$final_height,$ini_width,$ini_height); if($extension_upload == 'jpg' OR $extension_upload ='JPG' OR $extension_upload = 'jpeg' OR $extension_upload = 'JPEG') { imagejpeg($final,$img); } else if($extension_upload = 'png' OR $extension_upload = 'PNG') { imagepng($final,$img); } } } if (isset($_FILES['upload']) AND $_FILES['upload']['error'] == 0) { // Testons si le fichier n'est pas trop gros if ($_FILES['upload']['size'] <= 10000000) { // Testons si l'extension est autorisée $infosfichier = pathinfo($_FILES['upload']['name']); $extension_upload = $infosfichier['extension']; $extensions_autorisees = array('jpg', 'jpeg', 'gif', 'png','JPG','PNG','JPEG'); if (in_array($extension_upload, $extensions_autorisees)) { // On peut valider le fichier et le stocker définitivement move_uploaded_file($_FILES['upload']['tmp_name'], '../uploaded/' . basename($_FILES['upload']['name'])); redim('../uploaded/' . basename($_FILES['upload']['name']),$extension_upload,700); //the last number is here to put the width required, here I want a maximum width of 700px echo "Well done! You can click on OK!"; ?> <script src="../scripts/jquery.js"></script> <script> parent.$('#cke_126_textInput').val('<?php echo 'http://localhost/MYSITE/uploaded/' . basename($_FILES['upload']['name']) . ''; ?>'); </script> <?php } } }