Jump to content

CKEditor table default width

Recommended Posts

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

I found the following:

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)?

Share this post

Link to post
Share on other sites

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");
	return style.sheet;

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


Share this post

Link to post
Share on other sites

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.

Share this post

Link to post
Share on other sites

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

Share this post

Link to post
Share on other sites

Maybe this could help:


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.

  • Like 1

Share this post

Link to post
Share on other sites

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.


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.

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Create New...