CKEditor 4 dynamic select in a dialog

Trying to figure out how to dynamically populate a select menu in a dialog... in all my attempts thus开发者_运维知识库 far, I haven't been able to get it work correctly.

I think what you're trying to do is populate a drop down dynamically in your plugin. And for whatever reason, that drop down needs to be populated while the dialog is open.

If so, here is what I did for a similar situation:

{
    type: 'select',
    id: 'exam_ID',
    label: 'Select Exam',
    items : [ ['--- Select an Exam---',0] ],
    setup : function(element) {
        var element_id = '#' + this.getInputElement().$.id;
        $.ajax({
            type: 'POST',
            url: 'lib/ckeditor/plugins/customExam/utilities/listExams.aspx',
            data: '{"cpID":' + window.parent.$("#cpID").val() + '}',
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            async: false,
            success: function(data) {
                $.each(data.DATA, function(index, item) {
                    $(element_id).get(0).options[$(element_id).get(0).options.length] = new Option(item[1], item[0]);
                });
            },
            error:function (xhr, ajaxOptions, thrownError){
                alert(xhr.status);
                alert(thrownError);
            } 
        });
    }

}

The key was finding the element ID that CKEditor sets, which is not the id in the element definition. You can use that id for other functions, but if you plan on doing any updating of the element, you need to get the CKEditor DOM element.

There might be a better way to do this, but this works for me.

elements: [
                {
                    type: 'select',
                    id: 'test',
                    label: 'test label',
                    items: [
                        ['Please Choose', '']
                    ],
                    onLoad: function(element) {
                        this.add('Option 1', '1');
                        this.add('Option 2', '2');
                    }              
               }
        ]

If you want to add or remove items when dialog opens for editing. You can use setup call. Place it above or below onLoad definition.

                    setup: function(element) {
                        this.clear();

                        this.add('Please Choose', '');
                        this.add('Option 1', '1');
                        this.add('Option 2', '2');

                        this.setValue(element.getText());
                    },

Bob,

Here's a snippet that changes the items for an existing select menu. But, you can add your own, get the values dynamically, etc.

        //for button we just want to limit the button type to button
    if ( dialogName == 'button' ) {

        // updates the info tab 
        var infoTab = dialogDefinition.getContents( 'info' );
        var typeDef = infoTab.get( 'type' );
        var buttonType = new Array("Button", "button");
        var myItems = new Array (buttonType); 
        typeDef['items'] = myItems;

If that doesn't help, provide additional details on actual vs. expected results.

Improved code that use the add() method and select the correct item in the list.

{
    type: 'select',
    label: 'Select a page',
    id: 'localPage',
    items: [['', '']],
    setup: function(data) {
        var self = this;
        $.get('/pages.php', function(items) {
            items.forEach(function(item) {
                self.add(item[0], item[1]);
            });
            if (data.localPage) {
                self.setValue(data.localPage || '');
            }
        }).fail(function() {
            alert('An error occurred while getting the pages.');
        });
    },
}

pages.php sample script:

$pages = [
    ['Contact', '{!! page:4 !!}'],
    ['About', '{!! page:5 !!}'],
    ['Home page', '{!! page:1 !!}'],
];

return json_encode($pages);