Search code examples
ckeditor

How do I programmatically set default table properties for CKEditor?


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, or the width is by default set to 100%.


Solution

  • 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!