在ckeditor中集成blueimp fileupload

Question

是否可以将Blueimp FileUpload(https://github.com/blueimp/jQuery-File-Upload)与编辑器CkEditor(http://ckeditor.com/)集成？

任何提示？

非常感谢!

Answer 1

最后我自己找到了解决方案:

在blueimp fileupload的文件index.php中,我编辑了表,首先添加以下几行</tr>命令:

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

在此文件的末尾,包含jquery之后:

<script type="text/javascript">

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

</script>

我开发了一个在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;
        } );

    }
});

要将按钮添加到工具栏,还需要修改config.js.按钮的名称是:"FileUpload"

然后我有创建CKeditor的功能:

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

                if ( editor ) return;

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

这是管理触发器的功能:

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