创建文件上传按钮时ckeditor错误

Question

I am using below code to create a ckeditor plugin to upload images. While i am trying to create a ckeditor dialog, I am getting below errors. Below piece of code i took from the below link. http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dialog.definition.button.html

In chrome :

Uncaught TypeError: Cannot read property '_' of undefined

In firefox :

b.getContentElement(...) is undefined

Any help will be greateful.

{
    type : 'file',
    id : 'upload',
    label : 'Select file from your computer',
    size : 38
},
{
    type : 'fileButton',
    id : 'fileId',
    label : 'Upload file',
    'for' : [ 'tab1', 'upload' ],
    filebrowser : {
        onSelect : function( fileUrl, data ) {
            alert( 'Successfully uploaded: ' + fileUrl );
        }
    }
},

Answer 1

I think that what you have there, is not "code" as it. Is just the object definition you must do to initialize a button in a dialog, as the docs you pasted say:

This class is not really part of the API. It just illustrates the properties that developers can use to define and create buttons.

Once the dialog is opened, the created element becomes a CKEDITOR.ui.dialog.button object and can be accessed with CKEDITOR.dialog#getContentElement. For a complete example of dialog definition, please check CKEDITOR.dialog.add.

Then, if we check that: http://docs.ckeditor.com/#!/api/CKEDITOR.dialog.definition

We will find this code:

CKEDITOR.dialog.add( 'testOnly', function( editor ) {
    return {
        title:          'Test Dialog',
        resizable:      CKEDITOR.DIALOG_RESIZE_BOTH,
        minWidth:       500,
        minHeight:      400,
        contents: [
            {
                id:         'tab1',
                label:      'First Tab',
                title:      'First Tab Title',
                accessKey:  'Q',
                elements: [
                    {
                        type:           'text',
                        label:          'Test Text 1',
                        id:             'testText1',
                        'default':      'hello world!'
                    }
                ]
            }
        ]
    };
} );

Then it seems you need to call the method CKEDITOR.dialog.add with the object you prepared. (anyway, I din´t checked all the data and the formats you have in your object) this example should work.

Anyway, you should check this part of the same documentation and be sure on which one is the dialog/plugin you need.

Hope it may help to you.