filebrowser/image upload in CKEDITOR 3.0.RC

There is none. Won't be available before 3.1.

Unfortunately,

it's not listed there. I remember that either Fred or Wiktor told me that. The editor has to be stabilized and after then the file browser will be implemented.

Sorry, for the inconvenience but consider that version 3 is a complete rewrite!

Hi,

actualy, I made my own connectors for image/file browse and upload..everything works fine.. just needed to modify the filebrowser/plugin.js a bit

but.. it only works if there is just one CKeditor on page.. OR only the first CKeditors dialog works, it seems as if the second editor/dialog -> updateTargetElement would receive bad data about the editor and dont find the appropriate elements ..

Is there away to directly work with the dialog, like parent.opener.document.getElementById('myid') ? coase that would solve my problem just cant figure it out, coase the IDs are generated dynamicaly and I dont want to rewrite the whole link and image plugins

OK< so I solved the prolem with multiple editors on page there is a little bug in filebrowser/plugin.js
You just dont get the data for actual editor, but allways the first one.
but... you can make something like this :

filebrowser/plugin.js

//place global variable
var globalEditor="";

function browseServer( evt )
{
var dialog = this.getDialog();
var editor = dialog.getParentEditor();
//set current editor
globalEditor=editor;
.......

//my image function
function setImage( imageUrl,imageAlt,width,height,is_thumb,fileUrl,fileTitle, data )
{
var editor = globalEditor;
......
globalEditor._.filebrowserSe.filebrowser.target='info:txtUrl';
//my funct, origin
updateTargetElement( imageUrl, globalEditor._.filebrowserSe );

mosipov wrote:There is none. Won't be available before 3.1.

Hi,

Can You tell me when will be available version 3.1 with file upload/browse capability? Of course approximately. There are some other solutions to this problem (http://labs.corefive.com/2009/10/30/an- ... ditor-3-0/) but I'd like to wait for the 'official' one.

viltor

viltor wrote:

mosipov wrote:There is none. Won't be available before 3.1.

Hi,

Can You tell me when will be available version 3.1 with file upload/browse capability? Of course approximately. There are some other solutions to this problem (http://labs.corefive.com/2009/10/30/an- ... ditor-3-0/) but I'd like to wait for the 'official' one.

viltor

No, I can't since I am not writing it.

hi guys,

i have integrated custom image upload, but only working with FF. Not with IE. The problem is FF version after clicking "Browse Server" is poping up a new window for my image browser jsp. But with IE is loading my custom jsp into the window when ckeditor itself was.
Any workaround for this?

many thanks,

I'm confused... isn't this what CKFinder is for? I think this thread is heavily out of date.
I have CKE working with CKF just fine.

Please help.

I am a newbie. I have no upload image icon in the image editor box.

How do I get the upload image icon to appear in the image editor box?

Please can you tell me which file to edit.
what exactly I must add to the file
Where in the file text must I add the additions or subtractions.



Thanks

As the previous post said I think you need to download and install CKFinder.
That should do it for you.

Check this out: http://docs.cksource.com/CKEditor_3.x/Developers_Guide/File_Browser_(Uploader) ->
This is the solution (3rd from the left): http://ckfinder.com/demo

Recently I tried to use CKEditor for web page development. I searched the internet to find a solution of image uploader for this editor. I got lots of useful information. I combined all the information and came up with a simple solution. I want to share my sample source code here.

The sample code includes 4 files. index.php is the sample home page. The rest of files are in 3 folders: images, browser, and uploader. browser.php and selector.php are the source code for server image browser. uploader.php is the source code for user to upload the image file from their local machine. By default, all the image files will be uploaded to images folder. You must change the ‘images’ folder name in the php source code if you want to put your image files in different folder.

Here is the list of the files of the sample:
index.php
browser/browser.php
browser/selector.php
uploader/uploader.php

Here is the source code of index.php:

<html>
<head>
   <title>Sample CKEditor Site</title>
   <script type="text/javascript" src="ckeditor/ckeditor.js"></script>
</head>
<body>
   <form method="post">
      <p>
         My Editor 1:<br />
         <textarea id="editor1" name="editor1">&lt;p&gt;Initial value.&lt;/p&gt;</textarea>
         <script type="text/javascript">
            CKEDITOR.replace( 'editor1',
                {
                    filebrowserImageBrowseUrl : 'browser/browser.php?type=Images',
                    filebrowserImageUploadUrl : 'uploader/uploader.php?type=Images',
                    image_previewText : ' '
                });
            CKEDITOR.on( 'dialogDefinition', function( ev )
                {
                    var dialogName = ev.data.name;
                    var dialogDefinition = ev.data.definition;
                    if ( dialogName == 'image' )
                    {
                        dialogDefinition.removeContents( 'advanced' );
                        dialogDefinition.removeContents( 'Link' );
                    }
                });
         </script>
      </p>
      <p>
         <input type="submit" value="Submit" />
      </p>
   </form>
</body>
</html>

Here is the source code of browser.php:

<?php
$funcNum = $_GET['CKEditorFuncNum'] ;
echo '<iframe style="width:98%; height: 98%;" src="selector.php"></iframe>';
echo "<script type='text/javascript'>function GetFuncNum(){ return '".$funcNum."'; }</script>";
?>

Here is the source code of selector.php:

<?php
echo BrowseImageFile();
echo "<script type='text/javascript'>
    function selectFile(filename){
        var sel_file='images/'+filename;
        window.parent.window.opener.CKEDITOR.tools.callFunction(window.parent.GetFuncNum(), sel_file, '');
        window.parent.window.close();}
    function cancelSelectFile(){window.parent.window.close();}
    </script>";

function IsSupportedImgFile($filename)
{
   $supported_type = array('gif', 'jpeg', 'jpg', 'pjpeg', 'png', 'bmp');
    return in_array(end(explode(".", $filename)), $supported_type);
}

function BrowseImageFile()
{
   $s = '<button onClick="cancelSelectFile()">Cancel</button><br>';
   $location = '../images';
   $files = scandir($location);
   foreach($files as $filename)
   {
      $this_file = $location.'/'.$filename;
      if( is_file($this_file) && IsSupportedImgFile($filename) )
        {
            $s .= '<div id="'.$filename.'" onClick="selectFile(this.id)" style="cursor:pointer;float:left;padding:10px;">
                    <a>'.$filename.'<img src="'.$this_file.'" width="40px" height="30px"></a>
                </div>';
      }
   }
   return $s;
}
?>

Here is the source code of uploader.php:

<?php
$funcNum = $_GET['CKEditorFuncNum'] ;
$url = 'images/'.$_FILES["upload"]["name"];
$message = UploadImageFile();

echo "<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction($funcNum, '".$url."', '".$message."');</script>";

function UploadImageFile()
{
    $warning = '';
    if ( strncasecmp($_FILES["upload"]["type"], "image/", 6)  == 0 )
    {
        if ($_FILES["upload"]["error"] > 0)
        {
            $warning = "Return Code: " . $_FILES["upload"]["error"] ;
        }
        else
        {
            $file_name = $_FILES["upload"]["name"];
            $move_to_file = "../images/" . $file_name;

            if (file_exists($move_to_file))
            {
                $warning = $file_name . " already exists.";
            }
            else
            {
                if( !@move_uploaded_file($_FILES["upload"]["tmp_name"], $move_to_file) )
                {
                    $warning = 'Upload Failed!';
                }
            }
        }
    }
    else
    {
        $warning = "Invalid file";
    }
    return $warning;
}
?>

You can download the original source code in attached.

THANK YOU!!! I've been trying to find a sample for how to get the URL back into the window and was about at the end of my rope. Thanks so much for a great sample. I've got it working now, thanks to you.