Change CKEditor Table Properties default width


If you want to make your CKEditor table responsive you need to set the table width in percentage rather then a fixed px or em value. By default, the table width value is set to 500 px. To change this value you need to add the following code in config.xml file.

/**
 * @license Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see LICENSE.md or http://ckeditor.com/license
 */



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

	  if(diagName === 'table') {
	    var infoTab = diagDefn.getContents('info');
	    
	    var width = infoTab.get('txtWidth');
	    width['default'] = "100%";
	    
	    
	  }
});

The above code will set the Table's default width to 100% instead of 500 as previously set.

Change CKEditor default width.png
Change CKEditor default width.png

Warning: include(../../c2c-templates/common/topic-pages/ckeditor.php) [function.include]: failed to open stream: No such file or directory in /home/content/04/10623904/html/2015/change-ckeditor-table-properties-default-width/index.php on line 107

Warning: include() [function.include]: Failed opening '../../c2c-templates/common/topic-pages/ckeditor.php' for inclusion (include_path='.:/usr/local/php5_3/lib/php') in /home/content/04/10623904/html/2015/change-ckeditor-table-properties-default-width/index.php on line 107