Integration blueimp fileupload in ckeditor

Question

Is it possible to integrate Blueimp FileUpload ( https://github.com/blueimp/jQuery-File-Upload ) with the editor CkEditor ( http://ckeditor.com/ )???

Any hints?

Thank you so much!

Answer 1

At the end I found the solution by myself:

In the file index.php of blueimp fileupload I've edited the table adding the following lines first the </tr> command:

    <td>
        <div class="btn scegli" id="chooseThis" >
            <span class="url" style="display: none">"{%=file.url%}"</span>
            <span>Choose</span>
        </div>
    </td>

At the end of this file, after the jquery inclusion:

<script type="text/javascript">

  $(".chooseThis").live("click", function (e) {
    parent.triggerUploadImages($(this).children('.url').html());
  });

</script>

I've developed a simple plugin to use in CKeditor:

CKEDITOR.plugins.add('fileUpload',
{
    init: function (editor) {
        editor.addCommand( 'OpenDialog',new CKEDITOR.dialogCommand( 'OpenDialog' ) );
        editor.ui.addButton('FileUpload',
            {
                label: 'Upload images',
                command: 'OpenDialog',
                icon: CKEDITOR.plugins.getPath('fileUpload') + 'icon.gif'
            });
        editor.contextMenu.addListener( function( element ){
            return { 'My Dialog' : CKEDITOR.TRISTATE_OFF };
        });
        CKEDITOR.dialog.add( 'OpenDialog', function( api ){
            var dialogDefinition =
            {
                title : 'Gestisci immagini',
                minWidth : 700,
                minHeight : 500,
                contents : [
                        {
                            expand : true,
                            padding : 0,
                            elements :
                            [
                                {

                                    type : 'html',
                                    html : ' <iframe src="../../includes/fileUpload/index.php" style="width:100%;height:490px" />'
                                }
                            ]
                        }
                ],
                buttons : []
            };
            return dialogDefinition;
        } );

    }
});

To add the button to the toolbar it's necessary modify also the config.js. The name of the button is: "FileUpload"

Then I have function to create the CKeditor:

    var editor, html = '';
    function createEditor() {

                if ( editor ) return;

                var config = {};
                editor = CKEDITOR.replace("editor", 
                    { 
                        extraPlugins : 'fileUpload',
                    });
    }

And this is the function that manage the trigger:

            function triggerUploadImages(url){
                if(editor ){ 
                    CKEDITOR.dialog.getCurrent().hide();
                    editor.insertHtml('<img src='+url+' />');
                }
            }