CKEditor Checkbox Default Value

Question

I am using CKEditor's Enhanced Image plugin (image2) because it allows users to insert captioned images. However, I cannot enable the "captioned image" checkbox by default.

Setting a breakpoint after the code below shows the value is checked, but continuing unchecks it again.

CKEDITOR.on( 'dialogDefinition', function( ev ) {
// Take the dialog name and its definition from the event data.
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;

if (dialogName == 'image2') {
    dialogDefinition.onShow = function() {
        captionField = this.getContentElement('info', 'hasCaption');
        captionField.setValue('checked');
        console.log(captionField);
        debugger;
    }
}
});

Any advice on how to tick a CKEditor checkbox by default is greatly appreciated.

UPDATE

I tried updating the code based on Marek's answer to fit my needs, but the dialogShow event doesn't seem to get called this way.

CKEDITOR.on('dialogShow', function( evt ) {
    var dialog = evt.data;
    if ( dialog._.name === 'image2' && !dialog.widget.isReady() ) {
        console.log('test');
        evt.data.getContentElement( 'info', 'hasCaption' ).setValue( true );
    }
});

It seems the checkbox is hidden and there is an image which changes color on check and unchecked.Not sure if you can see it from developer's tool — brk
regarding an update: dialogShow doesn't work this way because it's called on editor instance, not the global namespace. I recommend playing with CKEditor 4 API docs. If you don't want to use CKEDITOR.replace then you somehow need to get the editor instance. You can listen to instanceReady event which is fired on a global namespace. And there you'd need to add editor#dialogShow listener. But we're going away from original question here. — Marek Lewandowski
Thanks for the update and pointing me in the right direction. I'm going to play around with the listeners some more. — chirinosky

Marek Lewandowski Marek Lewandowski · Accepted Answer · 2018-09-14T15:24:00

You can use dialogShow event where you can modify dialog properties.

CKEDITOR.replace( 'editor1', {
    extraPlugins: 'image2',
    removePlugins: 'image',
    on: {
        dialogShow: function( evt ) {
            var dialog = evt.data;
            if ( dialog._.name === 'image2' && !dialog.widget.isReady() ) {
                evt.data.getContentElement( 'info', 'hasCaption' ).setValue( true );
            }
        }
    }
} );

Note the code where I'm checking on whether the widget actually exists, that's because you don't want to modify this checkbox if it is editing an existing widget.

For reason not known to me it the code doesn't work in builtin SO code platform, so all I can do is to drop codepen link to check the code in action.

Finally we're working on a solution that would be suitable for your case. You can track it at https://github.com/ckeditor/ckeditor-dev/issues/2277

CKEditor Checkbox Default Value

1 Answers