CKEditor Checkbox Default Value

CKEditor Checkbox Default Value



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.



enter image description here



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.


dialogShow


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
Sep 7 '18 at 17:05






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
Sep 16 '18 at 21:58


dialogShow


CKEDITOR.replace


instanceReady


editor#dialogShow






Thanks for the update and pointing me in the right direction. I'm going to play around with the listeners some more.

– chirinosky
Sep 17 '18 at 14:16





1 Answer
1



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


dialogShow


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






Thanks Marek. The code above checks the box, but causes some unwanted side effects. I have 05 editor instances on the page and CKEDITOR.replace() prevents the other instances from loading and sets a different toolbar outside of 'default' config. Would a variation of the code above (updated question) work?

– chirinosky
Sep 16 '18 at 3:16



Thanks for contributing an answer to Stack Overflow!



But avoid …



To learn more, see our tips on writing great answers.



Required, but never shown



Required, but never shown




By clicking "Post Your Answer", you agree to our terms of service, privacy policy and cookie policy

-