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も変更する必要があります。ボタンの名前は「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+' />');
                }
            }