如何在onClick事件上设置CKEDITOR对话框数据

Question

I am working with CKEDITOR placeholder plugin and trying to set widget data on onClick.

Everything works fine when I set widget data on commit:

commit: function(widget) {
  widget.setData('name', this.getValue());
}

But when I try to do the same on onClick:

onClcik: function(widget) {
    widget.setData('name', this.getValue());
 }

my widget object is different and widget.setData is undefined.

My question is how to set widget data on onClick event on radio element?

Placholder.js

'use strict';
CKEDITOR.dialog.add('placeholder', function(editor) {
    var lang = editor.lang.placeholder,
        generalLabel = editor.lang.common.generalTab,
        validNameRegex = /^[^\[\]<>]+$/;

    return {
        title: 'Insert variable from:',
        minWidth: 200,
        minHeight: 151,
        contents: [{
            id: 'initial-view',
            label: 'view one',
            title: generalLabel,
            elements: [{
                id: 'view-one',
                style: 'width: 100%;',
                type: 'html',
                html: ''
            }, {
                type: 'button',
                id: 'open-organizational-units',
                label: 'Organizational units',
                title: 'Organizational units',
                className: 'dialog-btn-icon-forward',
                setup: function(widget) {
                    this.setValue(widget.data.name);
                },
                onClick: function(widget) {
                    this.getDialog()
                        .selectPage('organizational-unit-view');
                }
            }]
        }, {
            id: 'organizational-unit-view',
            label: 'view two',
            title: generalLabel,
            elements: [{
                    type: 'button',
                    id: 'back-to-main-view',
                    label: 'Organizational units',
                    title: 'Organizational units',
                    className: 'dialog-btn-icon-back',
                    setup: function(widget) {
                        this.setValue(widget.data.name);
                    },
                    onClick: function(widget) {
                        this.getDialog()
                            .selectPage('initial-view');
                    }
                },
                {
                    type: 'radio',
                    id: 'list-of-vars',
                    align: 'vertical',
                    style: 'color: green',
                    'default': '',
                    setup: function(widget) {
                        this.setValue(widget.data.name);
                    },
                    onClick: function(widget) {
                        widget.setData('name', this.getValue());
                    },
                    commit: function(widget) {

                    }
                }
            ]
        }]
    };
});

Answer 1

To make it work on onClick event simply add

var okBtn = document.getElementsByClassName('cke_dialog_ui_button_ok');
okBtn[0].click();

inside onClick function like this

onClick: function(widget) {
                    if (this.getValue()) {
                        var okBtn = document.getElementsByClassName('cke_dialog_ui_button_ok');
                        okBtn[0].click();
                    }
                }