CKEditor table default width

[cjx2240]

Does anyone know if its possible to change the default width of tables in Ckeditor, eg to 100%?

I found the following:
http://ckeditor.com/comment/129258#comment-129258

And so I added this

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;
    // Check if the definition is from the dialog we're
    // interested in (the "Table" dialog).
    if ( dialogName == 'table' ) {
        // Get a reference to the "Table Info" tab.
        var infoTab = dialogDefinition.getContents( 'info' );
        txtWidth = infoTab.get( 'txtWidth' );
        txtWidth['default'] = '100%';
    
});

Into /modules/InputfieldCKEditor/config.js

But it had no effect, dialogDefinition does not seem to trigger anything. May be that my wysiwyg is inside a RepeaterMatrix (loaded with ajax)?

[tpr]

I would definitely do this via CSS. You can add a CSS file using the module AdminOnSteroids for example or Admin Custom Files.

table {
  min-width: 100%;
}

Or you can continue using config.js  and try adding this:

var sheet = (function() {
	var style = document.createElement("style");
	style.appendChild(document.createTextNode(""));
	document.head.appendChild(style);
	return style.sheet;
})();

sheet.insertRule("table { min-width: 100%; }", 0);

 

[cjx2240]

Hi @tpr, thanks, this would certainly work! However, to clarify, the problem with this is that it would take away control over the width from the user of the CMS (not me). I want the default to be 100%, but I still want someone to be able to set it/edit it later. At the moment I'm essentially doing what you said, by forcibly overriding it on the front-end anyway. But I don't want to do this, I want it to be 100% by default so I don't need to "fix" it with CSS.

[LostKobrakai]

CKEditor styles will be inline styles anyway, which would override any css you supply otherwise.

[tpr]

Maybe this could help:

http://ckeditor.com/addon/tableresize

To force initial 100% you could use CSS:

table:not([style]) {
  min-width: 100%;
}

Since Table Resize adds an inline style the initial 100% width should go away if the user resizes the table.

[Arcturus]

I had the same concern as cjx2240. Not the most elegant approach, but since I'm not a JavaScript wizard I directly edited the following files and placed a note in my root development directory to tweak these when updating the CMS.

wire\modules\Inputfield\InputfieldCKEditor\ckeditor-4.8.0\plugins\table\dialogs\table.js
wire\modules\Inputfield\InputfieldCKEditor\ckeditor-4.8.0\plugins\table\dialogs\table.min.js

Tip: Where it says "100%":500:0 change it to "100%":"100%":0

If anyone knows how to achieve this 'non-destructively' from a user's config.js, it would be great to know.