Custom button that opens a new window containing a file brow

I'm currently developing a image browser in PHP and jQuery. I do not want to open the image browser via "Browse server" button in CKeditor. I would like to create a new button that opens it in a new window (not a dialog box). Is this possible? If so, could anyone tell me what the correct way to do this is? Alternatively, send me on to a tutorial that explains this.

It would be really nice if someone could explaine how to use the callback function to insert the image aswell. I'm not a very experienced javascript programmer. :\

.root/ckeditor
.root/browser/index.php <- file to be opened in a new window

EDIT: With this plugin I've managed to open a new window:

CKEDITOR.plugins.add('imgbrowser',
{
   init: function(editor)
   {
      var pluginName = 'imgbrowser';
      //CKEDITOR.dialog.add(pluginName, this.path + 'dialogs/footnote.js');
      //editor.addCommand(pluginName, new CKEDITOR.dialogCommand(pluginName));
      editor.ui.addButton('Imgbrowser',
         {
            label: 'Image browser',
            command: pluginName,
            click: function (editor) { window.open('/browser/index.php','Image Browser','width=900,height=600'); }
         });
   }
});

How do I enable/use the callback to insert the selected image into the editor?

Thanks in advance!

Tue, 07/27/2010 - 12:28

comp615

Joined: 02/07/2010

Posts: 295

Re: Custom button that opens a new window containing a file

So you are trying to insert a filebrowser button directly onto the toolbar.

Since you are not actually using the filebrowser, there is no callback method. But you can simply write JS to insertHTML into the editor (Using Jquery if you want). There are tons of other forum topics about this you can search around for.

Tue, 07/27/2010 - 14:10

exmx

Joined: 27/07/2010

Posts: 7

Re: Custom button that opens a new window containing a file

Could you be more specific please?

Tue, 07/27/2010 - 15:05

comp615

Joined: 02/07/2010

Posts: 295

Re: Custom button that opens a new window containing a file

You can do something like the following:
CKEDITOR.instances['instanceName'].insertHtml('< img src="<your image"/>');

Or you could do it via JQuery too. Whatever works best for you.

Wed, 07/28/2010 - 09:25

exmx

Joined: 27/07/2010

Posts: 7

Re: Custom button that opens a new window containing a file

function InsertHTML(file_path)
        {
            // Get the editor instance that we want to interact with.
            var oEditor = CKEDITOR.instances.page_content;
            var value = file_path;

            // Check the active editing mode.
            if ( oEditor.mode == 'wysiwyg' )
            {
                // Insert the desired HTML.
                oEditor.insertHtml( '<img src="' + value + '" />' );
            }
            else
                alert( 'You must be on WYSIWYG mode!' );
        }

function sendToParent(file_path) {
    window.opener.InsertHTML(file_path);
}

echo "<input type='button' value='Insert image' onclick='sendToParent(\"".$img_element."\")' />"