javascript - 在 ckeditor 中集成 blueimp 文件上传

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。按钮的名称是：“文件上传”

然后我有创建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+' />');
                }
            }