How do I programmatically set default table properties for CKEditor?

Question

I am trying to set up the default properties of table that is created inside CKEditor.

For example is there a way to make sure that the attribute border is 0 not 1,

Answer 1

Here you go. dialogDefinition event solves the problem:

CKEDITOR.on( 'dialogDefinition', function( ev ) {
    var dialogName = ev.data.name;
    var dialogDefinition = ev.data.definition;

    if ( dialogName == 'table' ) {
        var info = dialogDefinition.getContents( 'info' );

        info.get( 'txtWidth' )[ 'default' ] = '100%';       // Set default width to 100%
        info.get( 'txtBorder' )[ 'default' ] = '0';         // Set default border to 0
    }
});

CKEDITOR.replace( 'editor1' );

More to read:

• This official guide will help you playing with dialog API (also with devtools plugin).
• Devtools plugin is helpful when looking for IDs and elements in CKEditor dialogs.

Have fun!

Answer 2

If you need to make changes to the table options when the table is first created AND when the table properties are edited later, then you need to also target 'tableProperties' in addition to 'table' as seen below:

CKEDITOR.on( 'dialogDefinition', function( ev ) {
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;

  if ( dialogName == 'table' || dialogName == 'tableProperties' ) {
      var info = dialogDefinition.getContents( 'info' );

      info.get( 'txtWidth' )[ 'default' ] = '100%';       // Set default width to 100%
      info.get( 'txtBorder' )[ 'default' ] = '0';         // Set default border to 0
  }
});

CKEDITOR.replace( 'editor1' );

This is from @DanH comments from the @oleq answer. But I thought it's worth putting into it's own answer since I overlooked this the first time I was making this change.